Course Progress

Week 1 about 2 hours

Week 2 about 1 hour

    1. This week's project!

    2. The Web Inspector Will Save Your Life

    How to reveal the code on any webpage, and try things out instantly!

    3. Web Inspector Scavenger Hunt

    Scavenger hunt game!

    4. Web Inspector Scavenger Hunt: Answers

    Let's go over the answers! How did you do?

    5. Page Layout: Advanced Divs

    This is where we learn how to create a page layout for a blog

    6. Page Layout: CSS Tricks to Style Your Divs

    Our HTML looks good! Now let's dive into the CSS...

    7. Float & Clear

    A simple trick: if you float your DIVS, always clear.

    8. Floating Your Images

    Here's how you wrap text around an image

    9. IDs vs. Classes

    Learn the difference between IDs and classes

    10. Inline vs. Block

    All HTML tags are either "inline" or "block". Here's why that's important...

    11. Extra Credit: Getting a Deeper Understanding

    Watch to get a deeper understanding of our code, browsers, and normalization. Follow along without coding!

    12. Project: Monthly Resolution [SUMIT HOMEWORK]

    Now I'll leave it up to you to make your own project. Good luck!

Week 3 about 1 hour

    1. Responsive Design Kickoff!

    In this lesson I'll introduce the birthday page we're going to build, which will utilize HTML5; media queries; flexible images; CSS, and much more.

    2. Challenge 1: Get Your Mobile Revving

    In this lesson, we cover the benefits of a mobile-first approach to page design and the differences you should be aware of between platforms. Then, we get our hands dirty and start actually playing with unicorns. Or coding. That's what we mean. Coding.

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

    Now that you've built out the body of the invitation yourself, we'll review how the code should look and pat you on the back for successfully completing the first part of your project. Metaphorically "pat" you. (Can you feel it? Good job!)

    4. Have Your Cake And Make It Flexible Too

    In this lesson, we learn how to be 100% flexible - or at least how to ensure our images look that way. This is the first truly responsive code you're going to design.

    5. Own The Newest Style (Sheet)

    Welcome to the wonderful world of Media Queries! In this lesson, we cover the principal of specificity and how to create conditional CSS sheets to keep your images beautiful at every size.

    6. Keep Floating On

    We step Aside for a moment and talk about some cool new elements of HTML5. Then we keep the magic rolling and figure out how to float images in both our mobile and desktop views.

    7. Get Embed With Google Maps

    Just in case you need us to map it out for you...we quickly review how to add embeds into your code.

    8. Best Practices: Keeping Your Code Ship-Shape

    Time to tidy-up, make the final adjustments, and streamline our code. And also, apparently, to find multiple ways to enjoy an intermission.

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

    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. Hint: No need to ask What's the Frequency, Kenneth or be Losing My Religion over the Em/Rem debate. Everybody hurts.

    10. Divide And Conquer The Rems

    Can you calculate how easy it is to adjust your rems? Don't worry. We cover everything you need to know to use rems and keep your page on-spec.

    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 this first project. Now, it's time to create a birthday site all on your own.

    13. Submit Your Week 3 Homework

    Homework is due the following Sunday by 11:59 EST

Week 4 40 minutes

    1. What is Bootstrap?

    Bootstrap helps you code websites quicker! Let's get into it

    2. Understand Buttons & Components

    Let's get our first Bootstrap project underway using the basic template

    3. The Grid System: 12 Columns

    Want to make columns faster? Do it with the Bootstrap grid system!

    4. Homework: Landing Page Kickoff

    Getting a better sense for the language and how everything connects while building a site

    5. Project: Landing Page Review

    You just coded all by yourself! How did it feel?

    6. Get your certificate

    You'll have to finish watching all the lessons to unlock this step.

Bonus about 2 hours

    1. Get Your Site Live with Web Hosting

    Looking good! Get it live and share your project with the web

    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 further with FTP to make live updates

    4. How to connect any domain to any host (For example: Godaddy to Hostgator)

    5. Add the Facebook "Like" Button

    Let's understand the Facebook API so that we can add the Facebook Like Button and Commenting

    6. How to Embed YouTube & Google Maps

    After you learn about the iFrame, you'll be able to embed any YouTube video or Google Map

    7. Student Code Review: Sydney Flint (bonus)

    8. Having Trouble? Problem Solving Tips for HTML, CSS and JavaScript

    Coding alone is frustrating! I get it. Here are some "friends" that can offer you assistance...

    9. How Do I Center... "X"?

    Let's center our content in a few easy steps

    10. CSS3 Nth Child for Zebra Stripes

    11. Fixing the Unicorn With Clearfix

    12. Deconstructing the Final Project

    You did it! How does everything look? Let's take a minute to compare your code with mine

    13. Adding Navigation to Your Site

    Add new pages to your site with your very own navigation

    14. CSS Hover Transition & Add Multiple Pages

    Here we'll learn how to use the hover state for a cool button effect