Skip to content
Submitted over 3 years ago

Fluid Landing Page with HTML, SCSS & additional hover effects

accessibility, bem, sass/scss, gulp
Dragosh Gheceanu•140
@dragoshcode
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey mate!

  1. Is there another option to make inserted through CSS background-images responsive, beside the method with a lot of media queries to give an explicit size whenever images stretch?

  2. As you can see I am using pretty much media queries for setting the padding for paragraphs, that's mainly because of clamp(), but also just because of the design - so is it a bad practice and does all these padding media queries cut something out like page speed, load in a website etc?

3.When doing the last part of the website with all the responsiveness and testing stuff, I am very concerned and waste a lot of time about the website looking the same as in given design layout (the figma file). Mainly for the paragraphs to be on the same lines as the another paragraph on that line, or for example the heading to be on 2 rows as in the mobile layout design, not on 1, so I'm playing over a lot with these small stuff. TL;DR: Is it worth to make it all almost perfect, or am I overthinking on it?

  1. What do you think about my git commits - are they too less, and should I write the message in a more descriptive way maybe?

  2. What would you also advice regarding to responsiveness, or to some bugs on the site?

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • ViyanMd•0
    @ViyanMd

    P.S. Overthinking might be a problem, but if you know you can do better, then simply do. Write down a list of things you want to fix, fix them and forget about 'em :)

    Marked as helpful
  • ViyanMd•0
    @ViyanMd

    Hey! Haven't looked through the code, but I've finished this project a week ago or so and can say that flex with all it's functionality works great here. Some media queries are inevitable, but if you feel like there's too much, you're probably right. Flex allows you to make the website much more responsive if used right. Anyways, when I doubt my decisions, I usually look through other peoples solutions to find both worse and better solutions and after that get back to my own code with fresh and usually better ideas. In regards the bugs: hamburger menu doesn't work for me (iPhone 13)

    Marked as helpful

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