How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5

In this series, I look at how to create a responsive agency / portfolio style website from start to finish.

This is the first video of the series. In this video, I write all the markup (or HTML) for the site - though I did miss one small part (the Call to Action), which I'll code up once I get to that part.

Do you want to follow along? Here are my files!

[KevinPowell]

As you might notice, this video is a little old... For the most part, everything is fine, but there are two important things: First, I used multiple h1 in the page. At one point the HTML spec was updated to allow what I did here. None of the browsers implemented what the spec described though, and this is considered bad practice now. If you follow this, use one h1 only! Second: I used floats for the layout, and today I'd do it with Grid and Flexbox instead.

[xrineuchiha]

this series is really helpful for those who learns web development from online tutorials because after we finish the tutorial we don't know where to start from, we don't have any idea on which approach would be fast and easy, less redundancy. Thank you very much..
Could you please do some videos on single page parallex website from scratch without jqueries and also a full responsive web site using css-grid.(mobile first).
Thank you very much !!

[yeahmatt]

i'm 12 days into the course in the description and it has been helping me a ton with my CSS. i've been going through The Odin Project (which is how i found you) but i just couldn't wrap my head around making a page "responsive" or how to use flexbox correctly. the way you broke everything down and set up the challenges made it all finally make sense. thank you for providing such a great and free resource for people like me.

[blender_tommy]

After a prolonged hiatus in web developing, I'm getting back on the horse of coding, I came across your series looking for some videos to update and get upto speed in HTML5.
First of all, congrats on your videos, very informative and to the point....secondly FYI I tried Atom's shortcut (li*3>a and others) on Visual Studio Code for Linux and it also works...and lastly I really like you approach on your pre-viz/design of the website, I'll start using that method as the one I learnt and used was very cumbersome.
Keep on the good work!

[amardikamahdi]

I have a problem with an front-end development. But when i start to play your video, slowly, start to know how to make the front-end. Now i can make my own website without framework such as bootstrap and materialize. Thanks Kevin!

[skh.visuals]

Thanks a lot for your video keep up the good work i'm sure you'll get a lot of views and subscribers over time, just keep it up! I subscribed and liked the video, i'll make sure to like the others as i go through them !

[sakshamrewari]

You are a webDev blessing Kevin. Wish you all the good tags and selectors in the world.

[firstenjoylife]

Thanks a ton for sharing your video. Your break down is simple to follow. For coding or creating a website from scratch this is the most helpful of them all. Great job and thanks again.

[mufaddalm]

thats such simple and easy HTML ! i love it, no useless tags

[khalidh]

I just got an ad that said "most people who say how to make websites do not even know how to" lol

[joostnieuwenhuis]

Amazing vid serie man, you really helped me out here. Keep up the good work !

[tealleaf]

This is very nice. I've seen tons of tutorials on building websites, and I'm impressed by how organized and condensed you were able to make yours. Not to mention, it's informative enough for me to get the gist of what you're doing, but not too much to bore me or too little to puzzle me. If I'm curious of how some of the tags work I can just look them up very briefly. I also appreciate the organization of your code, it's very straightforward why you did what you did. I love seeing process in creating the website from scratch, even though realistically I'm sure you've spent more time planning and adjusting things around to your tastes before you did this video, it does show me the workflow and mindset of what building a website is like. Also, thanks for the dropbox link! I learn best when I mimic the process first before starting my own, so this series is very valuable to me! Subscribed!

[AtRiskMedia]

Amazingly helpful resource. I appreciate what you're doing with your channel. Kindest regards!

[bank_coder]

Im so glad to have found this channel, I will make sure you are known at coding groups on twitter and facebook !!! Awesome

[fullstackpal]

Finally, I found a mentor I was looking for. God Bless You Brother.

[manomoscu]

Thank's a lot for this man. Very very useful. I'm motion designer and want to make a simple portfolio, but responsive... and this kind of information is perfect for my needs.

[anthonylockard]

Very well made video. Easy to listen to and informative. I look forward to watching more.

[chrisclinejax]

Great series
I learnt so much. These were all topics I was studding, but applying the concepts to an actual project really brings it home.
Thank you so much for doing this..

[tngoes]

Thanks a lot for the videos, i am learning much better and faster after finding your channel. Keep up the good work and make sure to updates a lot. I'll be waiting

[tanveerkhan]

Hey Kevin
You are amazing,
I am starting to learn and have seen lots of videos, but you are awesome in explaining.