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

CSS Grid, Flexbox, SASS (BEM)

Patrick 800

@PPechmann

Desktop design screenshot for the Art gallery website coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Happy to have completed another challenge :)

Takeaways:

  • I further learned how to position elements with CSS grid, as I mainly used grid-areas, which is tricky for this challenge.

  • Again realized how important it is to plan the entire project from the beginning, even down to the smallest detail. I spent unnecessary time rearranging code, because of a lack of attention to detail before I started coding.

Questions to the community:

  • If there are ways to structure the code more efficiently, I would appreciate if you let me know.

  • Do you code all mixins (SASS) before starting to code the layout or do you create them on the go?

  • What do you think is a better approach?: Coding the entire HTML markup and then move to styling or starting to code parts of the HTML (starting with the header, for example), styling it and moving on to the next section?

Thank you and have a great weekend! Happy coding :)

Patrick

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Greetings PPechmann

Well, my approach when coding is to deal with the HTML structure first but taking into considerations the general layout of the work at hand. That gives me a hint on which elements should be siblings as an example.

  • the h1 heading element effects can be achieved by using css mix-blend-mode on the h1 element itself, that is you do not need the extra spans that you used . Try a value of mix-blend-mode: difference
  • click events should be associated with interactive elements like the anchor and button element not an image. The arrow image is just decorative and should have been a child of the button with the click handler on the button. The image should not have a click handler.
  • the anchor elements in the footer elements should have readable text for assistive technology users.
  • the site has to be responsive , check from 376px onwards , i cannot view properly all the content and also take note that the sizes mentioned in the designs are by no means refer to media queries but are there to indicate what your site should look like at those given sizes.

Happy coding

Marked as helpful

0

Patrick 800

@PPechmann

Posted

Hi @ChamuMutezva!

Thank you for taking the time to leave a very good feedback, I appreciate it.

Glad you mentioned the blend-mode, as I already doubted that the span approach would be the best.

I was aware of the responsiveness, but I decided to just finish the dimensions mentioned in the challenge as I do not learn much by just adjusting code through media queries and decided to save time and spend it with some additional learning :)

Thank you again and have a nice weekend :)

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