Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: HTML & CSS for Beginners: First Step to Your Coding Career
Rating: 4.5 (14 reviews)

Learn how to use HTML & CSS using EMMET and Visual Studio Code from SCRATCH.

Created byArkadiusz Włodarczyk

Last updated 6/2026

English

What you'll learn

How to use HTML tags and CSS selectors
Installing and setting VSC code
Learning super efficient shortcuts including EMMET
What are attributes
How to add image on your website
What are meta tags and what they are used for
How to list elements
How to create internal/external links?
How to format your text professionally using text formatting tags?
How to create user forms with inputs?
How to create tables?
Difference between display block/inline/inlineblock
CSS rules for selecting tags
How to format text/add borders using CSS?
How box-model works
How floating/positioning elements work?

Course content

17 sections • 101 lectures • 12h 10m total length

Introduction0:27
Intro to HTML & CSS course :-)

What is HTML? What is tag?7:22
What is HTML?
What is tag?
Basic HTML document8:39
Learn basic HTML document structure. How to create a title? What distinguishes the body from the title tag?
Nested tags and FAST wrapping existing text with tags using EMMET10:24
New tag 'i'
Nested tags
Wrapping existing tags with EMMET
Creating paragraphs | What are white spaces?3:58
What are paragraphs?

What are they used for?

What are white characters?
Void tag and breaking the line 3:36
What is void (empty/unclosed) tag?
Why is it used?
What does the tag br do?
What is the difference between vs ?
What are attributes? [title] and [lang]8:58
What is an attribute?
Where do the attributes come from?
How to create a tooltip?
How to use EMMET shortcut to create tags with attributes?
Neutral tag 1:59
What is tag ? Where do we use tag ? Why do we use it?
EXERCISE: Create HTML 5 website template and save to it...0:51
Reinforce your knowledge by practising the creation of an HTML 5 website template with some basic tags inside body.
Installing extensions in VSC: AutoRenameTag2:33
How to install extensions in VSC?
Attribute 'style' - How to change background colour? - IMPORTANT LECTURE8:17
1) what is RGB?

2) what does deprecated (non conforming) mean?

3) how to use the 'style' attribute?

4) how to change the background color?
Awesome color selection tools for your website!5:37
There are tools that help you generate colors for your site. Here are some that I found useful
Adding image to your site <img>10:15
1) what is RGB?

2) what does deprecated (non conforming) mean?

3) how to use the 'style' attribute?

4) how to change the background color?
BONUS: Where to get FREE pictures on your site?2:15
Where can you download FREE pictures on your site?
Getting img size using VSC shortcut2:06
How to get width and height of image fast and easy?
How to link to DIFFERENT folders? Creating PATH theory4:15
What is PATH?
How to link to image that is in another folder?

Viewing the source code of ANY site. What are comments?5:19
What are comments? When to use comments? How to view the source code of any page?
Meta tags7:08
What are meta tags? How to use them? When to use them?
Charset - proper encoding on your site6:35
- how to set the correct encoding of your page so every character is always properly interpreted?
HTML doctype3:16
Although many versions have been released over the years to be honest the basics remain the same. So don't worry; when you understand HTML you understand any other version.
Why do we define a doctype?
1) that our website complies with the standard
2) so that the browser knows, not guess what version of HTML we are writing.
New browsers are good at this, but old browsers may display our page content incorrectly.
3) to inform the browser or other program analyzing our website in advance, so that it does not have to guess how to interpret something
Live Server & Auto saving code feature5:55
How to automatically save your file and see the result of the changes you make in your file instantly in web browser?
Entities & HTML validation & Emoji on your site9:41
What is entity? When should you use entities? How to validate your page?
How to properly name your files? Why main page is called index.html?5:23
How to properly name your files? Why main page is always called index.html?
EXTENSION: Sweet icons in your VSC2:11
How to change your icons to make them look better?

<ol> vs <ul>6:56
What is list?
When to use list?
How to use list?
<ol> vs <ul> differences
Useful shortcut ALT + ARROW, SHIFT + TAB
Fast tricks with Emmet to use with lists11:09
'>' in EMMET
SHIFT + ALT + arrow - copy a given line up / down
ALT + mouse (multiple cursors)
[] vs {}
$
CTRL K + S - VSC shortcuts
<dl> - definition list6:09
<dl> - definition list
<dt> - definition term
<dd> - definition data/description
EMMET: creating siblings and treating two elements as one3:32
How to create siblings and group and treat a few elements as one using EMMET?

