Learn HTML

6. Learn More HTML and CSS | Party Tips

What's the difference between h1 vs. h2 tags? When do we use p tags? In this HTML basics tutorial, you'll learn some of the most important HTML elements that are used on every single webpage on the web.

7. How to add Images with HTML | Party Tips

In this lesson, we add images to the Party Tips website. You'll also learn best practices for adding images to your site that will help improve SEO (Search Engine Optimization), and make for a better UX (User Experience).

8. C is for Cookie Monster

Congrats! You’ve built your first web page. Now we’ll move onto your very first assignment: Imagine this: Cookie Monster is your client. He’s applying for a job. You have to launch a new website for him using only HTML & CSS. You’ve been given his headshot, bio at Sesame Street, and Cookie Monster’s Saturday Night Live Demo Reel. Go!

9. How to think like a web developer

Before writing code, I’ll explain the various pieces that go into coding a website from scratch. First we’ll want to gather the images, copy, and use a basic HTML template all before we start writing code.

10. How to add Links in HTML

In this lesson, you'll learn how to add links (aka. HTML hyperlinks) to a page. You’ll learn how to use the HTML attributes title, and alt attribute, and how to write links that open new pages in a new window when clicked using _target. We finish the lesson by leaving you a small challenge to tackle.

11. How to Add images with HTML

This lesson starts off with a solution to the last challenge then we move onto improving the look of our website by adding images to it. In this lesson, you will learn about relative paths and how to use them. This will be useful not just in adding images to a page, but also in linking to other file resources in your project. The lesson also shows you how to make your images into clickable links, and concludes with yet another challenge!

12. Write Better CSS with External Style Sheets

In the first website we built, we placed our CSS styles on the same page as the markup, i.e. we used internal styles. It’s important to know there are a few different ways to add CSS to a webpage: inline styles, internal styles and external styles. Using external stylesheets is recommended as it makes it easier to maintain and manage websites, especially as they get bigger. In this lesson, I’ll show you the difference between inline vs. internal vs. external CSS styles, which to use, and when to use them!

13. CSS Color Palettes: Hexadecimal vs. RGB

