HTML & CSS Basics (v1)

Introduction

HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now lives inside HTML tags that tell your browser how to order the content on the page. Go on, right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools and it will show you the structure of the page.

inspect HTML

CSS tells the browser if you want to display any of those tags a particular way, for instance, turning its background blue and pushing it a little to the left. In your Developer Tools, you can see the CSS styles in another panel, usually showing which specific properties were inherited from which lines of CSS.

styles panel

Learning Objectives

  • Why do we separate HTML and CSS?
  • What are classes and IDs (and how are they different)?
  • What are elements?
  • What are tags?
  • What are attributes?
  • What are forms?
  • What is a div?
  • What are selectors?
  • What are properties?
  • What are values?
  • What is the "query string" in a URL and what does it do?
  • What is the difference between "pixels" and "ems"?
  • How do CSS styles for a particular element get inherited? i.e. how does an element get its "default" styles?
  • What are two CSS attributes you can change to push an element around on the page?
  • What are the three different ways to include CSS in your project or use CSS to style a particular element?
  • What is the "default stylesheet" or "user agent stylesheet"?
  • Why use a CSS reset file?

What is HTML & CSS?

Watch these two wonderful introductions to HTML and CSS by the Harvard CS50 team. Estimated Total Time: 2 hours

Web and HTML

Duration: 30 minutes

BREAK: Take a 10 to 15-minute break before you continue. Try to reflect on what you learned on the previous video and take some notes on the most important concepts.

Web and CSS

Duration: 40 minutes

Use Agent Stylesheets & CSS Resets

Learn about your browser’s default stylesheet and CSS resets in the next videos. This is why there are some spaces that show up in your layout even if you haven’t specified CSS. Real developers almost always use a CSS reset to blow away the default stylesheet and let them work from scratch.

The CSS resets are a very important and common pattern, especially among the various CSS frameworks. Most of the CSS frameworks out there contain some sort of CSS reset code at the start. More about CSS frameworks in later chapters.

Duration: 5 minutes

Duration: 9 minutes

Web Accessibility – An Introduction

Watch the following quick introduction to one of the most important aspects of Web Development: Web Accessibility. You will be reading more on the subject in subsequent lessons.

Duration: 1 minute

Web Accessibility – The Importance of Proper Color Contrast

What is effective color contrast and why is it so important? Watch the next video to find out more.

Duration: 3 minutes

You now know why it’s really important to focus on web accessibility matters while developing for the web.

Take a quick break and dive into the following video that will walk you through the process of checking the color contrast in your web content.

Duration: 11 minutes

Additional Resources

Assignment

Follow the instructions here and submit your Pull Request in the Quiz below.

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 28.04.2021

Contributors:

Thanks to: