Starting a new project is always fun! In this one, we’re starting with nothing and building out a Frontend Mentor project from scratch, looking at potential problems we can run into and how I would tackle them.

This is part 1 of this series, which will span the next few weeks.

🔗 Links
✅ The Frontend Mentor project: https://www.frontendmentor.io/challenges/manage-landing-page-SLXqC6P5
✅ Andy Bell’s reset: https://piccalil.li/blog/a-modern-css-reset/
✅ Josh Comeau’s reset: https://www.joshwcomeau.com/css/custom-css-reset/
✅ More on prefers-reduced-motion: https://web.dev/prefers-reduced-motion/

⌚ Timestamps
00:00 – Introduction
00:51 – How I am going to approach this series
02:18 – Analysing the layout
08:12 – Getting started with Vite
11:49 – Making sure everything is working
13:40 – Adding a reset
20:18 – Setting up custom properties
43:01 – Creating utility classes

#css

—

Come hang out with other dev’s in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

—

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

—

My editor: VS Code – https://code.visualstudio.com/

—

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

—

And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!

source

22 Comments

  5. one question… if i setup the files like reset.css, designstystem.css and common.css… so the sequence we called them in the header can effect performance? or it is possible something not works?

  11. 8:12, The 1, 2, and 3 bullets/titles are fine in the desktop version but then the mobile has a pale orange as the background title which is STRANGE to me. Everything has a purpose. What is the point of putting a background to the tile on those? That makes it inconsistent! You either have both with the background or just get rid of it. Also, the desktop version uses the numbers like bullets but then on mobile put them side by side with the title. Things like that need a reason to be, you just don't drop things in the design for the fun of it. If you apply for a job and show this design, the interviewer will ask you precisely what's going on with that. 😉

  15. I am a beginner and really liked this detailed specifications of properties but yeah I felt a little overwhelmed as well but overall it's good 🙂 I think going through the basics again would be a better choice for me though 😄

  19. So many freemium tools out there, it would cost an arm and a leg to subscribe to a fraction of them on a monthly basis. Perhaps some entrepreneur could negotiate with the most popular and produce bundled deals for pro access…

Leave A Reply

Please enter your comment!
Please enter your name here