Exercise

• The goal of this exercise is to create a website to order food from a pop-up snackbar
• Start from html-css-exercise.zip, which contains two basic, unstyled HTML files (index.html and order.html) and three images (pizza.jpg, salad.jpg, sandwich.jpg) in the folder images

• This is what the solution should look like:

• The exercise is divided in 3 parts. Each part requires the knowledge of specific HTML/CSS topics, as stated in the prerequisites remarks

Part 1 - Preparation

PREREQUISITES

• Favicon Generator
• Web fonts & Icons

Favicon

• Create a folder icons
• Download the following SVG and use it to create all the favicons using RealFaviconGenerator (opens new window)
  
  • The icons must be placed in the icons folder (make sure to apply the correct path options BEFORE generating the icons)!
• Add the generated icon code to (the head section in) both pages index.html and order.html

Google Fonts

• Create a new CSS file style.css (in a subfolder css) and link it to both HTML pages
• Import the 'Fira Sans' (styles: 'Regular 400' and 'Bold 700') and 'Rock Salt' Google fonts (opens new window)
  • Apply 'Fira Sans' to the body, while 'Rock Salt' is used for the main headings h1

Font Awesome icons

• Import a Font Awesome 6 CDN link in style.css
• Add the fa-copyright icon in front of 'Expect MORE food' in the footer (of both HTML files)
• Replace the O in 'Expect MORE food' by the fa-utensils icon in the first paragraph and in the footer (of both HTML files)

Part 2 - Adding and styling content

PREREQUISITES

• Bootstrap 5 grid and utilities
• Bootstrap 5 forms

TIPS

• Use the Bootstrap documentation (opens new window) to look for specific code examples, class names, ...
• Try to get an understanding of the different Bootstrap classes by examining the corresponding code (either via developer tools/F12 or via the source code)

Both pages

• Copy the necessary Bootstrap CDN links (CSS and Javascript!) to both HTML files
  • Be sure to link the Bootstrap CSS BEFORE your own style sheet style.css
• Give the body a secondary background color
• Put all the content (nav, main and footer elements) in a container with
  • light background color
  • no horizontal padding
  • a minimum height of 100vh
  • a column-based flex display

Navigation

• Change the nav into a responsive navbar with dark background and light text
  • The navbar content collapses behind a hamburger icon (on small screens) and expands on md and larger screens
  • The navbar-brand at the left of the navbar contains the icon fa-utensils in color primary
  • Add some horizontal padding
• Make sure that the active class is added to the link that corresponds to the current page!

Footer

• Give the footer a dark background and light text color
• Center the text (horizontally and vertically) in the footer and add some padding/margin to te elements
• Change the color of the fa-utensils icon to primary

main element

• Add some horizontal padding to the main element, which should fill the remaining space in the flex container (resulting in a footer that sticks to the bottom of the page)
• The main heading h1 should be centered, has some bottom padding and color primary

REMARKS

• As a lot of code (nav, footer, layout of main and h1 element) is completely/nearly the same on both pages, you probably copied it from one file to the other. Unfortunately, this approach is not that maintenance-friendly, as changes to the common layout need to be applied on both (all) pages.
• Solutions/alternatives:
  • For now, you could opt to transfer some common styling to css/style.css, e.g. for h1

    h1 {
        ...    
        text-align: center;
        padding-bottom: 3rem;
        color: #007bff;    
    }
    

    However, it will be infeasible/unpractical to code the more complex styling/functionality (e.g. related to the navbar) yourself. And what's the point of using a framework like Bootstrap if you're going to (re)write everything yourself anyway?
  • A better solution/alternative will be discussed in our Course 'Web Applications in PHP' (2 ITF) (opens new window)
    • In PHP you can store the common code in separate files which then can be included in your specific pages
    • In Laravel (a PHP framework) you can make a template (with the common code in it), which then can be extended and adjusted for the specific pages

index.html

• Use Bootstrap cards to organize the information of the three lunch snacks
  • card-img-top for the image
  • card-body
    • card-title for h5
      • The price should be included in a badge with primary background color, which should be right-aligned
        (Tip: make the h5 a flex container)
    • snack description in card-text
• On small devices, the cards should take the full width of the container. For md (and larger) screens, the cards are placed besides each other.

order.html

• Complete the form
  • Use the post method and submit the form to https://it-fact.be/form.php
  • Floating label and input (text) for 'Name', required
  • Floating label and input (email) for 'Email', required
  • Floating label and input (tel) for 'Phone', required, pattern for Belgian (landline and mobile) numbers
  • Floating label and dropdown list for 'Food' with values 'Pizza (€ 7.95)', 'Sandwich (€ 3.95)' and 'Salad (€ 5.95)'
  • label 'Payment'
    • labels and radio buttons for 'Bank card' and 'Student bill'
  • two buttons placed besides each other, with some extra margin above/below them
    • button in primary color to submit the form
    • button with secondary outline that clears the values (back to default values)
• Use the information on the following screenshot to determine the name attributes you should use:

• The form should look different depending on the screen size

TIP

As this implementation with 3 designs (2 breakpoints) for the form is rather challenging, you might start with 2 designs (1 breakpoint) and leave out the design for lg (or larger) devices at first

• All elements are stacked vertically (full width)
  

• The first four inputs are placed in 2 columns that each take half (6/12) of the space
• The radio buttons and buttons are left-aligned with the "input elements"
  

• The entire layout is divided into three columns that each take one-third (4/12) of the space

Part 3 - The finishing touch

PREREQUISITES

• CSS Selectors in style.css

• Use a general sibling selector to give all paragraphs (preceded by and on the same level as a h1) a blue-ish
  (rgb(50, 110, 160)) text color

• Use a pseudo-class selector to give the options (in the dropdown list) a "striped" look and feel using the color
  rgba(50, 110, 160, 0.25)
  
• Use a pseudo-class selector to give the invalid input and select fields a red-ish (rgba(200, 0, 0, 0.15)) background
  Use a pseudo-class selector to give the valid input and select fields a green-ish (rgba(0, 200, 0, 0.15)) background
  
• Use a pseudo-class selector to give the links (in the navbar) a primary (= #007bff) background with 0.25rem radius
  • The navbar-brand link and other links on the pages should not be affected!
    
• Use an attribute selector to select all the fa-utensils icon and add 0.5rem left and right margin to them
  

  

• Use an attribute selector combined with a psuedo-class selector to underline the first letter of all labels with a for attribute, and make these letters bold and underline