There are hundreds of digital devices in today’s world. Users expect that no matter what device they are using, your web app will look good. This doesn’t happen automatically and is the topic of this video. In this video, I’ll show you what responsive web design is all about, and how to simplify it so it doesn’t add stress to your development workflow.
🔗 Lesson specific links 🔗
Pricing Card Starter – https://codepen.io/zg_dev/pen/yLVpLPY
Pricing Card Mobile-First Solution – https://codepen.io/zg_dev/pen/JjbaMGQ
Pricing Card Desktop-First Solution – https://codepen.io/zg_dev/pen/vYyzpgG
🔗 Fullstack Roadmap Series Links 🔗
Github repo – https://github.com/zachgoll/fullstack-roadmap-series
Series Playlist – https://www.youtube.com/playlist?list=PLYQSCk-qyTW37zDPzcAyzCsnypFQrhUcq
🐤 Hit me up on Twitter – https://twitter.com/zg_dev
👉 Mailing List – https://lists.zachgollwitzer.com/learn-to-code/
_______________________________________________________________
📃 Video contents
________________________________________________________________
0:00 What is Responsive Web Design?
14:50 Intro to Media Queries and Breakpoints
19:15 What breakpoints should I use?
26:45 Media Queries In-Depth
35:57 80/20 Guide to Responsive Design
42:55 Order of your Media Queries Matter!
46:55 “Mobile-First” vs. “Desktop-First”
52:28 A Responsive Design Checklist
54:41 Code Challenge
_______________________________________________________________
💻 My Gear
________________________________________________________________
👍🏼 Software Development Essentials:
Dual LG Monitors – https://geni.us/lg-monitor
Bose QC35s – https://geni.us/bose-qc35
Monitor Arm – https://geni.us/monitor-arm
Mechanical Keyboard – https://geni.us/mechanical-keyboard
Logitech Bluetooth Mouse – https://geni.us/logitech-mouse
🖱 Premium Software I Use
Adobe CC (Premiere Pro, Photoshop, etc.) – https://geni.us/adobe-cc
Tubebuddy – https://geni.us/youtube-tools
🎥 My Filming Gear and Tools
Camera – https://geni.us/canon-6d-markii
Main Lens – https://geni.us/canon-16-35-lens
Fluid Head Tripod – https://geni.us/neewer-tripod
📗 My Favorite Programming Books
Code Complete – https://geni.us/code-complete
Code: The Hidden Language… – https://geni.us/code-book
Head First Design Patterns – https://geni.us/head-first-design
Head First OOP – https://geni.us/head-first-oop
The Elements of Computing Systems – https://geni.us/nand-2-tetris
The Phoenix Project – https://geni.us/phoenix-project
_______________________________________________________________
👉 Connect With Me:
_______________________________________________________________
Twitter: https://twitter.com/zg_dev
Website: https://www.zachgollwitzer.com
LinkedIn: https://www.linkedin.com/in/zachgollwitzer/
_______________________________________________________________
** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate a sales commission for me. Thanks for supporting the channel!
––––––––––––––––––––––––––––––
Mythology by MusicbyAden https://soundcloud.com/musicbyaden
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Free Download / Stream: http://bit.ly/_mythology
Music promoted by Audio Library https://youtu.be/e48pGUx_cxU
––––––––––––––––––––––––––––––
#learntocode #100DaysOfCode #fullstackroadmap