Course

30 Days to Learn HTML and CSS by Envato TutsPlus

4.67

(137)

4h52m

Teacher

Envato TutsPlus

Build an app, create a website, or learn design with our free how-to tutorials and video courses. Learn how to use tools such as Adobe Photoshop, PowerPoint, Adobe XD, Illustrator, and Sketch. Learn how to use WordPress in our WordPress tutorials and create your first website. Master the fundamentals of web design and UX, or learn what you need to become a graphic designer. Part of the Envato family.

Ver sobre

Sign in or Register to access the course.

Do not worry, it is free!

Share

Evaluate course

Go to certificates

Report a problem

Course content

  • Course Introduction (30 Days to Learn HTML and CSS)

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

    Even if your goal is not to become a web designer, learning HTML and CSS can be an amazing tool to have in your skill-set -- both in the workplace, and at home. If this has been on your to-do list for some time, why don't you take thirty days and join me? Give me around ten minutes every day, and I'll teach you the essentials of HTML and CSS.

    And don't worry... we start at the beginning!

  • Day 1: Your First Webpage (30 Days to Learn HTML & CSS)

    In this lesson, you'll learn how to make a working web page that displays the words, "Hello world."

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 2: Finding a Proper Code Editor (30 Days to Learn HTML & CSS)

    Before we continue on with formatting our text, I don't want you to be using NotePad or Text Edit. Instead, we should be using a code editor that was specifically created for the purposes of writing code.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 3: Lists (30 Days to Learn HTML & CSS)

    Welcome to Day 3. Today we're going to cover how to create a list of items using HTML.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 4: Parent-Child Relationships (30 Days to Learn HTML & CSS)

    While we touched on parent-child relationships in the previous episode, we need to focus on it a little more specifically today.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 5: Heading Tags (30 Days to Learn HTML & CSS)

    Up until now we've only briefly touched on the idea of headings. Let's dig a bit deeper and learn about all of the headings that are available to us.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 6: Blockquotes (30 Days to Learn HTML & CSS)

    Sometimes we need to quote somebody, and we can do that within HTML by using what's known as the blockquote element.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 7: Anchors (30 Days to Learn HTML & CSS)

    Today we're going to learn about anchor tags. They allow us to connect one page to another.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 8: Your First Stylesheet (30 Days to Learn HTML & CSS)

    In the previous episode we noted how, by default, the browser will make anchor tags blue if you've never visited the link before. In this lesson, we'll learn how to customize this by using an attribute called 'style'. Then, we'll explore how to achieve the same thing by using a CSS stylesheet.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 9: Clean Project Structures (30 Days to Learn HTML & CSS)

    It's considered a best practice to always divide your images, CSS files and JavaScript files into their own folders. In this lesson you'll learn about making sure all of your HTML & CSS projects are well organized and clean.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 10: Images (30 Days to Learn HTML & CSS)

    We want to be able to display an image on our HTML page. In this lesson, we'll learn the various ways to achieve this.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 11: The Necessity of Divs (30 Days to Learn HTML & CSS)

    Divs are a way to position your content, and allow you to style a variety of elements at once. You'll use them often as you code in HTML and CSS.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 12: IDs and Classes (30 Days to Learn HTML & CSS)

    In today's lesson we're going to be taking a look at IDs and classes. We can use these to assign labels to specific elements so that we can then target them within our stylesheets.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 13: An Assignment (30 Days to Learn HTML & CSS)

    For today, you're not going to be learning from me specifically -- you're going to put some of what you've learned to the test in your first assignment!

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 14: Assignment Solutions (30 Days to Learn HTML & CSS)

    Welcome back. Today we're going to work through the solutions to the assignment set yesterday.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 15: Floats, and a Simple Layout (30 Days to Learn HTML & CSS)

    Today I'm going to teach you about CSS floats. We can use floats to create the effect of columns.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 16: Navigation and Lists (30 Days to Learn HTML & CSS)

    Today we're going to be focusing on navigation. How would you create a navigation list for your website? This is something that every web site has in common, so it's really important you learn how to do this.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 17: Introduction to Forms (30 Days to Learn HTML & CSS)

    Today we're going to focus on forms. Contact forms, registration forms... what are the necessary HTML elements we should use to display form fields?

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 18: Image Replacement (30 Days to Learn HTML & CSS)

    Often you don't want to use text for your logo. Even though it makes sense to add the name of your business within an H1 tag, you might prefer to add an image in place of your logo. How would you do that?

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

  • Day 19: The Basics of Typography (30 Days to Learn HTML & CSS)

    Today we're going to take a look at some of the various ways we can style our text. We'll look at using fonts, color, letter spacing, and size.

    This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

    For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

