Building Your First Website: HTML + CSS Fundamentals

Building Your First Website: HTML + CSS Fundamentals

Learning Objective

At the end of the lesson, you will be able to understand the basic concepts of HTML and CSS and create a simple webpage.

What do you already know about HTML and CSS?

Introduction to HTML and CSS

HTML is the standard markup language for creating web pages, while CSS is used for styling and layout. They are fundamental for web development.

Basic Structure of HTML

HTML uses tags to define elements such as headings, paragraphs, and images. It provides the structure of a webpage.

CSS Selectors and Properties

CSS selectors are used to target HTML elements, and properties are used to define how the selected elements should be styled.

Creating Your First HTML Page

Start with the basic HTML structure including , , and tags. Then add content like headings, paragraphs, and an image.

Styling Your HTML Page with CSS

Introduce a separate CSS file, link it to the HTML page, and demonstrate how to change the styles of the HTML elements using CSS.

Adding Color and Font Styles

Teach how to use CSS to add color, change fonts, and apply basic styling to the webpage.

Box Model and Layout

Explain the box model and how it affects the layout of elements on a webpage, including margins, borders, padding, and content.

Responsive Design Basics

Introduce the concept of responsive design and how CSS can be used to create layouts that adapt to different screen sizes.

Conclusion and Practice

Summarize the key points of the lesson and encourage students to practice by creating their own simple webpage using the concepts learned.

Write down 3 things you learned in this lesson.

Have students enter three things they learned in this lesson. With this they can indicate their own learning efficiency of this lesson.

Write down 2 things you want to know more about.

Here, students enter two things they would like to know more about. This not only increases involvement, but also gives them more ownership.

Ask 1 question about something you haven't quite understood yet.

The students indicate here (in question form) with which part of the material they still have difficulty. For the teacher, this not only provides insight into the extent to which the students understand/master the material, but also a good starting point for the next lesson.