1-html-and-css-foundations.md

#HTML and CSS foundations

Outcome

You'll be able to build a static website, control where things go on the page and change the look and feel of things on the page.

You'll understand:

• The syntax and layout of HTML, most of the HTML <tags> and what they're used for.
• What CSS is, and the different things you can do with it.

Prerequisites

• Text editor (Sublime)
• Web browser (Chrome)
• Code School subscription
• Codecademy account.

Advice

You can watch codeschool videos faster than x1 if you want to.

HTML 5 and CSS 3 are the latest versions. But HTML and CSS are continually improved in modern browsers so the numbers aren't important. Just use the latest / best features.

HTML

HTML is old and all the browsers have to support it. As a result the tag names e.g. <div> make no sense 😄. You just have to learn them...

CSS

Opinion: The 'box model' is old and very difficult to reason about. There's a newer model called the flex-box model which I find much easier 😄.

Opinion: float, block and inline are hard and getting something to layout how you want it is surprisingly hard.

He talks alot about 'resetting' the css to override the browser defaults. There are tools / libraries to help with this, you wouldn't do it manually.

Learning materials

Core

• Code School Front End Foundations Course (Level 1-5)

Alternative

• Codeacademy No videos, learn by doing.

• Shayhowe. All reading and visual.

• Another reading example

Additional / useful

• HTML Cheatsheet (Might be a better one out there)

• CSS Cheatsheet

• Another cheatsheet (Wish it was just a website).

Tasks

• Run through the core learning materials + tasks.
• Codecademy problems
  • Broadway
  • Innovation Cloud
  • Move
• Get one of the above Codecademy courses to work on your laptop locally.

Optional tasks

• Make recent Airbnb site from scratch