How to Create a Responsive Website from Scratch - Part 1: The HTML
ฝัง
- เผยแพร่เมื่อ 15 พ.ย. 2016
- Start creating responsive layouts with confidence with my free responsive layouts course: courses.kevinpowell.co/conque...
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!
www.dropbox.com/s/343mrdn8o54...
And the completed project is on GitHub Find this on GitHub - github.com/kevin-powell/How-t...
![[Live] : ONE 167 วันนี้!! "ตะวันฉาย vs โจ"](http://i.ytimg.com/vi/D9_dvfIa6Ao/mqdefault.jpg)
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.
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.
Amazing vid serie man, you really helped me out here. Keep up the good work !
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.
Amazingly helpful resource. I appreciate what you're doing with your channel. Kindest regards!
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 !!
wow i'm sorry you already had a css grid video ...
th-cam.com/video/dRuMoGNcJfw/w-d-xo.html
Thanx
Yup, I just started the CSS grid one, so good timing! As for the parallax and other things with JS, my future videos will be using vanilla JS as much as possible :).
thats such simple and easy HTML ! i love it, no useless tags
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!
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
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 !
Thanks so much for the words of encouragement Rggz! I'm really glad that you liked the video. My channel is growing slowly (but steadily), and knowing that people like it really encourages me to keep it up!
If you've got any specific things you'd like me to make a video or series on, let me know and I'll see what I can do.
Kevin Powell Your channel is probably the best one to learn Web Development, manly thanks to series like this. Seeing the hole process from the beginning until the end helps a lot and I think you should do this kind of series more often.
Thank you.
Glad you liked it Toni, thanks for the kind words!
Kevin Powell hey i dont know how to edit tho or really anything about computers
Very well made video. Easy to listen to and informative. I look forward to watching more.
Thanks, I'm glad you liked it Anthony!
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.
I just got an ad that said "most people who say how to make websites do not even know how to" lol
youtube ads are evolving...
Finally, I found a mentor I was looking for. God Bless You Brother.
Glad that your enjoying my videos!!
Hey Kevin
You are amazing,
I am starting to learn and have seen lots of videos,but you are awesome in explaining.
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..
Very glad that you enjoyed it and that it helped out :)
This is great, easy to understand and watch
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!
Thanks so much for the super kind words!! I'm really happy you enjoy the way I put my content together, and glad it's helped!
You are a webDev blessing Kevin. Wish you all the good tags and selectors in the world.
Haha, thanks a lot saksham rewari!
Thank you so much. I learned a lot by watching this .
Thank you for your videos! They’ve helped me quite a bit.
Fantastic tutorial! Thank you for showing this!
Ur welcome
:)
This is god tier education video
love your work man! keep it up
Dude you can learn so much implementation from a project thanks for sharing you le ideas you got a sub a dude
amazing video man....was helpful
Im so glad to have found this channel , I will make sure you are known at coding groups on twitter and facebook !!! Awesome
I'm glad you like it, and thanks for sharing Thabang!
Thanks so much for sharing your knowledge.
Really helpful! thank you very much
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!
That's awesome Amardika! Really happy that my channel had helped you out!!
high quality content! thank you so much for this! Subscribed!
Very glad that you're enjoying my videos Grez, thanks for subscribing!
I really want to do this and you seem to have put out a wonderful step by step procedure, I'll surely be back after learning some basics :'D
Kevin fantastic video thank you so much!
brilliant work!! for the first time I've got to know the importance of in Html...U r making coding so easier n simpler...thanks a ton.... :) became too late to find out your TH-cam channel...!!!
Great video! I've been doing Web Design for a little while now and your videos have been SUPER helpful! Just one question, how did you make it so when you type in section.home-hero atom autocompleted it to ? 4:18
Tutorial is so clear I can watch it in 1.5x
extremely helpful series thank you so much.
I'm really glad that you liked it Brian!
First vid of many learning the inss and out
thank you for the video your presentation style is very easy to learn! also very professional way of approch in making website.. subscribed.. hard fan of this channel !!!
Very awesome, thanks a lot for the kind words and I'm glad you're enjoying my videos!!
This was really helpful, thanks so much
No problem, glad you liked it 😁
thanks a lot so for your source and video... i'm so grateful
Hi - thank you for this! I really appreciate it!
No problem at all :D
best tutorial i found by far!! thanks for you're step by step explanation!
Glad that you like it abby!
i was wondering if you knew how to make the menu change formats when viewed on a phone- like for example if you had more then your three click options, the menu would stack on top of each other rather then squish in smaller and smaller.
It's not the same menu, but I do that in this video - th-cam.com/video/FqbOu5ZRFag/w-d-xo.html&lc=Ugyo7-jQmYU4oyyWm4N4AaABAg
Cool video! Thanks!
Can you please help me understand the need for creating "col-3" and "col-1" elements, when we already had and tags in the footer
Great, I passed the first lesson - on to the second one!
Awesome 😁
Slower and cool explanation. very informative and practical.
Thanks a lot
great job, learning a lot
Thanks so much Kevin
Your videos rock! Thank you so much!
No problem, I'm happy to hear that you liked it 👍
thanks a lot for this video!
This is great!! thanks for sharing!!
Thanks for the kind words Franco, I'm glad you liked it!
Thank you for sharing!!! Have a GREAT DAY!!! ~ PEACE :)
Great video! Thank you
I'm glad you liked it Ivan!
Begins at 2.52. Thank you btw for great video:)
This is really helpful thanks a lot!
No problem at all :D
for a long time,i was procrastinating over this website building. Hopefully will complete it today
Hah, saw your comment about finishing the series before I saw this one! Good job getting through it, my goodness you got through it fast!
Kevin Powell ,thanks for being a good mentor
Thank you alot kevin which text editor are you using and would you recommend it?
When I have no idea what is going on. I think I need to start all the way from the beginning
@Kevin Powell: Thanks for sharing. Your tutorials are great! I have a question about the logo image you inserted at 03:06 because the logo image does not display in my browser (chrome) when I typed the "src=img/logo.png" attribute. HOW DID YOU GET THE src ATTRIBUTE TO AUTOMATICALLY LOCATE THE ROOT/PROJECT FOLDER WITHOUT USING THE FILE PATH SUCH AS C:\Users\Mat 2\Documents\project Webistes\Creative Inc\img IN THE LOCAL DRIVE?
never make paths relative to where they are on your computer, or it won't work when you upload your page to the web. Everything needs to be relative to the main folder of your project.
Because I wrote img, it knew I wanted to look in the img folder that the index.html file is located. This video might help: th-cam.com/video/ta3Oxx7Yqbo/w-d-xo.html
Guess who's not gonna fail her coding class :) THANK YOU FOR THIS god bless u
Haha! Glad it helped 😁
I have been watching many such kind of videos. but yours are much much better. I really liked. keep it up. it would be also great when you cover sign up/ sign in, in your videos. thanks.
I'm really glad you like the videos Sardor! Thanks for the suggestion I'll try to keep it in mind.
Thanks for these tutorials. I have learn't so much. If I wanted to keep the nav separate so the background is white...do I need to add another container class around it?
Yup, exactly! Glad that you've learnt a lot :D
great! very clean
Thanks Daniel!
great job well done
thanks man you helped me a lot
Glad to hear that Obaid!
Many thanks. You are awesome:
I really enjoy this! I am a web dev mentor and I think you're energy and explanations are so accessible :) Question: are you using an extension to auto-populate html like that ? Or does it come with Atom?
install the atom package called 'emmet'
1:50 U SAVED MY ASS , i was going crazy , thank YOUUU the damn webstorm did not write the meta , i was getting very small font sizes , i should go back to VScode
Love these Atom shortcuts!!!
Geoffrey Zoref it’s likely emmet, and it’s built into most web text editors. I know it comes default in VS Code 👍
Can Atom shortcuts be used in VS?
good shot man
Thanks :)
I would like to know what program you are using for the coding to build the website. I am learning this by watching your videos for the first time and I want to play around with the program.
I'm using Atom for my code editor - atom.io - and Prepros for the auto-refresh and some other things - prepros.io/
Kevin, is atom.io a free or do you have to buy/subscribe to it?
Atom is completely free!
Kevin Powell Is there any like live update/auto refresh plugins for Sublime Text 3 that you know of??
@@MikeA-ri5pz i found this: packagecontrol.io/packages/LiveReload
Hi Kevin do you have a video from the start how you install the application and how you created a files inside the application
Thanks for this Video tutorial
What was this loud music all about that I was unable to mute? It lasts from 2:30 to 3:00 and only plays if your TH-cam video screen is enlarged (maximized).
Great tutorial!
Question: do you think it is a good idea to use HTML table for the footer instead of ?
Tables should only be used for tabular data (think of something you might use Excel for). We used to use them for layout because we didn't have any alternatives, but they are a nightmare, specially when it comes to making them responsive.
There are alternatives to it being a list, though in this case many consider it good practice for it to be a list, specially for accessibility reasons (it is, after all, a list).
Gotcha. Thanks so much for response, keep up awesome work!
Loved it!! awesome 😁
Awesome, glad to hear that :D
Hi i have a quick question. What do you do at around 9:41 to shorten the paragraph lines without making a new line like you did with line 35?
Super awesome tutorial! It's incredible how few good tutorials there are for building a well-designed static html/css site. Do you use actual build tools for production sites (gulp/sass/browsersync etc)? It would be great to do tutorials using those.
Glad you liked it ConquerJS and thanks for the kind words! I was planning on staying pretty vanilla for the next little bit, but I do want to start incorporating Sass at one point soon.
I'll look at doing a video for my workflow at one point, but it's really nothing fancy at all.
Awesome! There's a huge hunger among beginners that know HTML and CSS to learn how professionals actually build sites in the wild using things like Gulp etc -
ConquerJS didn't realize that, thanks for the insight!
Since it is not a big proyect, you don't need to use the "Main" element, right? Or is it just not that important as i thought? When am i supposed to use it? Your videos are really useful!
Hi Kevin,
Thank you upfront for this great tutorial! I have a quick question regarding the Dropbox files as I follow along. When I clock the .psd file it, it shows an error saying the file cannot be previewed... I'm wondering if this is an old file that has been taken down or if there is some other detail I'm missing? Thanks upfront for your help.
everything seems to be okay when I looked now, not sure what the problem is?
how did you make 5 li show up with li*5 at 17:27? also how did you auto fill sections with the class by typing ".section.portfolio"? I'm pressing enter and it doesn't work.
feel easy when you code html
Thanks, Powell
You're welcome!
After the reading of 'Who we are' I am convinced the company creative inc is run by cats 🕵🏽♂️
Does the "about" and "contact" nav work? or is this tutorial just about the homepage?
I only created the homepage for this tutorial.
Thanks from mother Russia! Your tutorials are great, I'm happy I found your channel!
Thanks Andrey!
very well done tutorial :D
Thank you!
Hi Kevin, just started doing the website myself from scratch and checking it against the one I did while I was following your videos. I noticed in the html file that in the the sometimes comes before the and sometimes after the . Might be a silly question but does it matter what order it goes in?? thanks a mill
Sure does :). It's going to have a width on it, so if you want a background to stretch from one side of the screen to the other, then the container must be inside the section.
@@KevinPowell yessss, that makes loads of sense! I was wondering why my background wasn't doing what it was supposed to do haha thanks so much for saving my brain cells.
How did you do this? I tried typing all this in and even copy-pasting
the whole thing from your dropbox-thing, but all it came up with was text, no photos. I know that you have to have the photos on your computer, but I tried doing that logo-thing with the ** but it didn't work, even though the file name was logo.png...
Can someone please help?
can i get a handbook kinda bout which packages to install prior to it?
Hey! Great TH-cam Channel. I am wanting to learn coding and making websites from scratch! I was wondering where I should begin? I am also curious on which platforms I need to make a successful website?
That's a hard question to answer, because so many people do different things! Some people make a living on creating WordPress sites, others get into building sites from scratch, other focus on things like accessibility, and others building WordPress sites and whatnot.
I'd say the focus at the start should be a firm understanding of html and CSS. Too many people take CSS for granted because it's a fairly easy language to understand how it works, once you get the swing of it, but it's a freaking hard language to be good at. Developers that come from other, more complicated languages often dislike CSS, and that's because it looks easy, but doesn't work how they think it should.
Get comfortable with those languages, then probably start looking into JavaScript. JavaScript opens the doors to a few possible directions, whether it's just adding animation and interactivity to a site, or getting into JS frameworks and building PWAs. But that's a long way off to start worrying about now!
Kevin Powell Okay, thank you so much that helps a lot! With WordPress, is it your own website? like you can lease/sell it to other businesses to make profit?
You can create themes, which have the style and functionality of the site built on that platform, and then sell that theme.
Ive never coded b4 and im so confused lol thanks though im kinda understanding some things! subbed
If you've never done any coding, I have a series that covers the very basics, it might help start you off! HTML & CSS for beginners: th-cam.com/play/PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-.html
Hi im stuck on the portfolio, when i type in src="img/portfolio-01.jpg" it doesnt find the image, ive downloaded your dropbox file with the photo, do i need to have the img somewhere special for it to work?
it should be in a folder called 'img'
Dayum, I lost a few good months with tutorials..learning by doing is the best way.
If you want to know what to chose app or mobile design, check here: www.cleveroad.com/blog/how-to-make-responsive-website-design-important-tips-to-succeed
Hey Kevin,
Thanks for a great and very clean video. I learned a lot. There is a thing a that I want to ask you:
1. Which plugin have you downloaded to be able to use e.g. the "p*2" shortcut to get to paragraph tags? Emmet? If so, I have downloaded it already, so I do not think it can be that.
Best regards,
Victor
It is Emmet! I type in something like p*2, then press tab.
Thanks! I have problem getting the image for the main to show up. I do the exact same thing as you, but it just doesn't wanna show up on mine. What to do?
And another question:
How do I actually make my links in the nav bar work? I mean, I have files for them saved on my PC (e.g. for the "Home" I have my tag "). But they just don't wanna work. Can you tell me precisely how to do that?
Thanks for grea tutorials!
Cheers!
Victor
Nice Tutorial series! I would like to know if the design template is prepared according to the standard web page sizes.
Depends what you mean when you say standard sizes... There aren't really any that are "standard". The max-width is, more or less, but the media queries are where they need to be for this layout.
thanks a lot
Thanks alot!!!