Course Information

Home
Video Lectures
Official Website

Course

Subject:	Web Design
Topic:	HTML
Views:	30,470

Educator

Name:	Envato Tuts+ (Tuts+)
Type:	Website

Visit Official Website

30 Days to Learn HTML & CSS

Video Lectures

Displaying all 32 video lectures.

Lecture 1 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Play Video	Day 14: Assignment Solution Welcome back. Today we're going to work through the solutions to the assignment set yesterday.
Lecture 16 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Play Video	Day 29: The CSS for Our Websit In this lesson we'll begin styling the markup for our website.
Lecture 31 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 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!