HTML5/CSS3 Flat Responsive Website – Start To Finish Web Design Tutorial

By | 28th August 2017
HTML5/CSS3 Flat Responsive Website – Start To Finish Web Design Tutorial





In this video we’ll learn how to design a responsive HTML5 and CSS3 website from scratch using only a text editor. The website design also features a navigation that will transform at the mobile or responsive width of the website.

Sublime Text:

20 thoughts on “HTML5/CSS3 Flat Responsive Website – Start To Finish Web Design Tutorial

  1. Simin Shaikh

    hi.The images size are not changing according to the size of screen

  2. Kai A

    Tq very much Drew Ryan, u make me clear and easy to understand the lesson… great vid lesson

  3. joemo7384

    Great work, Loved this video. Thanks a lot and keep up the great work.

  4. NobodyZone

    So far the best Tutorial I have found in the internet, accurate infomatif and easy to understand!
    I have juste one question? when i set Image width: auto like you did all images behave like normal (none-responsive).
    only when I set Image width:100%;
    is the result the same as in your tutorial?
    do you or anyoneelse know why ?

    thanks in advance!

  5. Stršljenov Raj

    Thanks so much I learned a lot.
    Conect with me if you like in instagram: marketing 3.0
    , maybe we could do some joint team work. One of the best website videos on YT, if not the best. Congrats!

  6. Dave Lampton

    In the starter files, index.html is missing its opening HTML tag: <html lang="en">
    (The DOCTYPE declaration is not the same thing.)

  7. Ibrahim Houri

    This really a great job , can I copy the slidephoto html with the css and use it in my website Templeton ??

  8. rexford kwofie

    Awesome great video, looking forward for electrons video.Thanks a lot.

  9. Mike L.

    I give this 4 stars out of 5. I learned a lot, and it helped me connect the dots within the where's and how's to make a desktop website that would display nicely on a mobile device. This only reason I shot it down one started was that it seemed rushed toward the end as Drew stopped and restarted several times right when he was going over the CSS part. It also seemed like Drew was experimenting while recording. Although enlightening, on the workings of a website developers mind, it took some of the polish off of an otherwise great video. I also found that when formatting the one-third's that setting the height to 303 px fixed the problem with the "Happy Customers" section that wasn't the same height as the other sections, making it look better.

    I would definitely recommend this video to anyone who had taken the W3C tutorial but just couldn't make all the pieces work together. I learned tons about the new tags in HTML5 that weren't available in HTML 4, why CSS 3 is so powerful and how to make the two files work together. Then there is the framework from Google, with the special fonts and icons.

    If you decide to follow along with Drew in developing your own version of this website – highly recommended – it helps to have a decent editor such as Atom, or Notepad++, where tags and attributes help is available. Drew tends to go kind of fast toward the end, and not having to type out the entire attribute was an enormous help.

  10. TimdeTombe

    I fixed it 😀
    This was my error
    @MEDIA screen and (max-width: 768px) {
    @MEDIA screen and (max-width: 768px 😉 {

    i used a semi collon there 0.o


Leave a Reply