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
Cannot read properties of null (reading 'code')
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

mobile first (CSS-Grid, Flexbox + SCSS)

Alex• 1,090

@AlexBueckig

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


So... Since there were a few svg-icons on this site which change colors depending on e.g. hover state I'd like to know what the best practice would be to do that.

I created several versions e.g. of the logo "colorful logo + white text" and "white text + white logo" to exchange them when needed using classes with different background urls.

Would it be better to copy + paste the whole content of the svg into the actual html and use css to change the fill color? Even though it means having the same code in the html-file several times?

Community feedback

P
Matt Studdert• 13,611

@mattstuddert

Posted

Hey Alex, great work on this. Your solution looks awesome and functions really well vs the project brief.

For the SVG icons, I would go with the embed option personally. This lets you treat the SVGs like any other HTML element and manipulate the styles using CSS, as you mentioned.

0

Alex• 1,090

@AlexBueckig

Posted

Thanks a lot for the answer! 😃 I'll give it a try on my next challenge!

Btw... I'm having another, kinda unrelated and maybe a bit vague question I was asking myself lately. If I were a Junior Developer having to code this website, what would be an appropriate timeframe to finish this project?

I'm always curious since I'm looking for a job in frontend development right now and I kinda struggle in judging what my current experience level is and if I need to improve on getting things done faster.

0
Alex• 1,090

@AlexBueckig

Posted

@mattstuddert It was a vague question anyways... So I didn't expect anything particular out of this. 😅 But it took me about - give or take - 10hrs aswell.

This was by far the most complex project I did recently... In the end it actually took me longer than I expected... Had some hiccups with some css classes because they were too ambiguous and I needed more specified selectors. Took me quite some time to refactor some parts. But I definiately figured out what went wrong and how to circumvent these issues in future projects! 😃

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@AlexBueckig yeah, it's a tough layout compared to the other challenges. You did a really good job! Having this one under your belt will definitely help you in future projects!

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

@AlexBueckig that's a very tough question to answer because it will vary massively based on experience. But for a junior, it might fall in the 8-10 hour range. But it would also depend on how polished the final solution was, so could be longer, but could also be faster.

I would recommend continuing to build projects and reviewing your workflow with each new site created. Asking questions like:

  • What areas took the longest and why?
  • Did the overall workflow feel disjointed? Or did it have a good flow?

As you build more websites you'll find a good rhythm and begin to build faster and faster.

I hope that helps, sorry for the slightly vague answer! 😅

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