Course content

0h00m

Course Introduction (30 Days to Learn HTML and CSS)

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

Even if your goal is not to become a web designer, learning HTML and CSS can be an amazing tool to have in your skill-set -- both in the workplace, and at home. If this has been on your to-do list for some time, why don't you take thirty days and join me? Give me around ten minutes every day, and I'll teach you the essentials of HTML and CSS.

And don't worry... we start at the beginning!

0h09m

Day 1: Your First Webpage (30 Days to Learn HTML & CSS)

In this lesson, you'll learn how to make a working web page that displays the words, "Hello world."

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h07m

Day 2: Finding a Proper Code Editor (30 Days to Learn HTML & CSS)

Before we continue on with formatting our text, I don't want you to be using NotePad or Text Edit. Instead, we should be using a code editor that was specifically created for the purposes of writing code.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h12m

Day 3: Lists (30 Days to Learn HTML & CSS)

Welcome to Day 3. Today we're going to cover how to create a list of items using HTML.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h05m

Day 4: Parent-Child Relationships (30 Days to Learn HTML & CSS)

While we touched on parent-child relationships in the previous episode, we need to focus on it a little more specifically today.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h03m

Day 5: Heading Tags (30 Days to Learn HTML & CSS)

Up until now we've only briefly touched on the idea of headings. Let's dig a bit deeper and learn about all of the headings that are available to us.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h02m

Day 6: Blockquotes (30 Days to Learn HTML & CSS)

Sometimes we need to quote somebody, and we can do that within HTML by using what's known as the blockquote element.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h08m

Day 7: Anchors (30 Days to Learn HTML & CSS)

Today we're going to learn about anchor tags. They allow us to connect one page to another.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h09m

Day 8: Your First Stylesheet (30 Days to Learn HTML & CSS)

In the previous episode we noted how, by default, the browser will make anchor tags blue if you've never visited the link before. In this lesson, we'll learn how to customize this by using an attribute called 'style'. Then, we'll explore how to achieve the same thing by using a CSS stylesheet.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h01m

Day 9: Clean Project Structures (30 Days to Learn HTML & CSS)

It's considered a best practice to always divide your images, CSS files and JavaScript files into their own folders. In this lesson you'll learn about making sure all of your HTML & CSS projects are well organized and clean.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h04m

Day 10: Images (30 Days to Learn HTML & CSS)

We want to be able to display an image on our HTML page. In this lesson, we'll learn the various ways to achieve this.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h07m

Day 11: The Necessity of Divs (30 Days to Learn HTML & CSS)

Divs are a way to position your content, and allow you to style a variety of elements at once. You'll use them often as you code in HTML and CSS.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h08m

Day 12: IDs and Classes (30 Days to Learn HTML & CSS)

In today's lesson we're going to be taking a look at IDs and classes. We can use these to assign labels to specific elements so that we can then target them within our stylesheets.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h01m

Day 13: An Assignment (30 Days to Learn HTML & CSS)

For today, you're not going to be learning from me specifically -- you're going to put some of what you've learned to the test in your first assignment!

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h08m

Day 14: Assignment Solutions (30 Days to Learn HTML & CSS)

Welcome back. Today we're going to work through the solutions to the assignment set yesterday.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h13m

Day 15: Floats, and a Simple Layout (30 Days to Learn HTML & CSS)

Today I'm going to teach you about CSS floats. We can use floats to create the effect of columns.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h06m

Day 16: Navigation and Lists (30 Days to Learn HTML & CSS)

Today we're going to be focusing on navigation. How would you create a navigation list for your website? This is something that every web site has in common, so it's really important you learn how to do this.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h15m

Day 17: Introduction to Forms (30 Days to Learn HTML & CSS)

Today we're going to focus on forms. Contact forms, registration forms... what are the necessary HTML elements we should use to display form fields?

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h06m

Day 18: Image Replacement (30 Days to Learn HTML & CSS)

Often you don't want to use text for your logo. Even though it makes sense to add the name of your business within an H1 tag, you might prefer to add an image in place of your logo. How would you do that?

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign

0h10m

Day 19: The Basics of Typography (30 Days to Learn HTML & CSS)

Today we're going to take a look at some of the various ways we can style our text. We'll look at using fonts, color, letter spacing, and size.

This is part of the free Envato Tuts+ course 30 Days to Learn HTML & CSS: https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

For more great web design courses and tutorials go to: https://webdesign.tutsplus.com?ec_promo=tuts_youtube&ec_unit=description&ec_topic=webdesign