Web 3: build a basic html site using a semantic html5 template page
Goal
The student must understand basic html5 elements and what is meant by semantics to create a site of pages. The pages must validate correctly with the W3’s html validator, https://validator.w3.org.
Building on exercise 2, take the login form’s structure and create a site template. From this template create 4 other pages:
-
a welcome or landing page
-
a second page
-
a third page
-
a logout page.
1) The pages titles and headers have to be renamed appropriately. The footer contains your company name, copyright etc.
2) All the new pages must have the appropriate navigation links to the other pages:
-
welcome
-
second page
-
third page
-
logout We won’t worry about disabling the link of the page that you are on with this version.
3) The main content can be anything that you want, i.e. paragraphs from Lorem Ipsum, https://lipsum.com/
4) Along with any logout text that you want as explanation, Logout has a button in a post form for logging out.
Hint: The login form’s action will go to the welcome page.
5) Playing with how the navigation links can be styled, position the navigation area to the left of the main content using flexbox css. The stylesheet that you have been using has some basic flexbox and container definitions. Pick which method works for you: the included css file’s or Traversy’s. If you use Traversy’s method, then you will need to add your own css file with those definitions.
Tutorials
I am not sure how useful Linda.com is for this.
-
'Flexbox CSS In 20 Minutes', https://www.youtube.com/watch?v=JJSoEo8JSnc
-
'Build A Responsive HTML & CSS Template With FlexboxGrid,' https://www.youtube.com/watch?v=qlA7dputiNc
Advanced
-
'Responsive HTML & CSS Side Menu From Scratch,' https://www.youtube.com/watch?v=wpGNFGqNfdU
General References
-
Tania Rascia has a gem of a site with easy to understand introductory to intermediate tutorials - https://www.taniarascia.com/blog/ - on css, mysql, php, and jquery
-
'Mozilla Developer Network,' https://developer.mozilla.org/en-US/.
-
'HTML5 Semantic Elements,' https://www.w3schools.com/html/html5_semantic_elements.asp
-
'Just Starting Out with CSS & HTML,' https://css-tricks.com/guides/beginner/