Summary
Keywords
Full Transcript
Frontend Mentor Project Link: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H Final Code: https://github.com/procodrr/css-projects/tree/main/00_qr-code/final-code CSS Projects Repo: https://github.com/procodrr/css-projects Bootcamp Repo: https://github.com/procodrr/frontend-bootcamp In this video, we'll build our first CSS Project from Frontend Mentor. We'll learn the exact thought process of a good UI Developer even before starting to code. Additionally, I've given a quick assignment at the end of the video. I hope you'll complete the challenge and move a step closer to become an awesome Frontend Developer. 📖 Chapters 00:00 - Introduction 01:15 - Go To Frontend Mentor and Select a Challenge 06:10 - Start the Project 06:55 - What is Inside Design Folder? 07:35 - How to Preview Readme File in VS Code? 09:35 - Quick Tip To View the Design with LocalHost 13:16- Install Measure-it Chrome Extension 14:37 - Create a Container and Style It 16:18 - Pick the Color Using Color Picker Extension 17:29 - How to Give Box Shadow - The Right Way 21:37 - Easiest Way to Center our Div 28:21 - Manipulate the Box Shadow Using Dev Tools 32:03 - Give Border Radius 32:34 - Attach an Image and Fix Styling 34:55 - Add the Text and Style It Accordingly 38:45 - Fix the Text Color 41:51 - How to Add a Custom Font Family 43:04 - Quick Assignment For You (HTML and CSS Only) 44:25 - Conclusion 44:50 - Outro If you have any doubt you can ask in comment section I will reply to each and every question or you can reach out to me directly on my social media handles mentioned below. Social Media 🌐 LinkedIn: https://www.linkedin.com/in/anurag-singh-web-developer/ 🌐 Instagram: https://www.instagram.com/procodrr/ 🌐 Twitter: https://twitter.com/anuragsinghbam 🌐 Telegram: https://t.me/+bq8CBsPL3Wc1MjU1 🌐 Discord: https://discord.gg/dMe9mer9B3 🌐 Portfolio: https://anuragsinghbam.com/ Music by geoffharvey from Pixabay
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
