Do you want to learn how to build professional websites with HTML5, CSS3, and JavaScript? In this tutorial, HTML5 and CSS Development: Build a Professional Website | Udemy instructor, Jordan Hudgens will take a project driven approach to building a portfolio website.

Explore the full course on Udemy with a discount using the following link:

My name is Jordan Hudgens, and I will be your instructor for the tutorial. I am currently the lead instructor and CTO at DevCamp. In addition to being the lead instructor for devCamp I’ve also been building web applications for over a decade for organizations such as Eventbrite and Quip.

Throughout the video you’ll learn skills such as:
– CSS3
– JavaScript
– Flexbox
– CSS Grid
– Animations
– Navigation
– Fonts
– Images

I also demonstrate the process that I personally use when I build out my own websites. My goal for this video is not only to teach you how to follow along and build the website I show, but to teach you how to build any type of website that you want to create!

There are no technical pre-requisites for going through this tutorial. The ideal student is an individual who wants to learn how to build and style websites, with a focus on real world development. After you have completed this tutorial, you will be able to build real world websites and learn the same concepts taught at the DevCamp code school. Additionally, because this is a project based course, after you’ve gone through the lessons you will have a full website portfolio that you can start adding your own websites to.

Link to the HTML, CSS and JavaScript source code along with the images used in the video:


Follow me on Twitter:
Follow me on Instagram:
Follow me on YouTube:


Share your story with #BeAble


By Udemy

32 thoughts on “HTML5 & CSS Development: Learn How to Build a Professional Website | Udemy, Jordan Hudgens”
  1. I don’t understand this. The only part I don’t don’t understand is ending divs. How does he end divs like that and just set them where he wants them to be and making sure that that’s the right place where the div should end

  2. I really enjoyed watching your video. Awesome!!!!!
    I just want to ask you to please clarify where you copy and pasted all 12 images as it confused me :))

  3. Man love this video its the best took me a couple of days but man its a good feeling knowing you this and understand it also not just copy and pasted it lol

  4. At 27:42 he selects both < and > in the closing </div>. Those squares. How does he do that?

    At 27:48 he selects 3 lines of code. I figured out how to select them with keyboard. But how does he move them into their own line? (Vertical line)

  5. Everything went well untill i started adding the images, went back and followed to the last detail but still my pictures wouldnt GRID and get into the boxes, they just overlapped everytime.. sucks becosue the tutorial was so good! Dont know where i got it wrong

  6. If anyone else is stuck at 1:06:00 where the absolute and relative positioning of the portfolio background image and logo image are still not on top of each-other like they are supposed to be, but instead are side by side, make sure you don't have any other existing CSS tags that could be overriding them like a * tag (which you should avoid using if possible)

  7. I think the names of your classes are confusing, excessively long, and make totally unnecessary use of the word "wrapper" making it basically meaningless. Normally in CSS, a wrapper div is one that wraps around everything, just like a container div. Nothing else should have "wrapper" in the name. The naming is also inconsistent. Some of the portfolio div tags start with portfolio, but then you have "img-text-wrapper" and "subtitle" which don't start with portfolio even though they are part of the portfolio elements (also img-text-wrapper is super confusing). These should be called "portfolio-content" and "portfolio-subtitle" or similar

  8. A much more concise way to make sure the text is centered over the profile images at 1:05:30 would be like this:
    .img-text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

Leave a Reply

Your email address will not be published. Required fields are marked *