codedamn logocodedamn
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
1101 ratings
7385 students enrolled
Course Creator: Team codedamn

Hang on...

Heads up!

This is an official course from Full Stack Web Developer Learning Path 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:14:40 total duration

HTML Basics

(24 lectures • 01 hours and 57 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
  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
  Next steps (Read article)
00:27

Student feedback

4.7
Course Rating

82%

14%

2%

1%

1%

Reviews

profile pic for Navez
Jan 27, 2022
i loving it
profile pic for Shubham Yadav
Jan 27, 2022
Beginner Friendly
profile pic for Shaket Shubham
Jan 26, 2022
This course is awesome for Html and Css. If you will hear line by line then you will get all the complex topics like flex and position.
profile pic for sai bapi raju
Jan 26, 2022
Very nice
profile pic for Saim Arshad
Jan 26, 2022
three words... "excellent", "excellent" and "excellent"!

Your Course Instructor

Course Instructor Image

Team codedamn

Official courses from codedamn team

Hi! We're team codedamn - and we are developers, creators, designers building the best interactive programming courses on the planet. Sign up for a free account on codedamn to stay in touch.

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)