Skip to content
OverviewSolutions
6
Comments
4
Justin
@DeusMalsith

All comments

  • Justin•165
    @DeusMalsithSubmitted over 3 years ago

    I enjoyed doing this challenge and learned a lot but it definitely proved to me that for my next challenge I'll definitely be planning how I lay out my HTML structure. I ran into a bunch of problems that required hacky fixes and, unfortunately, unoptimized CSS (probably could cut the CSS by a third at least if I went back and refactored) just to meet the goal. Mobile was the easiest but the styling up the desktop design is where I ran into issues that will require some refactoring.

    I do have a question for everyone in the community though: What do you all use for getting your design as pixel perfect to the final design? For a while I've been using GIMP with the measure tool but I honestly hate using GIMP. And while Krita is amazing it has a terrible measurement tool for this use case. I looked into some chrome extensions for getting measurements but I just haven't found anything great.

    Mobile first design utilizing Flexbox, Grid, JS, and transitions

    2
    Justin•165
    @DeusMalsithPosted over 3 years ago

    Huh, I thought lazy loading images via HTML was supported. I guess not. But that's a relief because I was surprised to see that many HMTL issues.

    0
  • Justin•165
    @DeusMalsithPosted over 3 years ago

    Looks good!

    My only complaints are that each link I click shouldn't open a new tab and that some of your design doesn't reflect the solution design (mostly font-family and size/weight).

    2
  • Travis Ricks•100
    @travisricksSubmitted over 3 years ago

    I'm curious if people hardcode the different sizes (font-size, padding) for the two breakpoints or if they use a fluid/percentage solution? Currently, I'm hardcoding but wondered if there was a percentage way to do it.

    Mobile first using CSS Grid

    2
    Justin•165
    @DeusMalsithPosted over 3 years ago

    Instead of hard coding your font size with pixels use rem and em.

    0
  • Justin•165
    @DeusMalsithPosted over 3 years ago

    You can change the color using the filter rule. You'll need to initialize it with sepia though in order to change the color with hue rotate.

    https://developer.mozilla.org/en-US/docs/Web/CSS/filter

    You could probably also use the ::before or ::after pseudo-elements to create a transparent color over the image. But you'd still need to use filter in order to get your brightness and contrast close to the design.

    1