← All projects/1 - Introductory Course/HTML & CSS - Introduction

Guide: HTML & CSS - Introduction

Description

HTML and CSS are two of the web's building blocks. They allow us, respectively, to define what are the contents of a website and how it should look like. In this module you will get in touch with the syntax, learn all fundamental parts of each and create a website.

If you never worked with either before, the syntax might look a little weird at first but it grows on you and you'll feel at home in no time. Focus on creating clean code, which you understand 100%. Make extensive use of sandboxes (with Glitch, CodePen or Web Maker, for example). Get comfortable and use HTML's semantic tags (header, main, section, footer, nav, etc). Go through the list of HTML and CSS topics described in this Guide to make sure you haven't overlooked anything important.

It's also a good moment to learn a bit about Developer Tools, which all major browsers offer. With these tools you'll be able to inspect your work and understand what's really happening when the browser uses your files.

But none of that is much fun if you can't share, so you'll also release a website on the web using a service such Surge or Github Pages. With this knowledge it will be possible to make all your great work publicly available for friends and potential future clients! 

Knowledge

  • Understand what a markup language is
  • Understand what a style sheet language is
  • Understand what the "cascading" in Cascading Style Sheets means
  • Understand what "static site hosting" is

Skills

  • Be able to setup a development environment to start a web development project
  • Be able to use HTML and CSS to create a simple website
  • Be able to use the browser's development tools to inspect a website's code
  • Be able to publish a static website

Topics

  • What is HTML and CSS?
  • Setup development environment
  • Basic HTML aspects
    • Syntax
      • Units
    • Common tags
      • Block elements
        • div, main, section, ul, li, table
      • Inline elements
        • p, a, img
    • Semantics
      • Common layout structure (header with navbar, main, sidebase, footer)
  • Basic CSS aspects
    • Structure & Syntax
    • Common properties
    • Colors
    • Fonts
    • Display & Visibility
    • State pseudo-classes
    • BEM Notation
    • CanIUse.com
  • Chrome Dev Tools
  • Deployment
    • Git
    • Markdown (README.md)
    • Surge, Github Pages and similar services

Action Points

  • Spend time on a HTML and CSS crash course (3-4h for each should suffice)
  • Create a page to test out your new HTML and CSS skills
  • Use the Dev Tools to inspect your work and other sites you like
  • Find out what the website caniuse.com is good for
  • Figure out how to use a static hosting service such as Surge or Github Pages and host your work

Deliverable: Website

  • Submit:
    • Glitch Project URL
      • Add comments for each relevant code block
    • Project description and details in the README.md file

 

  • Minimum requirements
    • Website’s <body> should contain at least 3 parts: <header> element, <main> element and <footer> element
    • <header> element should contain at least a logo and navigation item
    • <footer> element should contain at least some contact information or similar
    • Website should contain:
      • At least 2 <section> elements
      • Paragraph, list, image and anchor elements
    • Website should be styled with CSS
      • Use of color palette
      • Use of Google fonts (or similar)
      • Hover state for links
      • Use BEM notation
    • At least one page should be available

 

  • Theme ideas:
    • Lost pet website 😢
    • New product or service
    • Portfolio
    • Upcoming event
    • Restaurant website

Classes

Resources