Course image for Learn HTML and CSS

Learn HTML and CSS

HTML5 and CSS3 is the modern syntax used to build webpages. In this course we will learn how to use HTML and CSS from scratch and build awesome websites.

5 hours+ of total content
4.7
367 ratings
7210 students enrolled
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Full Stack Developer learning path.

Goals

  • HTML and CSS fundamentals - why they're needed and how to get started
  • Common tags and operations with HTML and CSS
  • Basic styling and layouts in CSS3
  • Projects, exercises, labs and common questions you'll face while learning other topics

Description

You'll learn the fundamentals of HTML and CSS, and then get a chance to build some pretty awesome webpages and projects.

You'll build webpages from scratch in our interactive playground exercises, and learn how to use CSS to style those pages so that they look even better. If you have a great idea for a webpage, but don't necessarily know how to build it, you'll learn from this course how to bring that idea to life.

This course is appropriate even if you've never designed anything in your life. We'll go over all the basics of how to design pages, but also make sure that you're comfortable with the more advanced CSS3 properties so that you can continue to build on top of what you've learned. And if you've built some awesome pages already, great! This course will ensure that you have all the fundamentals you'll need to keep building awesome stuff.

Contents and Overview

This course is divided into 3 major parts, as follows:

Part 1: Getting Started with HTML5 and CSS3

In this video, we'll go over what HTML and CSS are and how they fit into the web design process. You'll learn the basics of writing and styling webpages.

Part 2: Labs and exercises

All along the way, we will be solidifying whatever we're learning through tons of practice in our in-browser IDE and make our way from there.

Part 3: Simple projects

You will need to create simple projects based on user stories and pass the assignment checks. When you do, you can move on to the next item.

By the end of this course, you'll have the knowledge to be able to build your own fully functioning web pages using HTML5 and CSS3.

Course Structure

64 lectures 05:19:13 total duration

HTML Basics

(25 lectures • 02 hours and 02 minutes)
  Introduction (Watch video)
01:30
  How to use codedamn (Watch video)
02:07
  How to use VSCode (Watch video)
05:13
  First HTML Page (Watch video)
05:25
  Comments in HTML (Watch video)
03:00
  HTML Tags (Watch video)
04:10
  Heading Tags (Watch video)
04:41
  Say Hello to HTML Elements. (Practice concept)
05:00
  Headline with the h2 Element (Practice concept)
05:00
  Block and inline tags (Watch video)
07:31
  Inform with the Paragraph Element (Practice concept)
05:00
  Anchor (a) tag (Watch video)
03:57
  Link to External Pages with Anchor Elements (Practice concept)
05:00
  Why HTML tags exist? (Watch video)
03:29
  Image (img) tag (Watch video)
05:39
  Video (video) tag (Watch video)
05:49
  Forms in HTML (Watch video)
10:00
  Create a Text Field (Practice concept)
05:00
  Add Placeholder Text to a Text Field (Practice concept)
05:00
  Table (table) tag (Watch video)
04:46
  Creating a valid HTML document (Watch video)
05:24
  Declare the Doctype of an HTML Document (Practice concept)
05:00
  Define the Head and Body of an HTML Document (Practice concept)
05:00
  Tribute page project (Watch video)
07:34
  HTML basics done! (Watch video)
02:16
  CSS Introduction (Watch video)
02:48
  CSS Hello World (Watch video)
05:11
  CSS debugging (Watch video)
03:53
  CSS Tag Selector (Watch video)
03:10
  Use CSS Selectors to Style Elements (Practice concept)
05:00
  CSS Properties (Watch video)
04:09
  CSS Classes (Watch video)
04:26
  Use a CSS Class to Style an Element (Practice concept)
05:00
  Style Multiple Elements with a CSS Class (Practice concept)
05:00
  CSS IDs (Watch video)
03:30
  Set the id of an Element (Practice concept)
05:00
  Use an id Attribute to Style an Element (Practice concept)
05:00
  Inline vs block elements (Watch video)
04:06
  Introduction to flexbox layout (Watch video)
07:59
  flex-basis in CSS (Watch video)
03:49
  flex-shrink (Watch video)
03:29
  Use the flex-shrink Property to Shrink Items (Practice concept)
05:00
  Use the flex-grow Property to Expand Items (Practice concept)
05:00
  Add Flex Superpowers to the Tweet Embed (Practice concept)
05:00
  flex-wrap CSS property (Watch video)
02:43
  Apply the flex-direction Property to Create Rows in the Tweet Embed (Practice concept)
05:00
  Apply the flex-direction Property to Create a Column in the Tweet Embed (Practice concept)
05:00
  Center a DIV (Watch video)
10:59
  Align Elements Using the justify-content Property (Practice concept)
05:00
  Simple Google Homepage Project (Watch video)
14:11
  Google homepage layout practice (Practice concept)
05:00
  Absolute and relative CSS position (Watch video)
06:49
  fixed CSS position (Watch video)
02:33
  sticky CSS position (Watch video)
02:57
  Add Flex Superpowers to the Tweet Embed (Practice concept)
05:00
  Apply the flex-direction Property to Create Rows in the Tweet Embed (Practice concept)
05:00
  Apply the flex-direction Property to Create a Column in the Tweet Embed (Practice concept)
05:00
  Use the justify-content Property in the Tweet Embed (Practice concept)
05:00
  Use the align-items Property in the Tweet Embed (Practice concept)
05:00
  Use the flex-wrap Property to Wrap a Row or Column (Practice concept)
05:00
  Use the flex-basis Property to Set the Initial Size of an Item (Practice concept)
05:00
  Build a Tribute Page (Practice concept)
05:00
  Build a Product Landing Page (Practice concept)
05:00
  Build a Survey Form (Practice concept)
05:00

Student feedback

4.7
Course Rating

84%

13%

2%

0%

1%

Reviews

Sep 25, 2021
very good
Sep 25, 2021
awesome content i really love how mehul explaining each topic.
Sep 24, 2021
great
Sep 23, 2021
it was a really great experience learning with codedamn.com I really enjoyed it but little concepts are not that clearly mentioned as a beginner i quite difficult in understanding
Sep 23, 2021
very good course

Your Course Instructor

Course Instructor Image

Mehul Mohan

Full-stack developer and security researcher

I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)