_html-fundamentals.md

Lecture ✍️

Hello world HTML

• From this point on you'll always need HTML, you might think that this content is easier BUT it's so incredibly useful, people are hired as HTML/CSS experts
• To get to developer tools right click on page and then inspect element, or option-command-i
• The cornerstones of the world wide web, HTML CSS and JavaScript
• HTML = structure / content
• CSS = layout / style
• JavaScript = behavior / make website dynamic
• JavaScript can be front end or back end (with Node), don't worry about JavaScript for now, let's get good at writing clean HTML and CSS for the next week and a half
• Live server VSCode extension
• Using harrisonmalone.com as an example of basic HTML, very minimal CSS going on, lets try to build it, we want you to be able to write clean HTML so it works well together with your CSS
• HTML files and how that creates a URL, localhost replaced with whatever I have as a domain name, directories and how that works with HTML files
• Shortcut in VSCode with ! + tab, what this generates
• Talk about the head vs body, refer to head.html
• Halt and catch fire

HTML elements

• HTML5 vs older HTML
• HTML5 introduced things like <nav> and <footer>, these are the two most important ones, can use other stuff but no real need to at this point
• I'm happy for you to <div> it up

band-page.txt

Create a website about your favourite band using the HTML skills you have just learned. There's no need to do any styling (as we haven't learned it yet!)

Elements you should include on your site and page(s):

A homepage (index.html) featuring a photo of the band and a brief description of the band (eg. how it got started, what genre of music, etc...)
A discography page showing an ordered list of 3 studio albums (in order of release date) with a photo (album cover), title and track listing for each.
A bio page showing an unordered list of the band members with photo, name and instrument/role of each.
A nav bar with links to the 3 pages.
A heading on each page to indicate which page it is. Homepage heading should be the name of the band, with a sub-heading saying "Tribute Site" or similar.
Use emphasis on keywords
A footer at the bottom of each page declaring your copyright on such a wonderful write-up, and make sure you use the copyright symbol!
Your page should validate in this at this link: W3 Validator https://validator.w3.org/#validate_by_input.
Keep your code readabable and maintanable for your future self and future contributors.

blog.txt

create a blog page similar to the one i showed you today (https://harrisonmalone.com)

you can just use lorem ipsum 

make the links (a tags) color dodger blue (just use inline styles for all css)

create a favicon

centre the content using margin and max-width (you'll have to google for this)

create a posts directory, within that directory create two years directories (2018, 2019), within years have months, within a few of the months create blog posts with a title, date and content (lorem ipsum is fine)

research <nav> and <footer>, create a navbar element and a footer element on the index page of your blog project

what kind of display is <nav> and <footer>, block or inline?

complete the w3 schools html quiz https://www.w3schools.com/html/html_quiz.asp

run through the freecodecamp html course https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5