➢ STARTER FILES: https://goo.gl/JLX91A
➢ HTML TEMPLATE/FRAMEWORK: https://goo.gl/1m3BAE
➢ SUSCRIBE: http://goo.gl/Y2rJSj
➢ SURVEY: https://www.w3newbie.com/survey/
➢ FACEBOOK: https://www.facebook.com/w3newbie/
➢ TWITTER: https://twitter.com/DrewOnCue
➢ INSTAGRAM: https://www.instagram.com/drew_ryan_/
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:
https://static.pexels.com/photos/50567/girl-female-model-pretty-50567.jpeg
Portfolio Section:
https://static.pexels.com/photos/246368/pexels-photo-246368.jpeg
https://static.pexels.com/photos/90368/pexels-photo-90368.jpeg
https://static.pexels.com/photos/241555/pexels-photo-241555.jpeg
https://static.pexels.com/photos/91988/pexels-photo-91988.jpeg
https://static.pexels.com/photos/65121/pexels-photo-65121.jpeg
https://static.pexels.com/photos/47426/pexels-photo-47426.jpeg
Intro Image (added in CSS):
https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg
Parallax Image (added in CSS):
https://static.pexels.com/photos/30161/pexels-photo-30161.jpg
Original source
27 responses to “HTML5/CSS3 Responsive Photography Website – Start To Finish Web Design Tutorial”
What editor are you using?
Another awesome tutorial Drew. Thank you!!
Hey guys thanks so much for the likes and subscribes on this video! Wow 🙂
➢ SUSCRIBE: http://goo.gl/Y2rJSj
➢ HTML TEMPLATE/FRAMEWORK: https://goo.gl/1m3BAE
Why does "display: table" remove the margin at the top? How come "margin: 0 and padding: 0" doesn't remove the space? Explanation at all?
Heyy Drew, Nice tutorial but what if we wanted to use images of our own how would we link them? And in the css I tried adding my out background image using the same method you used to inset the burger menu Icon but it doesn't work and my lines of code are right and the stored location as well is right so could you or anyone assist me. please and thankyou!
Excellent tutorial! I love the way you code from scratch, without using bootstrap or any other bloated framework. Subscribed!
How did you get the mobile/iphone emulator, please help
hey Drew, i wanna ask a questions. whats different between ".intro .inner" than" .inner" selectors ?
Awesome video! Everytime I watch your tutorial, I am learning more and more.. Keep it up man! anyway, what mobile emulator are you using everytime you check for reponsiveness of the web?
Just to let you know, the starter files contained the completed project.
Please help me, i have followed your instructions but my post is still not the same as yours.
My project encountered problems: 6 photos in the portfolio – it has no equal size and display misaligned. 🙁
Hey Drew Ryan, Beautiful tutorial. Im trying to follow it up but I can't find the FB, IG, TW, G, icons to put as an href in the ul class 'social'. Can u or anyone else help me out? Thanks a lot
You/re the Boss 😀
Thanks a ton.
Hey man, thanks for the awesome video… it's clear and helpful. I'm an IT student at Rutgers and one of my current electives is Web Design. We haven't specifically covered display: table/table-cell (at least not yet), so I just started to read more about it and was wondering more about your method. My guess is that you do it that way because it is more dynamic. Is that the case and if so, in what ways?
thanks for this videos….
Drew can your tell where I can learn profissional photoshop or illustrator .
I styding to be a webdesigner for myself
I speak portuguese sorry my English
Hello. At 1:03, i haven't understood why you put "nav:active ul" after "nav ul". I don't find it necessary. I'm pretty sure i'm wrong, but if you could please explain to me. thank you in advance
great video Drew really helped me with CSS
Hello Drew, Thank you for your amazing videos.I learn a lot through your videos. Keep up the good work!!! 🙂
Great vids,dude! It would be nice to watch the making of website with different pages (maybe with fixed header/footer and the proper usage of id,classes in the css file for them).
Hi,Drew menu-icon does not work for me pls help
Hi, Drew I have a doubt how does the mobile phone appear to you? pls tell me
Keep on Rockin 🙂 m/
Drew whats up man. I love your Vids. i have one problem. the img of the road with palm trees. it dosnt show up on my browser. How can i fix this ?
Your tutorials are the best! Thank you for putting time into this 🙂
how can i contact you if i have some doubts to be cleared?
cant clear doubts on youtube comment section isnt it?
+Drew Ryan
It was a great tutorial……learnt a lot from it !!! The only thing is if you could explain the css part , a bit in detail , it would lead to a better understanding of the concept……Thanks a lot for putting in so much time.
drew you are awesome.I have learned alot from u.