HTML5/CSS3-Tv-site-and-reagent – beginning of the end Web-Design-Tutorial

HTML5/CSS3-Tv-site-and-reagent – beginning of the end of Web Design Tutorial

➢ STARTER FILES: https://goo.gl/Qhp3FV
➢ TEMPLATE/HTML-FRAME: https://goo.gl/0bLe7b
➢ WEB HOSTING: https://goo.gl/BNUMo7

➢ Log on to: http://goo.gl/Y2rJSj

➢ FACEBOOK: https://www.facebook.com/w3newbie/
➢ TWITTER: https://twitter.com/DrewOnCue
➢ INSTAGRAM: https://www.instagram.com/drew_ryan_/

In this video we will learn how to design a responsive HTML5 and CSS3 website from scratch using only a text editor. The website design has a navigation that make the mobile or responsive width of the site.

Sublime Text: https://www.sublimetext.com/

50 replies
  1. Γιώργος Τζας
    Γιώργος Τζας says:

    That’s great, i want to learn html, css and all that stuff, i feel so good watching your videos, you are great!!!!

    Reply
  2. Darrion R.L.
    Darrion R.L. says:

    Hello! I just downloaded Sublime so I could follow along with this video! But the text colors aren’t changing when I start typing in codes? Everything is white.

    For example, in the video, <!DOCTYPE html> is blue, and the Meta tags are yellow. How can I change this? It would be awesome if someone could help me out here!

    Reply
  3. Mihail Nikolov
    Mihail Nikolov says:

    Thanks so much for this great tutorial, Drew! I appreciate your effort and hard work and the fact you have shared your skills with the enthusiastic people who want to learn Web Design!!!

    Reply
  4. Benedikt Lantsoght
    Benedikt Lantsoght says:

    Just a minor remark desktop.png got some 1px lines in it. But I agree, this is by far the best tutorial to learn HTML/CSS.

    Reply
  5. Pu Nk
    Pu Nk says:

    Sir, Could you guide me as to where i can find places where i can write code for the prescribed design (already existing)…Sort of like challenges or tasks you could say just so that i get enough practice
    Simply put, they show me the output and i do the front-end coding

    Reply
  6. FanboySlayer
    FanboySlayer says:

    Can anyone please explain 1:47:52 and telly me why the width property worked because nav li is inline and as far as I know an inline element width can’t be changed;

    Reply
  7. stevesculptor1
    stevesculptor1 says:

    Just watched the video on the light/dark rocket design tutorial, you say contact me for any questions, like where? is it like all the others, no questions answered till I spent my money?

    Reply
  8. Denys Cole
    Denys Cole says:

    really good tutorial. Drew presented it very clearly.
    and made it very easy to follow the logic in the design.
    Many thanks and keep up the good work

    Reply
  9. Roy Abbink
    Roy Abbink says:

    Why is <article> used for images on the tablet and desktop sections? As a HTML/CSS noob it makes more sense to have text in an article tag. And images in an aside tag.

    Reply
  10. emanuel miulescu
    emanuel miulescu says:

    It is so hard to find really really good tutorials. Yours is perfect, thank you so much, it answered so many questions.

    Reply
  11. FanboySlayer
    FanboySlayer says:

    I am a bit confused! If I use width: 100% it works fine but if I use height:100% it doesn’t do anything! Why is this? For example at 1:18:11 I tried changing the aside to be height: of 100% instead of auto .

    Reply
  12. Nikhil Raghuwanshi
    Nikhil Raghuwanshi says:

    Thanks for your tutorial..you taught it in very easy way.i love it. . Can you upload the .html and .css file of this website..

    Reply
  13. Emilio Marquez
    Emilio Marquez says:

    I am at 1:09:00.
    I have the same css code:
    .one-fourth {
    width: 25%
    float: left;
    text-align: center;
    }
    But these stack on top of each other and not side by side.

    Here is my four column html code:
    <section class="one-fourth" id="html">
    <td><i class="fa fa-html5"></i></td>
    <h3>HTML</h3>
    </section>
    <section class="one-fourth" id="css">
    <td><i class="fa fa-css3"></i></td>
    <h3>CSS</h3>
    </section>
    <section class="one-fourth" id="seo">
    <td><i class="fa fa-search"></i></td>
    <h3>SEO</h3>
    </section>
    <section class="one-fourth">
    <td><i class="fa fa-users"></i></td>
    <h3>SOCIAL</h3>
    </section>

    Where am I messing up???

    Reply
  14. Kingsley
    Kingsley says:

    Thanks Drew for uploading such a good lesson in Web design. I have a problem: the HTML5 logo doesn’t show up instead I get to see a small box in place of the logo; any suggestion please

    Reply
  15. Learn2Fly
    Learn2Fly says:

    Very clear explanation during the tutorial. Simple to understand and to be organized. Thank you Drew for your tutorial on this. It was more than helpful for my growing inside the front-end development!

    Reply
  16. jawed ahmed
    jawed ahmed says:

    Hey Mate Thanks for a wonderful tutorial on HTML5 and CSS3. One of the best tutorial on YouTube. By the way what plugin are you for css auto completion in Sublime Text ?

    Reply
  17. Len Vacca
    Len Vacca says:

    Hi Drew Ryan im try this beautiful web site that you have design but im have trouble add the images in this part with out your <div class="slide-wrap">
    <section class="slider"
    <ul class="slider1">
    <li><img src="https://www.w3newbie.com/wp-content /uploads/chest-fly.png"></li>
    <li><img src="https://www.w3newbie.com/wp-content /uploads/push-up.png"></li>
    <li><img src="https://www.w3newbie.com/wp-content /uploads/inside-gym.png"></li>
    <li><img src="https://www.w3newbie.com/wp-content /uploads/training.png"></li>
    </ul>
    </section>
    </div>
    who do i change this just to pick up image from my folder ???

    Reply
  18. Hieu Thanh
    Hieu Thanh says:

    My english is too bad, so I didn’t understand 100% what you say, I didn’t know why we must add float: left in #logo, I try to remove that float attribute then RD.png disappeared why ?

    Reply
  19. Anony Mouse
    Anony Mouse says:

    Although I speak the same language as this guy, to me, a beginner in web design, this guy could be speaking Japanese for all I understand. Much to learn for me.
    I must find an easier tutorial, one that includes, an idiots guide to HTML, CSS, Java Script etc.
    So lost.

    Reply
  20. Santosh Dewangan
    Santosh Dewangan says:

    Thank you so much.

    You taught me website designing in a very simple and interesting way.

    Now I can design my own website.

    Reply
  21. Steve Kim
    Steve Kim says:

    Why do we set both .inner-wrapper AND article to float left?? I don’t understand why inner-wrapper has to float left.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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