Submitted 4 months ago

Huddle landing page with Sass

sass/scss

IO•710

@i000o

A solution to the Huddle landing page with a single introductory section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that this page is a bit more populated than the other HTML & CSS only challenges, so it took a bit more breaking down, but I'm happy with how it looks. I did well on the active states, I have an accurate eye for design and I did this quite quickly considering how many decisions there were to make on this one.

I want to be mindful of my Sass nesting this time. Thankfully, on this challenge, I had the opportunity to use branching in Git for the first time to test out a way to improve the nesting in my Sass code. (I was using it too much and in the wrong ways.) This was really useful, although took some time. Learning new git commands always feels good, especially when you have a more conceptual understanding of what they're doing.

What challenges did you encounter, and how did you overcome them?

I had a hard time with the bg-img, again. I'm not comfortable with these yet, although this one took me less wrangling than in challenges prior. Something I'm not clear on is how to stop it from cutting off where <body> ends as I don't put my <footer> with the attribution inside of <body>. Separate from this, on scroll, my bg-img cuts. This has happened before and I don't know how to address it - Help appreciated.

As I said, I made a new branch for the first time to fix the nesting in my Sass. I was using nesting too keenly and not with purpose. It can cause errors in that way, and now I understand more how it impacts my output.css file.

What specific areas of your project would you like help with?

Please help with background-image. It cuts off on scroll. Why?
Are Font Awesome the only way people use social icons? Why do they name their classes fa fa-instagram for instance? How can I refer to the class directly when it has a space in it? I had to use nth-child() to get around this. It was annoying.
I know the Responsiveness can be improved between Tablet - Desktop, but I'm not sure how to go about redesigning the page proportionally to flex down/up nicely. I'd like help with this if anyone has ideas, I'll also look at how other devs responsively designed.
Feedback on Sass as per. Was there anything more I could've used? An @mixin on :active maybe for repeated declarations? I'd like to make the most of it.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on IO's solution.

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