HTML & CSS for Beginners: First Step to Your Coding Career

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Installing tools

Lecture 1: Download and Installing Visual Studio Code

Lecture 2: Setting your first project

Chapter 3: HTML Basics

Lecture 1: What is HTML? What is tag?

Lecture 2: Basic HTML document

Lecture 3: Nested tags and FAST wrapping existing text with tags using EMMET

Lecture 4: Creating paragraphs <p> | What are white spaces?

Lecture 5: Void tag and breaking the line <br>

Lecture 6: What are attributes? [title] and [lang]

Lecture 7: Neutral tag <span>

Lecture 8: EXERCISE: Create HTML 5 website template and save to it…

Lecture 9: Installing extensions in VSC: AutoRenameTag

Lecture 10: Attribute 'style' – How to change background colour? – IMPORTANT LECTURE

Lecture 11: Adding image to your site <img>

Lecture 12: BONUS: Where to get FREE pictures on your site?

Lecture 13: Getting img size using VSC shortcut

Lecture 14: How to link to DIFFERENT folders? Creating PATH theory

Chapter 4: HTML | improving document & workflow

Lecture 1: Viewing the source code of ANY site. What are comments?

Lecture 2: Meta tags

Lecture 3: Charset – proper encoding on your site

Lecture 4: HTML doctype

Lecture 5: Live Server & Auto saving code feature

Lecture 6: Entities & HTML validation & Emoji on your site

Lecture 7: How to properly name your files? Why main page is called index.html?

Lecture 8: EXTENSION: Sweet icons in your VSC

Chapter 5: HTML | Listing things

Lecture 1: <ol> vs <ul>

Lecture 2: Fast tricks with Emmet to use with lists

Lecture 3: <dl> – definition list

Lecture 4: EMMET: creating siblings and treating two elements as one

Chapter 6: HTML | Links

Lecture 1: Creating internal links

Lecture 2: External links | _blank

Lecture 3: #labels

Lecture 4: How to create a link to email?

Lecture 5: Telephone link

Chapter 7: HTML | Text Formatting

Lecture 1: headers – <h1> to <h6>

Lecture 2: <cite> vs <blockquote> vs <q> – how to cite others?

Lecture 3: <abbr> | <dfn>

Lecture 4: Semantic tags <strong>, <em> and <mark> vs <b>, <i>, <u>, <s>

Lecture 5: <sub> vs <sup>

Lecture 6: Preformatted text, tags: <pre>, <code>, <var>

Lecture 7: Multicursor | Searching and replacing text in VSC

Chapter 8: Forms | Basics

Lecture 1: What is form and input? How to create a basic form with login and password?

Lecture 2: How to properly submit form and name its inputs?

Lecture 3: radio & form labels & legend

Lecture 4: checkboxes

Lecture 5: Most frequently used form attributes

Lecture 6: EXERCISE: How to create a contact form on your site?

Lecture 7: Getting date and time from the user

Chapter 9: Tables

Lecture 1: Basics of creating tables

Lecture 2: How to stretch cells using rowspan and colspan?

Chapter 10: CSS | Basics

Lecture 1: What is CSS?

Lecture 2: Exercise: Creating and Linking a Basic CSS File

Lecture 3: CSS placement & CSS priority (cascade)

Lecture 4: class vs id

Lecture 5: class vs id

Lecture 6: Useful CSS extensions

Lecture 7: EXERCISE: Practise the Use of Class and ID Selectors

Chapter 11: CSS | Formatting

Lecture 1: div vs span – grouping more elements

Lecture 2: display: block/inline/inlineblock

Lecture 3: display: block/inline/inlineblock table

Lecture 4: EMMET | TRICKS creating tags with id and class

Lecture 5: selector REHEARSAL

Lecture 6: RULES of selecting tags – IMPORTANT LECTURE to AVOID problems in CSS

Lecture 7: border

Lecture 8: Rounded corners – border-radius

Lecture 9: tables & padding

Lecture 10: How to create horizontal menu? States of links: link, visited, hover, active

Lecture 11: Changing default list icons | :: before selector

Lecture 12: How to make element transparent? opacity vs rgba

Lecture 13: Changing cursor | creating hint box

Lecture 14: attribute selector | custom named attributes in HTML

Chapter 12: CSS | Text

Lecture 1: Text formatting and decoration

Lecture 2: Paragraph indentation and ::first-letter selector

Lecture 3: CSS units: em vs px vs %

Lecture 4: line-height | letter-spacing | word-spacing

Lecture 5: playing with fonts

Lecture 6: Custom fonts from web – Google Fonts

Chapter 13: CSS background

Lecture 1: Changing background of your website: set it to image or pattern

Chapter 14: CSS element placement

Lecture 1: Box MODEL – margin, padding, border, content differences, centering elements

Lecture 2: Fitting elements inside a container – properly counting width

Lecture 3: calc() – automate the calculations on your site

Lecture 4: Custom properties (variables)

Lecture 5: box-sizing – a solution for counting width faster

Lecture 6: positioning of elements – static vs relative vs absolute vs fixed

Lecture 7: relative and absolute on practical example

Lecture 8: Container inside another container – let's make a template for website