30 Days to Learn HTML & CSS

Video Lectures

Displaying all 32 video lectures.
Lecture 1
Course Introduction
Play Video
Course Introduction
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!
Lecture 2
Day 1: Your First Webpag
Play Video
Day 1: Your First Webpag
In this lesson, you'll learn how to make a working web page that displays the words, "Hello world."
Lecture 3
Day 2: Finding a Proper Code Edito
Play Video
Day 2: Finding a Proper Code Edito
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.
Lecture 4
Day 3: List
Play Video
Day 3: List
Welcome to Day 3. Today we're going to cover how to create a list of items using HTML.
Lecture 5
Day 4: Parent-Child Relationship
Play Video
Day 4: Parent-Child Relationship
While we touched on parent-child relationships in the previous episode, we need to focus on it a little more specifically today.
Lecture 6
Day 5: Heading Tag
Play Video
Day 5: Heading Tag
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.
Lecture 7
Day 6: Blockquote
Play Video
Day 6: Blockquote
Sometimes we need to quote somebody, and we can do that within HTML by using what's known as the blockquote element.
Lecture 8
Day 7: Anchor
Play Video
Day 7: Anchor
Today we're going to learn about anchor tags. They allow us to connect one page to another.
Lecture 9
Day 8: Your First Styleshee
Play Video
Day 8: Your First Styleshee
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.
Lecture 10
Day 9: Clean Project Structure
Play Video
Day 9: Clean Project Structure
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.
Lecture 11
Day 10: Image
Play Video
Day 10: Image
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.
Lecture 12
Day 11: The Necessity of Div
Play Video
Day 11: The Necessity of Div
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.
Lecture 13
Day 12: IDs and Classe
Play Video
Day 12: IDs and Classe
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.
Lecture 14
Day 13: An Assignmen
Play Video
Day 13: An Assignmen
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!
Lecture 15
Day 14: Assignment Solution
Play Video
Day 14: Assignment Solution
Welcome back. Today we're going to work through the solutions to the assignment set yesterday.
Lecture 16
Day 15: Floats, and a Simple Layou
Play Video
Day 15: Floats, and a Simple Layou
Today I'm going to teach you about CSS floats. We can use floats to create the effect of columns.
Lecture 17
Day 16: Navigation and List
Play Video
Day 16: Navigation and List
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.
Lecture 18
Day 17: Introduction to Form
Play Video
Day 17: Introduction to Form
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?
Lecture 19
Day 18: Image Replacemen
Play Video
Day 18: Image Replacemen
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?
Lecture 20
Day 19: The Basics of Typograph
Play Video
Day 19: The Basics of Typograph
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.
Lecture 21
Day 20: Relative and Absolute Positionin
Play Video
Day 20: Relative and Absolute Positionin
Today we're going to take a look at something that confuses a lot of beginning HTML and CSS designers, and it's called positioning. More specifically, the difference between what we call absolute positioning and relative positioning.
Lecture 22
Day 21: Creating a Website Fragmen
Play Video
Day 21: Creating a Website Fragmen
Today we're going to take a look at fragments. This will teach you the beginning process of converting designs to HTML and CSS.
Lecture 23
Day 22: The Importance of Validatio
Play Video
Day 22: The Importance of Validatio
Let's refer back to the markup we created in the previous lesson. Wouldn't it be helpful to be notified when we make errors in creating our markup?
Lecture 24
Day 23: Zen Codin
Play Video
Day 23: Zen Codin
Zen coding is a popular way to rapidly create markup. You can grab it here.
Update -- It seems that the Zen Coding installation process for Sublime Text 2 has changed a bit in recent months. Refer here for instructions: http://jdfwarrior.tumblr.com/post/13204904090
Lecture 25
Day 24: Resets and Normalizin
Play Video
Day 24: Resets and Normalizin
In the next two lessons I'm going to teach you about using reset stylesheets and grids.
Lecture 26
Day 25: CSS Framework
Play Video
Day 25: CSS Framework
It's fairly common for designers to use CSS frameworks. They're a collection of styles that make it easier to build our designs. One of the most popular is called the 960 Grid System, and this is the framework that we'll explore today.
Lecture 27
Day 26: Final Project Marku
Play Video
Day 26: Final Project Marku
Now that you've learned the basics of HTML and CSS, it's time to start doing what you really want to be doing: building websites! We're going to get started converting a Photoshop design into a real website.
Lecture 28
Day 27: Slicing a PS
Play Video
Day 27: Slicing a PS
When we last left off we'd finished our markup, so let's return to Photoshop and begin slicing out any necessary assets for our design.
Lecture 29
Day 28: How to Create Snippet
Play Video
Day 28: How to Create Snippet
In programs like TextMate and Sublime (or whatever program you're using), they generally have some snippets built in. But often, it's best to create your own customized snippets to help you code more efficiently.
Lecture 30
Day 29: The CSS for Our Websit
Play Video
Day 29: The CSS for Our Websit
In this lesson we'll begin styling the markup for our website.
Lecture 31
Day 30: Completing the Websit
Play Video
Day 30: Completing the Websit
In the previous lesson we built the layout for our website. We need to finish up by tweaking our layout until it's complete.
Lecture 32
Course Exi
Play Video
Course Exi
We hope you've enjoyed learning HTML and CSS with the new Tuts+ Premium. If you'd like to progress to more advanced material, including CSS3, join the mailing list below. We'll let you know when more web development and design courses are available.

If you know anyone who'd like to learn HTML and CSS, we hope you'll consider sharing this course with them.

Happy coding!u 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!