There are several ways you can represent color in HTML and CSS. You can, for instance, use color keywords/names to state the color you want (for example red, aqua, maroon, fuchsia, lime, green, etc.). These are straightforward to use, but they are very limiting in selection. In this lesson, I’ll show you how to represent color with both Hexadecimal colors (e.g. #0000FF) and RGB colors (e.g. rgb(255, 0, 0, 0.5) and HSL colors (e.g. hsl(90deg, 100%, 50%).

14. Finish the Cookie Monster Portfolio

In this lesson you will learn how to style links, add padding to a page, add a background image to the page with CSS, among other things. C is for Cookie that’s good enough for me. Get excited!

15. Your HTML challenge for this week!

Now it's your turn! Create a portfolio website of your own from scratch.

1. The Web Inspector Will Save Your Life

All popular browsers come with a set of developer tools that can help you out when you are working on a website. In this lesson, you’ll learn Google Chrome’s DevTools specifically. With the DevTools you can inspect all of the resources and activity on a webpage.

2. Web Inspector Scavenger Hunt

In this web inspector tutorial, you’ll be given some HTML & CSS challenges that require you to use the Web inspector to solve. Good luck!

3. Web Inspector Scavenger Hunt: Answers

Let’s walk through the solutions for the last lesson's challenges. We’ll go step-by-step together.

4. Learn to Code HTML Advanced Divs

In this lesson, we start a new project—we’re going to make a cat blog (meow). By working through the project, you will learn how to lay out a page's elements with HTML and CSS. Our website will have a common layout that you might have noticed on other websites. It will have a header, footer, main section divided into columns and a sidebar.

5. Page Layout: CSS Tricks to Style Your Divs

Let’s style the different sections of the blog webpage. In this lesson, I offer some tips on using HTML and CSS comments to keep your code organized and easily readable .

6. Float vs. Clear

In this lesson, you will learn about the CSS properties: float and clear. The CSS float property specifies how an element should float on a page while the CSS clear property specifies what elements can float beside the cleared element and on which side. A good rule of thumb you should use is: if you float your DIVS, always clear.

7. How to Float CSS?

We use the float property on our image so that the text wraps around it.

8. IDs vs. Classes

In CSS, we use selectors to target the HTML elements on a webpage that we want to style. So far we've been using element selectors (h1, p, div) to target various elements on our page. But when you want more precision you'll need to know the difference between CSS IDs and classes.

9. Inline vs. Block

What’s the difference between inline and block elements in HTML? In short, block elements won’t allow any other HTML elements to appear either to the left or right, while inline elements allow text, or other HTML elements to pile up on either side. Let me show you a few examples of inline vs. block.

10. Extra Credit: Getting a Deeper Understanding

In this lesson we’ll go deeper into HTML and CSS, we’ll look at default styles in the browser (and how to override them), and we’ll also look at how to achieve consistency across the different browsers like Chrome, Safari, and Microsoft Edge.

11. Your Monthly Resolution Assignment

Time for an assignment!

1. Responsive Design Kickoff!

Mobile is eating the world! With the rise of smartphone and tablet use, more people are accessing the internet with there mobile devices. If you are creating a website, you’ll want to ensure that it will work no matter the screen size of the user. This is where Responsive Design comes in. With Responsive Design, you create webpages that render well on a variety of devices and screen sizes. This is achieved using a combination of flexible units of measurement, flexible grids, flexible images and media queries. In this lesson, we start our next project— a birthday event page —that will teach you how to create responsive websites.

2. Challenge: Get Your Mobile Revving

In this lesson, I’ll introduce you to the concept of “mobile-first.” Mobile first, as the name suggests, means that we start developing an optimized version of the web application for mobile devices, which have more restrictions than expand its features to create a tablet and desktop version. Coding mobile first lets you think philosophically about how to make your site as simple and legible as possible. The lesson ends with your challenge!

3. Challenge Answers: What's In The Box?

Let’s go over the solution to the last lecture’s challenge.

4. Have Your Cake And Make It Flexible Too

In this lesson, we learn how to make our images 100% flexible whether they are on the desktop, mobile or in an email. This is the first truly responsive code you're going to write. By the end of the lesson, you'll know how to add responsive images to your pages that automatically adjust their size with regards to the size of the screen.

5. Own The Newest Style: Media Queries and CSS Specificity

Welcome to the wonderful world of media queries! In this lesson, we use conditional CSS rules to keep your images beautiful at every size. We also cover the principle of specificity. Specificity is what your browser uses to decide the value (or importance) of conflicting CSS property values. Let’s learn more!

6. HTML vs. HTML5: What’s the difference?

What’s the difference between HTML and HTML5? In this lesson, we look at the updated elements specific to the HTML5 language. We then keep the magic rolling and figure out how to float images in both our mobile and desktop views using some advanced CSS floats.

7. What is an Example of an iFrame in HTML?

We use an iframe (inline frame) to embed a map onto our webpage. What’s an iFrame tag used for? For example, if you'd like to add Google Maps to a website, you can easily do simply by copying and pasting the iframe code from Google into your source code. The best part is that once you know how to configure iframes, you can steal this code from Google Maps, YouTube, Vimeo and thousands of cool sites around the web.

8. Best Practices: Keeping Your Code Ship-Shape

In this coding tutorial, we’ll make some improvements to the website by changing the background color with CSS, adding whitespace (padding or margin), adjusting the text size and using descriptive, meaningful code (e.g. for email links, address, etc.)

9. Pixels, Ems, and Rems (Oh My!)

Pixels vs. Ems vs. Rems what’s the difference? In this lesson, we take a moment to go over the differences between Pixels, Ems, and Rems, and talk about which unit is the most useful for creating responsive code.

10. Divide And Conquer The Rems

Rems are useful for creating responsive typography. To use them effectively, you’ll need to know the guiding principles for calculating rems. In this lesson, I’ll show you how to calculate rem sizes and direct you to an online tool that'll make your life easier when it comes to coding with rems.

11. Rem Review And Get Ready

Here, we review some of the ways you could have adjusted your code to include rems, as well as how to set the background image for your desktop view.

12. Week 3 Challenge!

Congratulations! You made it to the end of the project AND the week. Now its time to create a responsive birthday site all on your own. Keep watching for the instructions!

1. Is It Time for Dogs to Have a Social Network of Their Own?

In this lesson, we get started on our final project—AirCnC—a social network for cats and canines that looks very similar to AirBnB. In this lesson I’ll provide you with a design mockup (exactly like how it’s done in the real-world if you were working with a paying client). You’ll receive a design for both the mobile and desktop views. What’s great about this lesson is that if you’re up for a challenge then you can jump right on your own. If you get stuck? We’re here to help.

2. A Royale With Dogs

Before we write a line of code, I want to give you some critical thinking tips and strategies for how we might approach a project like this.

3. All Designs Go To "Section"

In this lesson, we start thinking strategically about our website's layout and how we'll break it up into different elements like sections, header, divs, etc.

4. Get Friendly With The Layout

Now it's time to write the responsive code! We get started on the website by writing the HTML markup and we add the text.

5. Responsive Design Layout by Example

We now turn to CSS and start styling the first section of the webpage with a lot of trial and error, tweaking, and tasty beverages.

6. CSS Media Queries: How To Reach Your Breakpoint(s)

Our website looks pretty good on small screens. Now it's time to expand it and make it look just as good on the desktop. In this lesson, you’ll learn how to set up CSS media queries so that we can begin coding the desktop version of our AirCnC site.

7. Layout Continued: Everything You Code In A Box To The Left

We continue with the task of making our website desktop-friendly (using media queries). We enclose the page's content in a container and style it so that it is centered on the page. You'll learn some tips to consider when styling divs and containers.

8. Rems vs. Pixels: When To Be Firm

We're ready to convert our pixels to rems and make our code as responsive as possible. But before we do, let's talk about when and why to convert pixels to rems. You can certainly use rems as the only unit of measure in you're CSS, but this would entail performing a lot of math. By using media queries and thus being able to specifically target different sized screens, you can reduce some of you're cognitive load by using pixels instead of rems.

9. Your Responsive Homework

Keep coding, and finish up the site so cats and canines alike finally get the responsive platform they deserve. We've left some tasks that you need to implement on your website and a few extra-credit ones that you can also tackle. If you get stuck, the community is a great place to reach out to and brainstorm ideas with.

10. Get Your HTML Certification

In order to earn your HTML Certification you must watch all the lectures in this course.

1. Get Your Site Live with Web Hosting

Looking good! Let's learn how to get your site live with web hosting, so that you can share your project with the world.

2. Upload Your Site with FTP

CyberDuck will help you upload & download files to the Web

3. How to Update your Site After the Site is Live

Let's go a bit farther with FTP to make live updates

4. Get Your Site Live with Github Pages!

Let's show the whole internet what you've done!

5. CSS3 Nth Child for Zebra Stripes

6. Fixing the Unicorn With Clearfix

1. Download the Completed Project Files

Download the final projects here (Don't peak unless you're stuck, or 100% finished)!