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

Fluid Landing Page with HTML, SCSS & additional hover effects

#accessibility#bem#sass/scss#gulp

@dragoshcode

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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?

Community feedback

ViyanMd 0

@ViyanMd

Posted

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

1

@dragoshcode

Posted

@ViyanMd That's a nice advice, thanks mate!

0
ViyanMd 0

@ViyanMd

Posted

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

1

@dragoshcode

Posted

@ViyanMd yeah, but the thing is here I can't look through other people code on the project I'm currently working because FEM turns this stuff on only after I've submitted the project, so usually I search for the project on youtube :) And pretty every FEM project has been made at least by one youtuber And yes, sorry about the hamburger menu, I'm focusing rn on SCSS only, will jump in JS soon :)

0
ViyanMd 0

@ViyanMd

Posted

@dragoshcode I assume the project is already submitted. Otherwise I wouldn’t be able to see it.

1

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