Make your first website, step by step!

HTML and CSS First website

Introduction to HTML and your first website

Lesson 1 - Introduction to HTML and your first website

In this lesson, we'll introduce you to the HTML language, explain its structure and the head, body, title and meta tags. The result will be an HTML 5 page.
FreeWritten by David Capka
Basic HTML tags

Lesson 2 - Basic HTML tags

In this lesson, you'll use the basic HTML tags, i.e. paragraphs <p>, text emphasizing via strong and em, and headlines h1-h6 to make a website.
FreeWritten by David Capka
Images and links in HTML

Lesson 3 - Images and links in HTML

In this lesson, we'll teach you how to insert images into your HTML page using the <img> tag, and links using the <a> tag. We'll also add subpages.
FreeWritten by David Capka
Exercises for HTML and CSS lessons 1-3

Exercises for HTML and CSS lessons 1-3

Solved tasks in HTML & CSS on emphasis, images, and hyper-links. Tasks are ordered by difficulty. Solutions are available for download.
FreeWritten by David Capka
Tables in HTML

Lesson 4 - Tables in HTML

In this lesson, you'll learn about tables in HTML, thead tags, tbody, th, tr, and td. We'll also merge table cells, and create a table header.
FreeWritten by David Capka
Lists in HTML and a table example

Lesson 5 - Lists in HTML and a table example

In this HTML tutorial we'll create skills page using HTML table and we'll introduce various lists (ul, ol and dl), and its items (li) with their usage.
FreeWritten by David Capka
Exercises for HTML and CSS lessons 4-5

Exercises for HTML and CSS lessons 4-5

Solved tasks in HTML & CSS on the topics of tables and lists. Tasks are ordered by difficulty. Solutions are available for download.
PremiumUnratedWritten by David Capka
Introduction to CSS (Cascading Style Sheets)

Lesson 6 - Introduction to CSS (Cascading Style Sheets)

In this lesson, we'll introduce you to CSS, and explain why Cascading Style Sheets were made. We'll compare 2 identical sites with and without CSS.
FreeWritten by David Capka
Basic CSS selectors and properties

Lesson 7 - Basic CSS selectors and properties

In this lesson, we'll show you how CSS selectors work and teach you about the text-align and text color properties.
FreeWritten by David Capka
The class selector and styling text in CSS

Lesson 8 - The class selector and styling text in CSS

In this lesson, you'll learn how to center images using the class selector, and we'll talk a little bit about changing font size and shadows.
FreeWritten by David Capka
Layout and backgrounds in HTML

Lesson 9 - Layout and backgrounds in HTML

In this lesson, you'll learn how to make a layout made up of a head, an article, and a footer. You'll learn HTML 5 tags such as article, header, section...
FreeWritten by David Capka
Exercises for HTML and CSS lessons 6-9

Exercises for HTML and CSS lessons 6-9

Solved tasks in HTML & CSS on basic CSS selectors and styles. Tasks are ordered by difficulty. Solutions are available for download.
PremiumUnratedWritten by David Capka
Floating content in HTML

Lesson 10 - Floating content in HTML

In this lesson, we'll show you how to create floating HTML content using the CSS float:left property which stacks elements next to one another.
FreeWritten by David Capka
Border, shadow and the boxmodel in CSS

Lesson 11 - Border, shadow and the boxmodel in CSS

In the lesson, we'll go over the styling element border in CSS using border and border-radius, box-shadow, and edges using padding and margin.
FreeWritten by David Capka
Exercises for HTML and CSS lessons 10-11

Exercises for HTML and CSS lessons 10-11

Solved tasks in HTML & CSS on styling and basic positioning. Tasks are ordered by difficulty. Solutions are available for download.
PremiumUnratedWritten by David Capka
Navigation menu, footer and HTML entities

Lesson 12 - Navigation menu, footer and HTML entities

In the lesson, we'll continue working on our website's layout, make a head with a navigation menu and a footer. You'll learn to use HTML entities.
FreeWritten by David Capka
Styling the HTML page head

Lesson 13 - Styling the HTML page head

In this lesson, we'll continue working on our website layout. We'll style a head with a logo, and a navigating menu using CSS 3.
FreeWritten by David Capka
Exercises for HTML and CSS lessons 12-13

Exercises for HTML and CSS lessons 12-13

Solved tasks in HTML & CSS on entities and styling lists. Tasks are ordered by difficulty. Solutions are available for download.
PremiumUnratedWritten by David Capka
Fixed navigation menu and positioning in CSS

Lesson 14 - Fixed navigation menu and positioning in CSS

In this lesson, we will finish our layout and learn the basics of positioning in CSS, and set our navigation menu to a fixed position to keep in on top.
FreeWritten by David Capka
Creating subpages and a contact form

Lesson 15 - Creating subpages and a contact form

In this lesson, we'll add subpages to our site according to our layout. You'll learn how to avoid frames and add a contact email form to the contact page.
FreeWritten by David Capka
Styling tables and photo gallery in HTML and CSS

Lesson 16 - Styling tables and photo gallery in HTML and CSS

In the lesson, we'll finish our website using HTML and CSS. We'll learn to style tables and create a photo gallery using JavaScript Lightbox.
FreeWritten by David Capka
Exercises for HTML and CSS lessons 14-16

Exercises for HTML and CSS lessons 14-16

Solved tasks in HTML & CSS on advanced positioning and styling. Tasks are ordered by difficulty. Solutions are available for download.
PremiumUnratedWritten by David Capka
Uploading the website to the Internet

Lesson 17 - Uploading the website to the Internet

In this final HTML and CSS lesson, we'll go over descriptions and keyword metadata, favicons, and upload the completed website to a web host.
FreeWritten by David Capka


 

Activities (11)