Skip to content
OverviewSolutions
9
Comments
4

Basile Raiwet

@BasileRaiwetBrussels, Belgium175 points

Junior fullstack developer. Actually working with React on web applications for large scale companies. Here to improve my front-end skills and to exchange about that.

I’m currently learning...

Next / Gatsby / hard parts of javascript

Latest solutions

View more solutions

Latest comments

  • Basile Raiwet•175
    @BasileRaiwet

    Hi Zana ! Great work ! here are some ideas to improve your solution :

    • the gallery section is a bit tight on my 13 inch device (boxes are touching each other). Maybe you can put some margin between each boxes (or use gap but gap is not well supported actually). If you want to try, you can use css grid to build this section. I think it will be easier.

    • you define your section width with width: 80% on your .frame class. The problem is that your container (and potentially his children) will extend too much on large screens. In most cases, it's better to set the width with a strict value (like on this website). In this way, the content will be centered and your website will be readable on any screen size

  • Basile Raiwet•175
    @BasileRaiwet

    Hi Samyr !

    Great work ! I just see some points you can improve :

    • About semantics : avoid to use many h1 on the same page. h1 and h2 are here for the title and subtitle of the section. So It's better if you use h3 (or other, depend of the situtation) for the boxes titles
    • about the container width : design is based on a 1110px grid and I think it's better to limit the width of the container to this size because if your solution stretch to 80% of the viewport with (like it is actually), the result could be really different on larger screens. (As an example, look how this page container is defined. It's, I think, the most common way to define container width)
  • Basile Raiwet•175
    @BasileRaiwet

    Hello Dominique !

    As Samyr said, check if your work is up to date on github and then re-deploy to vercel.

    I also have some recommendations for you :

    • Avoid relative position for your boxes. This solution is not really flexible. Instead, you can use flexbox or grid (grid is super useful and make positioning super easy for this exercice)
    • You can set the image position without using a margin or padding. (check how position relative / absolute work together in the child / parent relation.. It's super useful)
  • Basile Raiwet•175
    @BasileRaiwet

    You can easily improve this solution by adding some padding / margin in order to fit with the design. Also, look at the design file to find correct font-size for your headings / content. don't forget details like border-radius and box-shadow.