Complete HTML and CSS Course (Beginner to Advanced)

Name: Complete HTML and CSS Course (Beginner to Advanced)
Rating: 4.5 (54 reviews)

Start your Software Development Journey here. Build and deploy responsive websites using HTML and CSS.

Created byNseabasi Udondian

Last updated 4/2023

English

What you'll learn

Introduction to the Course
How the Web Work
Definition of Terms
Downloading and Installing Google Chrome
Downloading and Installing Visual Studio Code
Introduction to HTML
Anatomy of HTML
Tags
Attributes
Elements
Boilerplate
Heading Element, Paragraph Element, Break Element and List Element
Detail Element, Summary Element, Emphasis Element and HR Elements
Anchor Element, Article Element and Aside Element
Working With Media files
Blockquote Element, Button Element, Del Element and Ins Element
Iframe Element, Progress Element, Label Element, Small Element, Span Element, Sub and Sup Elements
Table Element, Div Element, Nav Element and Section Element
Form Element and Footer Element
Introduction to CSS, Adding CSS to HTML
Selector, Property, Value
Declaration, Declaration Block, CSS Rule
Selectors (Element, Class, and ID selectors)
Specificity
Pseudo-selectors
Advanced Selectors
Colors
Opacity and Gradient
Background Properties
Units in CSS
Fonts
Google Fonts
CSS Box Model
Shadow
Display Property
Project (Building a Landing Page)
CSS Flexbox
Working with Flex Items
CSS Grid
Transition Property
Transform Property
Animation
Media Query
Project (Building a form)
Project (Building a form, collecting and accessing data from the form)
Project (Building a dashboard)
Project (Building a Modern website, Uploading and using images from cloudinary)
Project (Making the website responsive)
Deployment (Git and Netlify)
Conclusion

Course content

7 sections • 50 lectures • 12h 43m total length

Welcome to the Course1:21
How the Web Works2:50
This video explains how the web works in very simple steps. At the end of this video, you will understand clearly, how the web works.
Definition of Terms5:12
Summary of the Course Contents1:56
This lesson shows the summary of all the topics in this course.
Setup of Local Development Environment: Lesson One1:18
This lesson shows the steps involved in setting up a local development environment. You'll hear me say 'hit enter', by this, I mean you should hit the enter key of your keyboard.
Setup of Local Development Environment: Lesson Two6:41
This lesson shows the steps involved in setting up a local development environment. At the end of this lesson, you will be able to download and install Google chrome browser and Visual Studio Code (VScode) on your computer.

Introduction to HTML: Lesson One3:35
This lesson is introducing HTML. At the end of this lesson, you will know what HTML is about and how it is written.
Introduction to HTML: Lesson Two4:28
This lesson is introducing HTML. At the end of this lesson, you will know what HTML is about and how it is written.
HTML Boilerplate : Lesson Two13:50
This is introducing HTML. At the end of this lesson, you will know what HTML is about and how it is written.
HTML Boilerplate : Lesson One0:51
This lesson talks about the HTML Boilerplate. At the end of this lesson, you will be able to generate the HTML Boilerplate
Heading Element, Paragraph Element, Break Element and List Element22:45
This lesson shows how to write Heading Element, Paragraph Element, Break Element and List Element. At the end of this lesson, you will be able to work with all these elements.
Details Element, Summary Element, Emphasis Element and Horizontal Rule element8:49
This lesson shows how to write Details Element, Summary Element, Emphasis Element and Horizontal Rule element. At the end of this lesson, you will be able to work with all these elements.
Anchor Element, Article Element, and Aside Element13:19
This lesson shows how to write Anchor Element, Article Element, and Aside Element. At the end of this lesson, you will be able to work with all these elements.
Working With Media Files13:25
This lesson shows how to add media files to an HTML document. At the end of this lesson, you will be able to add media files to your HTML document.
Blockquote Element, Button Element, Del Element, Ins element and kbd Element12:10
This lesson shows how to write Blockquote Element, Button Element, Del Element, Ins element and kbd Element. At the end of this lesson, you will be able to work with all these elements.
Iframe Element, Progress Element, Label Element...13:40
This lesson shows how to write the Iframe Element, Progress Element, Label Element... At the end of this lesson, you will be able to work with all these elements.
Table Element, Div Element, Nav Element and Section Element24:30
This lesson shows how to write the Table Element, Div Element, Nav Element and Section Element. At the end of this lesson, you will be able to work with all these elements.
Form Element and Footer Element25:17
This lesson shows how to work with Form Element and Footer Element. At the end of this lesson, you will be able to make use of the form and the footer elements smoothly.
HTML Coding Exercise5:32

Adding CSS to HTML12:05
Selector, Property, and Value18:07
This lesson concentrates on the CSS RULE. At the end of this lesson, you will understand what selector, property, and value mean. You will also be able to combine name to apply styles to elements.
Selectors15:58
This lesson is on Selectors; various ways you can tell CSS the HTML element you want to apply styles to. At the end of this lesson, you will have a clear understanding of the various ways you can make CSS know the element to apply styles to.
Specificity11:17
Pseudo-selectors12:08
At the end of this lesson, you will be able to use pseudo-selectors to further apply styles to elements.
Advanced Selectors13:32
Colors22:13
This lesson shows how to apply color to texts and other elements. At the end of this lesson, you will know how to color texts and other elements.
Opacity and Gradients18:01
This lesson shows how to make an element transparent or opaque. It also shows how to work with gradients, as well as some gradient resources.
Other Background Properties5:33
This lesson shows the various ways you can style a background. At the end of this lesson, you will be able to style the background of your website using the various background properties.
Units in CSS19:11
Fonts8:09
This lesson shows how to work with fonts/texts. At the end of this lesson, you will be able to choose font-family, color your texts, italicize your text, as well as manipulate your texts just the way you would like.
Google Fonts7:53
This lesson shows how to use fonts from the google fonts API to build your website. At the end of this lesson, you will be able to work with fonts from google fonts.
CSS Box Model36:36
This lesson explains the CSS Box Model. At the end of this lesson, you will be able to set padding, margin, and border.
Shadow2:27
This lesson shows how to add shadow to texts and boxes. At the end of this lesson, you will be able to add shadow to texts and boxes.
Display Property6:25
This lesson shows how to use the display property to place items on a webpage. At the end of this lesson, you will be able to place items on your webpage using the display property.
A Project on Building a Landing Page26:40
This lesson is a project on how to build a homepage that has a logo, a navbar, etc. At the end of this lesson, you will be able to build a homepage with a navbar, a logo, etc.

