Web 2: build a semantic html5 login page styled with a basic css framework

Goal

To understand an html5 post form styled using an advanced css reference style sheet. The page must validate correctly with the W3’s html validator - https://validator.w3.org.

The page content can be made more realistic if you want, but you can just use the basics as suggested below:

  • page title: [Co-op’s name] login

  • header title: [Co-op’s name] app

  • info paragraph stating please log into my app

  • userid form field with a label that explains what it is, and length and maxsize 8 characters

  • password form field with a label that explains what it is, and size of 32 characters but, no maxlength and a minlength of 8 characters; in other words the min password is 8 characters long with no max password size but only 32 characters of it is shown

  • footer for your app.

Then use the styelsheet file with this email. Note, it is from one of Tania’s tutorials.

I want you to get this 'right' because the html in it will be used to create the template for your other html files. Feel free to ask questions.

Tutorials

I am not sure how useful Linda.com is for this.

Basic - for beginners with the last being tips:

Intermediate - meaning a refresher for experienced devs:

Advanced, if you need it:

General References

  1. 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

  2. https://www.w3schools.com/

  3. 'Mozilla Developer Network,' https://developer.mozilla.org/en-US/.

  4. 'Just Starting Out with CSS & HTML,' https://css-tricks.com/guides/beginner/