Skip to content
Submitted about 5 years ago

mobile first (CSS-Grid, Flexbox + SCSS)

Alex•1,090
@AlexBueckig
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Bookmark landing page
  • HTML
  • CSS
  • JS
3intermediate

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

  • Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    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
    @AlexBueckigPosted about 5 years ago

    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
    @AlexBueckigPosted about 5 years ago

    @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
    Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    @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
    Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    @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

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