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 CodePen or W3Schools, 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 as Github Pages. With this knowledge it will be possible to make all your great work publicly available for friends and potential future clients!

Example

One pager

  • description

    • Create a one-page website (see some theme ideas below).

  • Submit:

    • Git repository
      • Add comments for each relevant code block
      • Add project description and details in the README.md file
    • Public URL (no need for a custom domain). Tip: use GitHub Pages.

  • What should be included:

    • Website’s 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
      • At least one page should be available

    • Theme ideas:

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

Materials

Easy in-browser HTML, CSS & JS sandboxing with GlitchHTML Cheat SheetCSS Cheat SheetInteractive cheatsheet for CSS (and HTML is also there if you click the link on top of the page)HTML & CSS TutorialChrome Dev Tools Crash CourseFree code camp interactive tutorial

Topics

    return
    • 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
    • ;

Tips

If you get stuck you can always contact us on Slack and we will reply to you as soon as we can. You can also ask us to do a “huddle” (a video call on Slack) with you and then we will find a time to do that.

Requirements

Knoweldge
  • 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
You are not logged in, if you want to return this guide you need to log in via authpage