Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using SASS, Grid and Flexbox

P

@claire-ca

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found this the hardest of the newbie challenges so far - I rebuilt it at least 3 times using different techniques! Obviously I would be grateful for any feedback on improvements I could make. One thing I'm struggling with is trying to use clamp() for font-size. I tried using it in my code but at times it was making the font-size a wildly different size than the design, so I took it out. Does anyone have any advice or good resources that you used to understand clamp() for font-sizing? I have managed to use clamp() for width, it's just font-sizing that is giving me some trouble!

Thanks!

Community feedback

@bradleyhop

Posted

I agree -- I rebuilt this project twice. I really don't think it's a newbie project haha.

I appreciate your question about CSS clamp() method. I actually didn't know about this feature and it led me to do some research. I usually set my widths in 'rem' measurements and make adjustments with media queries as I work up from smaller to larger devices when I code. clamp() seems dope, and I'll definitely give it try on my next project.

I did run across this article about font sizes and clamp(): https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case Under the "For those who don't mind edge cases" heading, the author has a generator for your fonts and clamp()!

I like the animations on :hover. Nice touches. Also, I like the way you structured your SCSS files. I often feel lost when it comes to structuring a project, so it was nice to look browse your clearly written code.

Marked as helpful

1

P

@claire-ca

Posted

@bradleyhop I'm glad that I've not been the only one to find this newbie project difficult haha!

Thank you for your kind comments about my project and I'm happy that looking at my file structure has helped you out! SASS file structure confused me for a while too, but I've recently been doing a Udemy course on Advanced CSS and SASS which has been great for helping with that. Here is the link to it if you're interested - I got it when it was on sale for like £9.99 or something. Advanced CSS and Sass.

Haha I actually found out about clamp() the same way, someone else mentioned it in their solution comment and I had no idea what it was either! What a great find in that article! Thanks for sharing, I've looked at many articles about it so far, but not this one and this is the best one I've seen. Really good explanation of it. Hopefully I'll be able to implement it in my next project too - with the help of that generator.

1

@bradleyhop

Posted

@claire-ca Thanks for the class suggestion. I'll keep my eye out for when Udemy has its mad sales ;) Funny-- I feel that Javascript gets pushed so hard when learning web dev that CSS is always like an afterthought. That's why I like Frontend Mentor: it really shows me how much time I spend on styling and where my weaknesses are. Seeing the answers of others who complete the challenges is a nice way to learn (reminds me a bit of Code Wars in that respect). Anyway, thanks again.

1
P

@claire-ca

Posted

@bradleyhop Haha, rule number 1 of Udemy - never buy anything unless there is a sale!

I agree about CSS being an afterthought for most people, but you definitely need to put a good amount of time in to really learning it! Frontend Mentor has been great, if I was just practicing with my own designs I'm sure I would have just stuck to layouts I knew how to do already and not push myself with these awesome designs here.

I haven't really tried Code Wars myself, but it sounds like something I should do - I need to get my JavaScript skill level up!

1
Saman 120

@samanthewebdev

Posted

WooW! Its amazing. In how long did u make it, and did u make it all my ur self without help of video tutorial? It awesome tbh looks like its was very hard work :)

0

P

@claire-ca

Posted

@saman2620 Thank you so much! Yes, I did it by myself. I used to watch video tutorials for help a lot, but now I'm at the point where I read articles to help me figure things out. This one took me a few weeks to complete because I kept having to rebuild it and I was learning new things along the way too. These are the types of challenges I learn the most from though!

0
Saman 120

@samanthewebdev

Posted

@claire-ca ohh cool! How long have u been in tutorials. Actually i am a beginner i just started to practice and i can't wait to be just go pro hehe. So out of curiosity i'm just asking questions to ppl to understand things better ;)

0
P

@claire-ca

Posted

@saman2620 I've been doing tutorials for too long! My advice is once you've learned the basics, build lots of projects, like the ones on here. You can still use tutorials to help you out of course, but you'll learn the most by building things and figuring things out yourself.

I've actually built a couple of professional websites while I'm still learning, just basic ones for family and friends that happened to need them, but I got paid for them, so you can definitely start earning money from your skills fairly quickly.

Hope this information helps and good luck with your coding journey!

1
Saman 120

@samanthewebdev

Posted

@claire-ca thank u so much yeah its helpful i exactly thought this first that after some practice i'll try to put this effort in real work that's look fast and affective way to learn but i see many ppl just only focus on becoming professional first even they seems ready but they hesitate to start working and that was making me lil nervous about my thoughts thanks again now ik it will be worth and wish u good luck as well with ur journey :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord