Screencast Build an Interactive Website: Part 1 HTML/CSS

  • Drew Barontini


  1. thiagoaraujos said

    Nice, barebones screencast. I have two questions:

    • Shouldn't the "p" tag in "header" be an "h1" instead?
    • We don't need to self close tags in HTML 5, right?
    • We could have used an article tag instead of an ordered list, right? Maybe "ol" is more semantic, but just to be sure :)
  2. ktavadze said

    Good work guys! PS the finished html, css and js files are located at

  3. MBAcoder said

    Where is part 2? For me "next video" goes to an entirely different subject/module not part 2. :/

  4. MBAcoder said

    Soup to Bits: Ember Data & Testing is not part 2 is it?

  5. ktavadze said

    @MBAcoder: you have to click the "Previous Video" link instead

  6. kinlsweden said

    Very good! You worked very fast with was kind of in good because I realized how much I have to practice :) Thanks a lot!

  7. njeffrey said

    How did you style your prompt to work with git?

  8. Faculty

    Drew Barontini said


    If you source that file in your .bash_profile, it will show git status.

  9. Matt OToole said

    Got that working, thanks, Drew. But how did Jon do his?

  10. Faculty

    Jon Friskics said

    Hey all - I'm using powerline-shell for my Terminal - check it out here in the powerline-shell submodule and powerline config file:

  11. Matt OToole said

    Thanks. Do I just git clone that somewhere, tho? I've got Powerline sort of working, but mattotoole??master?~documents?code?todo? doesn't look right to me, what with all the question marks.... Any idea what step I'm missing?

  12. njeffrey said

    Matt OToole: You need to change your font. Terminal -> Preferences -> Profiles -> Under Font click change

    I had to change mine to "Ubuntu Mono derivative Powerline" to remove the question marks. You'll see this option if you installed the fonts correctly by cloning and running ./

  13. prabhat karthikeyan said

    I am unable to see this video on IE or Chrome. It just keeps spinning. I have 150Mbps down speed here. So internet speed isn't the problem.

  14. Jeremy Vogel said

    A good starter for implementing git, html5, and css.

  15. Faculty

    Stefan Nychka said

    (repost, updating url)

    Hi Prabhat! It's likely a firewall, common in workplaces for example. It could be extensions or browser settings . Tried and the video's working fine. Give those a go!

  16. Jesse Hatton said

    Thanks, This was a nice follow up to hammer home what i just learned in the Front-end Foundations course. Onward and Upward!

  17. Siobhan Hattersley said

    Liked this as just seeing another example of a website besides what was done in Front-end Foundations, I just wasn't keen on the GitHub part, I felt like it distracted from the HTML / CSS and confused me a bit. Thank you.

About This Screencast

Learn to start building a website by using HTML and CSS. In the first episode of the Build an Interactive Website series, we'll begin creating the HTML and CSS for a fictional Front-end News website, while following some best practices for structuring HTML, writing efficient CSS, and commenting our code along the way.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now