Web Analytics Made Easy - Statcounter
SVET PROGRAMIRANJA

CREATING A SITE TO CREATE A LOGO

The site should have a home page, which can be seen by everyone, which contains basic information about the site, a description of the steps to create a logo, a page for logging and registration, a page with a choice of logo type, a page for filling in title information logo, logo editor, the ability to save created logos, and a download area.
We will first create a cover page using HTML, CSS and javascript. Then we will embed it in the Django app.

Creating a website home page

​Creating the home page of the site using HTML, CSS, Javascript, JQuery. How to create a logo creation application is shown in the following video:
​The title page has a menu, a header main part and a footer
Creating the cover page of the
Figure 1: Creating the cover page of the "Create Your Logo" website
  • Header:
    • Description: "The header contains the site’s name and navigation menu. It allows users to easily find important sections of the site."
    • Contribution to User Experience: "A clearly defined header aids in quick orientation, enabling users to navigate effortlessly between pages and information."
  • Menu:
    • Description: "The menu consists of options such as 'Home', 'About Us', and 'Logo Examples'."
    • Contribution to User Experience: "Well-defined categories help users quickly access the content they are interested in, reducing the time needed for navigation."
  • Main Content Area:
    • Description: "This section provides information about the logo creation process, including visual guides through the steps."
    • Contribution to User Experience: "This area offers users clear instructions and guidance, making the logo creation process more intuitive and less intimidating."
  • Footer:
    • Description: "The footer includes contact information, links to social media, and additional resources."
    • Contribution to User Experience: "This section allows users to easily find additional information and connect with the site, increasing engagement and return visits."
  • Brief Overview of Each Page:
    • Logo Type Selection Page:
      • Description: "This page allows users to choose from different logo types (e.g., text-based, symbolic)."
      • User Expectations: "Users can expect a preview of various logo styles, with explanations of which types best suit their needs."
    • Logo Information Input Page:
      • Description: "This page enables users to enter basic information such as brand name and color preferences."
      • User Expectations: "Users can expect a simple input form with tips on how to choose the best options for their brand."
    • Logo Editor:
      • Description: "An interactive tool for customizing the selected logo."
      • User Expectations: "Users can expect to modify logo elements such as colors, fonts, and symbols, with visual changes happening in real time."
Areas on the website can be organized using div tags within the body of the page, ie. between body tags <body> </body>.
The whole page is organized between <html> and </html>. Content of the website from which we start creating:
< !DOCTYPE html >
< html >
< head >
< title > Title < /title >
< /head >
< body >
< /body >
< /html >
​See more at  w3schools.com
 
 To make the title nicely stylized and add some functionality, a Bootstrap framework (in case it uses Bootstrap 4) version is added. You also need to add jQuery files. Therefore, it is necessary to connect to CDN () using the tag link for css files, the script tag for linking to javascript files:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
​This section should be added to the header between the <head> and </head> tags
The header should also have meta tags e.g.
<meta charset="UTF-8" />
Meta data is a brief description of the content of web pages. They are not visible on the page, but search engines use them when they provide search results.
Within the body tags, the page is divided into areas with div tags, into an header, a footer and a central part. These div tags are located within the main div tag, which for the previously mentioned is the parent div:
<div class="container">
    <div class="header d-flex flex-column text-center">
    </div>
    <div class="d-flex flex-column content">
    </div>
    <div class="footer d-flex flex-column">
    </div>
</div>
 To get the proper look of these div tags, classes from css files are used: The header and footer classes are defined in main.css, while other classes from bootstrap version 4 for flex display only exist from version 4 of bootstrap. See the following tutorial:
https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
The d-flex variant with the flex-column class arranges the components within the entire width, one below the other. If the flex-row class was selected instead of the flex-column, then the layout would be in one row.
In the  header you should add a menu:
<nav class="nav-container navbar-expand-lg primary d-flex flex-row p-2 align-items-end ">       
 
        <!-- Items -->
        <div class="collapse navbar-collapse" id="topNavBar">
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#" >
                        <span class="full-text" aria-hidden="true">&nbsp;
                             Home
                         </span>
                    </a>
                  
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">
                        <span class="full-text" aria-hidden="true">&nbsp;
                             About
                        </span>
                    </a>
                   
                </li>
                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown"  href="#" id="navbarDropdownMenuLink">
                        <span class="full-text" aria-hidden="true">&nbsp;
                             Logo examples
                        </span>
                       
                    </a>
                    <ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
                           <li class="dropdown-item">
                                    <a href="">
                                              <span class="full-text" aria-hidden="true">&nbsp;
                                                         Business
                                              </span>
                                    </a>
                           </li>
                           <li class="dropdown-item">
                                    <a href="">
                                               <span class="full-text" aria-hidden="true">&nbsp;
                                                           Education
                                               </span>
                                    </a>
                            </li>
                            <li class="dropdown-item">
                                     <a href="">
                                               <span class="full-text" aria-hidden="true">&nbsp;
                                                           Sport
                                               </span>
                                      </a>
                             </li>
                      </ul>   
                </li>      
            </ul>
      </div>
    </nav>
 See how to create a menu using bootstrap on the page:​
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

The classes that are in main.css and are in charge of the layout of the html page described above can be seen in the following image:
Inside the middle part, two more internal div tags have been created, one is a ribbon with 3 divs inside which are arranged in one row:​
​Code that will display this:
 <!-- Middle part of page -->
      <div class="d-flex flex-column content">
        <!-- Colored ribbon with steps to create a logo -->
        <div class="ribbon d-flex flex-row justify-content-around">
          <div class="p-2 field">
            <h1>1. Choose a name</h1>
            <p>Enter your name or the name of your company logo</p>
         </div>
         <div class="field">
            <h1>2. Choose a logo</h1>
            <p>Select the logo that the application was created at the start and if you want to make your own changes to it</p>
         </div>
         <div class="field">
            <h1>3. Download logo</h1>
            <p>Save the logo under your profile and download the file</p>
         </div>
       </div><!-- Colored ribbon with steps to create a logo - end-->
        
       
The ribbon and field classes are described in the css file​ main.css
​
It can be noticed here that the size used is mostly vw units, which is in relation to the size of the display on the screen (viewport). This means that the size will depend on the resolution of the device on which it is displayed.
Another div is inside the content and contains 3 images (<img>). The image shown is shown in the image below.
Code which display this:
​ <!-- Examples of created logo -->
        <div class="logo_example d-flex flex-column justify-content-around">
            <h1 class="p-2">Examples of created logos</h1>
            <div class=" d-flex flex-row justify-content-around">
                  <img src="images/logo_prim_1.png" class="rounded" alt="Computer">
                  <img src="images/logo_prim_2.png" class="rounded" alt="Need">
                  <img src="images/logo_prim_3.png" class="rounded" alt="Svet programiranja">
            </div>
         </div><!-- Examples of created logo - end-->
      </div> <!-- Middle part of page - end -->
You can see the complete code page on the website: Create Your Logo - home
You can see the complete CSS code on the page​ main.css
Previous
​|< Frontend and backend programming
​Next
​​​Creating Python web application >|
Algoritmi
Matrice
Java
Linkovi
​Politika Privatnosti
Kontakt

© 2021 by Slobodan svetprogramiranja.com

Sva prava zadržana
SVET PROGRAMIRANJA