HTML & CSS Guide - Create your First Website in 2026

I suggest using the software brackets to write your own code

Learn the main structure of an HTML Document

Understand what are elements in an Html document

Learn what are attributes and their importance

Learn how to create headings in your webpage

Insert paragraphs in an HTML document to write text

Text formatting using some HTML from version 5

Create ordered and unordered lists

Use img tag to insert images in your webpage

Create a table with HTML

Create hyperlinks between different pages (connect the pages)

Organize your code using comments

Add styles to elements of the page

Create HTML forms (text fields and submit buttons) 

Create radio and reset buttons

Add multimedia content with video tag

Learn how to insert audio in a webpage

Learn to add youtube videos in your page

Insert youtube playlists in a webpage

Understand the importance and advantages of use Cascading Style Sheets in a HTML document

Learn the css main syntax that uses properties and correspondent values

Learn how to create Classes and Id's selectors and the difference between them

Use 3 different methods to add your CSS code and understand advantages of each one

Understand the importance of Box Model used in CSS and how to use  Margin, Padding And Border properties

Learn the  main font properties used in CSS:

• font-family
• font-style
• font-size
• font-weight 

Learn the  main text properties used in CSS:

• text-align
• color
• letter-spacing
• line-height

Learn Block and Inline elements concept and differences between them

Change position elements using position property that can assume 5 different values:

• static (default value)

• relative

• absolute

• fixed

• sticky

In this lecture you will learn properties that define width and height of an element:

• width (define a fixed width for an element)
• height (define a fixed height for an element)
• min-width (define a minimum width for an element)
• max-width  (define a maximum width for an element)
• min-height  (define a minimum height for an element)
• max-height  (define a maximum height for an element)

Learn in this chapter the list af all flexbox properties

Learn the main concepts of flexbox layout model, and how it works

The display property specifies the display behavior (the type of rendering box) of an element. 

The flex-direction property specifies the direction of the flexible itemsa and the flex-wrap property specifies whether the flexible items should wrap or not. 

The flex-flow property is a shorthand property for:

• flex-direction

• flex-wrap

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). 

The align-items property specifies the default alignment for items inside the flexible container. 

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. 

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. 

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. 

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. 

The flex-basis property specifies the initial length of a flexible item. 

The flex property is a shorthand property for:

• flex-grow

• flex-shrink

• flex-basis

The flex property sets the flexible length on flexible items.

The align-self property specifies the alignment for the selected item inside the flexible container.