Creating internal links9:46
What is link?
How to create a link using text?
How to create a link using image?
How to create "BACK" link?
External links | _blank9:32
How to create a link to external site?
What is _blank?
How to use it?
Should we use it?
#labels10:22
What are labels?
How to use them?
Difference between <a name="label"> and
How to create a link to email?4:49
Why should you create a link to email?
How to add default subject to email?
Telephone link3:43
How to create a link that will execute app to call a person?

headers - <h1> to <h6>14:41
What are headers?
Why do we use headers?
How do I use headers?
ALT - Z shortcut
<cite> vs <blockquote> vs <q> - how to cite others?5:44
How to correctly quote people? Differences between the cite, blockquote, and q tags.
<abbr> | <dfn>4:56
How to properly use abbr and dfn tag?
Semantic tags , and vs , , , <s>13:29
When to use and when to use 

When to use and when to use 

Is it worth using the and <s> tags?

What are the tags for: , , , <s>, , ,
vs 1:43
 vs - how to make text subscript / superscript?
Preformatted text, tags: <pre>, <code>, <var>6:30
How do I paste text without its original formatting disappearing? How can I get whitespaces to be interpreted in HTML?
Multicursor | Searching and replacing text in VSC4:48
Using the multi-cursor vs searching and replacing elements with the help of: CTRL + H

What is form and input? How to create a basic form with login and password?5:26
What is form and input? How to create a basic form with login and password?
How to properly submit form and name its inputs?7:22
What are the types of form submission actions?
What is the "name" attribute for?
What is the "action" attribute for?
How do I create a "send" button?
radio & form labels & legend7:49
When to use the radio box?

How to create a radio box?

What are labels? What is fieldset?
checkboxes5:42
How to use and when to use checkboxes?
Most frequently used form attributes13:27
checked/required/placeholder/size/maxlength/value/placeholder
EXERCISE: How to create a contact form on your site?10:11
How to create a contact form?
How input 'email' works?
How 'textarea' works?
Getting date and time from the user4:32
How to get a date and time from the user?

What is CSS?14:13
What is CSS? What is CSS used for? Why is CSS so cool? What is a tag selector? Where do we use CSS and why do we use it? What problem has CSS tackled?
Exercise: Creating and Linking a Basic CSS File0:36
Time to exercise! Create and link style.css and apply simple tag selector rule.
CSS placement & CSS priority (cascade)8:21
What does "C" mean in CSS?
What is cascade?
class vs id9:56
What's the difference between class and id? when should you use id? When should you use class?
class vs id0:50
Short text version of what is the difference between class and id in CSS.
Useful CSS extensions4:16
Useful CSS extensions:
CSS peak
HTML CSS SUPPORT
EXERCISE: Practise the Use of Class and ID Selectors1:30
Time to practise the use of selectors and id

Requirements

Everything is explained in the course. You don't need to have any knowledge, but good intentions are welcome :)

Description

Learn everything from scratch.

Debunk the myth that web development is hard!

Create your own sites using HTML & CSS.

After this course, you will know how to use Visual Studio Code efficiently to create websites using HTML & CSS.

You will also learn EMMET, which speeds up the process of creating websites.

You will learn about basic tags & selectors and how to use them efficiently. This course is an introduction to becoming a web-developer. After this course, you will finally understand the basics of creating websites.

Every lesson is a treasure trove of detail, designed to make web development techniques crystal clear to everyone.

Over 325,000 students have embarked on my courses, and they've come out smiling.

You're next in line for satisfaction.

And remember, if the course doesn't rock your world, you have 30 days to claim a full refund. Your satisfaction isn't just a promise; it's a guarantee.

The Support: Ask Away!

Got questions? Fire away! I'm here to clear the clouds of doubt and help you learn.

I'm always happy to help those who want to learn!

Please watch the free lessons before you buy the course! Don't buy a pig in a poke! Check the quality of the courses before buying!

Get ready for a fast, fun, and fuss-free journey into website development.

Today's the day you become a web developer!

Who this course is for:

This website development course is for everyone. You don't need to know anything about web development to get started.

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

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Installing tools2 lectures • 10min

HTML Basics15 lectures • 1hr 21min

HTML | improving document & workflow8 lectures • 45min

HTML | Listing things4 lectures • 28min

HTML | Links5 lectures • 38min

HTML | Text Formatting7 lectures • 52min

Forms | Basics7 lectures • 54min

Tables2 lectures • 15min

CSS | Basics7 lectures • 40min

Requirements

Description

Who this course is for: