Responsive Design – HTML And CSS Tutorial Step-By-Step!
Last updated on December 30th, 2018. Posted in HTML & CSS.
Responsive design -- Designing for the responsive web is hugely important. And it's all handled by something called CSS media queries. In today's tutorial, you'll get a complete, step-by-step, hands-on look at responsive web design. You'll learn about mobile first design, CSS media query breakpoints, and discover exactly what responsive web design is. Let's dive into it!
Here are some additional links and resources mentioned in today's tutorial. Enjoy!
- To follow along with this HTML and CSS tutorial, make sure to grab your free project files.
- Domain Name: The first thing you'll need to do is register your website's domain name. I strongly recommend using NameCheap.
- If you'd like a more detailed look at how to register your domain name, I've gotcha covered in Easy Steps To Set Up Your Business Website Address Using NameCheap. You might also find How To Point Your Domain Name To Your Web Hosting Hub Account helpful.
- Web Hosting: Next, sign up for reliable, cost-effective, and secure web hosting. In this tutorial, I'm using Web Hosting Hub -- a great web host if you're just getting started. Alternatively, SiteGround is another great web host. I've used both for years.
- If you'd like a more detailed guide for signing up with web hosting, take a look at How To Set Up Simple, Easy, Low-Cost Web Hosting With Web Hosting Hub and Setting Up Rock Solid Web Hosting That’ll Grow With Your Needs Using SiteGround.
- Code Editor: Since we'll be coding everything by hand in this tutorial, you'll need a good code editor. The good news is, most are free for both Windows and Mac users. Take a look at Brackets, Sublime, and the one I use in today's tutorial, Atom.
- For more on code editors, you might be interested in The Best Code Editors For Online Business Owners.
- FTP Application: In order to upload your work to your live web server, you'll need to use an FTP application. In today's tutorial, I use Cyberduck (free for both Windows and Mac).
- You might also want to take a look at The Best FTP Applications For Windows Users and The Best FTP Applications For Mac Users.
- If you'd like more detail on how to connect to your website using FTP, take a look at Connecting To Your Web Hosting Hub Hosted Website Using FTP and How To Connect To Your SiteGround Hosted Website Via FTP.
- Royalty-Free Photography: The photos used in today's tutorial are royalty-free and came from Unsplash.com. For more royalty-free images, check out Pikwizard.com or Pixabay.com.
- If you'd like a deeper breakdown of HTML and CSS, what they are and how they work, take a look at A Crash Course In HTML, Understanding How CSS Works, and How HTML And CSS Work Together.
- Finally, to help you along, grab your free HTML Quick Reference Card!
Hope you enjoyed. See ya next time!
Get my free course, which gives you all the fundamental building blocks you'll need to get your website up and running in an easy, step-by-step format. Or, check out some full courses to take your skills even further. Either way, you're on the right track here, so let's keep going!