Flexbox16:32
This lesson teaches about CSS Flexbox. At the end of this lesson, you will be able to use CSS Flexbox to define the layout of your website.
Working with Flex Items10:51
This lesson shows how to manipulate flex items. At the end of this lesson, you will be to move flex items on the screen the way you would like.
CSS Grid13:18
This lesson teaches about CSS Grid. At the end of this lesson, you will be able to use CSS Grid to define the layout of your website.
Transition in CSS8:05
This lesson shows how to work with Transition in CSS. At the end of this lesson, you will be able to apply Transition to your HTML elements.
Transform Property7:04
This lesson shows how to work with the Transform property in CSS. At the end of this lesson, you will be able to work with the Transform Property in CSS.
Animation in CSS8:07
This lesson shows how to work with animation in CSS. At the end of this lesson, you will be able to apply animation using CSS.
Media Query4:26

Building a Form33:45
This lesson is a project on how to build a form. At the end of this lesson, you will be able to build a form using the various input types like radio, checkbox, number, etc.
Building a form, collecting and accessing data from the form26:11
This lesson shows how to build a form, how to collect data using the form, and how to access the collected data. At the end of this lesson, you will be able to build a form, collect data using the form, and access the collected data .
A Project on Building a Dashboard using Flexbox, RGBA, Progress element, etc44:35
Building a Website Lesson 1 (Uploading / using images from Cloudinary)1:23:19
This lesson is a project that builds a website. At the end of this lesson, you will be able to build a website, you will also be able to upload images to cloudinary and use them in your website.
Building a Website Lesson 2 (Continued from lecture 43)41:45
Making the Website responsive21:54
This lesson has a project that shows how to make a website responsive. At the end of this lesson, you will be able to make a website responsive.

Requirements

This course is for both beginners and advanced developers.

Description

This course covers the interests of both beginners and advanced developers. You will learn how to build websites and make them responsive using HTML5 and CSS3. It covers over 50 HTML elements.

It also teaches CSS from basics up to CSS Grid, Flexbox, Transition, Animation. This course backs every explanation with coding example(s). Finally, it has projects built right in your face which you can follow along and have projects built at the end of the course.

So this is the place to start your coding journey, you will have such a smooth sail with our ever-ready guidance. The beginning lessons are made for beginners so if you are completely new to this, you will learn all that you need to forge ahead.

For those who are already familiar with the basics, you may want to skip to your section(s) of interest.

At the end of this course, you will be able to build cool modern websites, make them responsive, and deploy them on the World Wide Web. You will also be ready to take on CSS frameworks like Bootstrap, Tailwind, etc.

And if you decide to take on other frontend technologies like JavaScript, it will be a smooth sail. This course is the foundation you need. Here is what you will learn:

How the Web Works
Definition of Terms
Downloading and Installing Google Chrome
Downloading and Installing Visual Studio Code
Introduction to HTML
Anatomy of HTML
Tags
Attributes
Elements
Boilerplate
Heading Element, Paragraph Element, Break Element and List Element
Detail Element, Summary Element, Emphasis Element and HR Elements
Anchor Element, Article Element and Aside Element
Working With Media files
15. Blockquote Element, Button Element, Del Element and Ins Element
Iframe Element, Progress Element, Label Element, Small Element, Span Element, Sub and Sup Elements
Table Element, Div Element, Nav Element and Section Element
Form Element and Footer Element
Introduction to CSS, Adding CSS to HTML
Selector, Property, Value
Declaration, Declaration Block, CSS Rule
Selectors (Element, Class, and ID selectors)
Specificity
Pseudo-selectors
Advanced Selectors
Colors
Opacity and Gradient
Background Properties
Units in CSS
Fonts
Google Fonts
CSS Box Model
Shadow
Display Property
Project (Building a Landing Page)
CSS Flexbox
Working with Flex Items
CSS Grid
Transition Property
Transform Property
Animation
Media Query
Project (Building a form)
Project (Building a form, collecting and accessing data from the form)
Project (Building a dashboard)
Project (Building a Modern website, Uploading and using images from cloudinary)
Project (Making the website responsive)
Deployment (Git and Netlify)

Who this course is for:

Both Beginners and Advanced Developers.

Complete HTML and CSS Course (Beginner to Advanced)

What you'll learn

Explore related topics

Course content

Introduction to the Course6 lectures • 19min

HTML13 lectures • 2hr 42min

CSS Basics16 lectures • 3hr 56min

Advanced CSS7 lectures • 1hr 8min

Projects6 lectures • 4hr 11min

Deployment (Git and Netlify)1 lecture • 19min

Goodluck and Goodbye1 lecture • 7min

Requirements

Description

Who this course is for: