Responsive Website Design with TailwindCSS for Beginners | TailwindCSS Tutorial

This tutorial is aimed at beginners who are new to #TailwindCSS and Responsive Web Design.

If you open up any website requirements list, there is a specific requirement that you won't be able to avoid. And that one is that it has to be: Responsive.

Responsive Web Design is about using #HTML and #CSS to automatically change the looks of a website to make it look good on all devices (desktops, tablets, and phones).

And why is this important?

According to website traffic data, over 50% of the global web traffic comes from mobile users, whereas 10 years ago this was just shy of 4%.

So, due to this rise in usage of handheld devices, it became more and more important that websites were still functional and pleasant to the eye on all different device screen sizes. Hence, the surge in popularity of responsive web design.

This is usually done by writing CSS Media queries to cater to the needs of specific screen sizes, but this process is long, tedious, and kind of hard to maintain. TailwindCSS framework simplified the process for us, by encapsulating all necessary media queries, into easy to use utility classes variants that you can use directly in your markdown.

Let's see how we can turn our previous TailwindCSS project, which is not incredibly responsive, and make it look good on all devices with just a couple additions of TailwindCSS variants.

Chapters 0:00 - What is Responsive Web Design and its importance? 1:20 - Intro 1:45 - TailwindCSS Documentation 3:45 - Hands-on Coding 12:39 - Outro

• IF you like this video, please make sure to click the like button and share this with all your friends! 👍

• ANY comments or ideas? Share them with me down below! ✍

JOIN OUR NEWLY CREATED DISCORD CHANNEL 📘 Discord: https://discord.gg/2bC34YRP

MY SOCIAL MEDIA 🎥 Twitch: https://www.twitch.tv/igorsilveira 📷 Instagram: https://www.instagram.com/igorasilveira 🐦 Twitter: https://twitter.com/igorasilveira

MY FILMING GEAR: 📷 My Camera - Sony Alpha 7 II - https://amzn.to/3ihZGvW 🎤 My Microphone - Trust Gaming GXT 258 Fyru - https://amzn.to/3yjrF3S 💡 My Lighting - Neewer 2-Pack LED - https://amzn.to/3A1XBKK

MY CODING GEAR: ⌨ My Keyboard - MX Keys by Logitech - https://amzn.to/3xj1glq 🖱 My Mouse - MX Master 3 by Logitech - https://amzn.to/3ijdN4g 🎧 My Headphones - Sony MX1000XM3 - https://amzn.to/3jcTYuG 📺 My Monitors - 1x Dell U2417H and 1x Dell P2419H - https://amzn.to/3loKNKm

COMPUTER SPECS: (MacBook Pro 16'' 2019) Intel i9 2,3 GHz 8-Core 16 GB 2667 MHz DDR4 Intel UHD Graphics 630 1536 MB

(Custom Built PC 2017) AMD Ryzen 1500X 3,5 GHz Quad-Core - https://amzn.to/2WQYcAJ Team Group DDR4 2400MHz 16 GB - https ... https://www.youtube.com/watch?v=f6W6HeNCLps