1. >> Header & Footer in CSS

2. Page Layout
Header
Content
Footer
Navigation

3. Web-based Systems | Misbhauddin
Laying out a header in HTML using CSS
Header Layout
Web-based Systems | Misbhauddin

4. Web-based Systems | Misbhauddin
Header Components
Search/ Login/Cart/Social
Logo
Identity & Title
Navigation Links
Web-based Systems | Misbhauddin

5. Types of Header (Based on Layout)
CONVENTIONAL
Logo Left/ Menu Right
UN-CONVENTIONAL
Logo Right/ Menu Left
FOCUS
Logo Center/ Menu Left& Right
Web-based Systems | Misbhauddin

6. Types of Header (Based on Design)
1. The Huge Header
The “BAD”
Takes up a lot of Space
The “GOOD”
More Impact if done correctly
Web-based Systems | Misbhauddin

7. Types of Header (Based on Design)
2. The Web App
Screenshots of the Product
The “CALL TO ACTION”
Try Now / Sign Up for Free
Web-based Systems | Misbhauddin

8. Types of Header (Based on Design)
3. The Illustrated Character
Popular Trend
WHY
They add character,
personality and
a sense of friendliness to your website
Web-based Systems | Misbhauddin

9. Types of Header (Based on Design)
4. The Portfolio Screenshots
For Services/Products Companies
WHY
Show different examples of work
alongside
a tagline introducing yourself
Web-based Systems | Misbhauddin

10. Types of Header (Based on Design)
5. The Carousel (Slider)
WHY
Allow you to fit in more information into the header
with a slider effect
Web-based Systems | Misbhauddin

11. What To Include In Footers
SITE MAP
Detailed list of the pages on a website, divided into categories
Helps users to navigate
Helps Web Crawlers (Search Engines) to locate pages
Web-Based Systems - Misbhauddin

12. What To Include In Footers
SITE MAP
Web-Based Systems - Misbhauddin

13. What To Include In Footers
SITE MAP
Web-Based Systems - Misbhauddin

14. What To Include In Footers
QUICK “ABOUT” OR “CONTACT” INFORMATION
Web-Based Systems - Misbhauddin

15. What To Include In Footers
A SIMPLE CONTACT FORM
Web-Based Systems - Misbhauddin

16. What To Include In Footers
BACK TO TOP LINKS
Web-Based Systems - Misbhauddin

17. What To Include In Footers
Social media
Web-Based Systems - Misbhauddin

18. What To Include In Footers
Copyright statement / Links
Web-Based Systems - Misbhauddin

19. Web-based Systems | Misbhauddin
Pre-requisite
Download the lec7.zip file
It includes a folder called assets with all the resources you will need to do the exercise.
The output-exercise.png shows the expected output.
Except for the navigation bar (menu bar) in the header and the Join Button, do everything.
Hint: The footer has four columns (divs) – recall last class.
Web-based Systems | Misbhauddin