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

25 18



➢ LATEST TUTORIAL:
➢ STARTER FILES:
➢ HTML WEBSITE COURSE: ​ (94% Off Link)

➢ PUT YOUR WEBSITE ONLINE:
➢ SURVEY:
➢ HTML TEMPLATE/FRAMEWORK:

➢ SUSCRIBE:

➢ FACEBOOK:
➢ TWITTER:
➢ INSTAGRAM:

In this video we’ll learn how to design a responsive HTML5 and CSS3 Photography 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 as well as a full-screen landing page.

TUTORIAL PICTURE URLs:

Sidebar Image:

Portfolio Section:

Intro Image (added in CSS):

Parallax Image (added in CSS):

25 Comments
  1. Drew Ryan says

    Hey guys thanks so much for liking this video and subscribing 😎
    ➢ LATEST TUTORIAL: @t
    ➢ NEW HTML WEBSITE COURSE: ​@t (94% Off Link)

  2. Humanities ...pR says

    nice, Work sir god bless You……………

  3. Shekh Saifuddin says

    Awesome…

  4. Art Pablo says

    Thank you for the tutorial, but I ran into several problems just by following along. I believe you have a lot of unnecessary code which makes it super messy and confusing. From a design standpoint some things could be designed better, such as the "my pictures" just floating under Portfolio, the large line spacing, the padding around the paragraphs, etc.

  5. Fernando Herrera says

    Hey guys My menu is not showing when is in a big screen, only the button :S why is that? I copies everything you did 🙁

  6. A Film By Huan says

    Thanks! Not a code-guy so this saved my homework

  7. Raktim Kashyap says

    Hey Drew! I was just going through your website "w3newbie" and i am wondering what is it built upon? Did u build it with pure HTML CSS and JS or Did u use some kind of framework? Is it a wordpress site? Do let me know. And thanks a lot for the wonderful content. 😊

    Cheers!

  8. koby david says

    God bless you!

  9. Abhinav Srivastava says

    Hey bro. In your starter files, the whole thing is already coded! In your video it was'nt. Why is it so?

  10. Aran García says

    Thanks for the video and the templates!! 

    I am working with this same webpage structure, but I'd like to add different languages. I know how to do it, the only problem I have is to place the "EN ES CA" on the top right side. So it would go on the opposite side of the nav bar. If you can help me I would be so grateful.

    Thank you!!

  11. Obada Khalili says

    I really love your vids and I hope you keep uploading vids like this more & more!

  12. Ancliz says

    I'm making a photography website for a friend, and is there a way to make the formatting of images automated, with php or javascript or something? I've made another page for an extended portfolio, but I don't want to have to manually change each individual link to the image source for the one third ports, nor the link to view it at full size.

  13. Apporva arya says

    i just completed your tutorial. iTs far best i have seen till yet.Please make more and more tutorials on website template building using html/css. You are best.

  14. Yldemaro Pérez says

    Thank you.

  15. Vladimir Jankovic says

    I just cant figure what nav :active ul does…

  16. Julia Maake says

    Love your work

  17. Leatherjacks says

    Hi Drew! Nice to meet you and thank you so much for the amazing tutorial! Could you please help me with one question? I´m finishing both Website_Layout and Website_MOBILE_Layout, but I only know how to give <link rel> for CSS Style Sheets… Is there a way I can tell my page to load my Mobile html content layout incase screen resolution is 816px or lower (those were the variables I created.) ? Please could you help me!?

    Thank you so much!

  18. Ali Mohd mughal says

    Hi brother how do you make website holding image

  19. Dallas McEnany says

    the last 3 photo url links i believe are broken or blocked

  20. Dallas McEnany says

    I completed your third animate easy tutorial, just a heads up your starter file comes already done on your HTML file as well as your css. I guess i will just delete all of it and follow the video. cheers

  21. M U says

    thank you very much for your video please uploading video

  22. young 95 says

    How do you open your page on the iphone screens? That looks like a great way to test how response it actually is.

  23. Edward Videos says

    Absolutely_ GREAT; one of the best tutorials I came across

  24. UnleashedWolf says

    Only some of my CSS coding is changing the layout. I don't understand why some changes aren't being made. Please help

  25. Shinwari Vlogs says

    Sir when i use the nav files in php files it does not work…while works perfect in html files…any suggestions

Leave A Reply

Your email address will not be published.