Meet_landing_page - some tablet vs desktop mix in 1024 - 1330/px

Community feedback

• 

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted 6 months ago

  Hi, congrats for completing the challenge ! I just finished it as well and yours was picked for a review :)

  I like the stuff you did for the image optimisation it's great ! I'll pick some ideas to add in my personal notes.

  Does the solution include semantic HTML? I don't have much to say on the html structure but maybe some part could be simplified.

  • Your shape element structure looks quite complicated to me. It could be just a div with a before pseudo element of 1px width.
  • Still about the shape element, as it represent the number linked to a section, I would add the second one inside the footer section markup for more logic.

  Is it accessible, and what improvements could be made? Currently the layout is breaking if the user changes the default browser font size. If for example I increase the font-size to 30px the layout should present the mobile version zommed in. This may be caused by your media queries set in pixels instead of relative units. How to "make a site responsive" and use Media Queries well

  Is the code well-structured, readable, and reusable? There is quite some work on the file structure and folder structure for sass. I like it. I might take some idea here for my next projects :) however, I find it a bit difficult to navigate and debug. Maybe some more information on the tooling can help. In your README you mention npm init, gulp, autoprefixer etc.. it all sounds great but there is no package.json in your folder and no information on which package to install. This can be improved for better collaboration with other developers.

  Does the layout look good on a range of screen sizes? The hero images are cropped if you test on larger screen. Image is cropped too on mid size screen and small screen. I spent some time trying to find the best solution for this. You can check my submission for this challenge.

  I used a wrapper larger then the container to allow the overflow of the images. the container itself has overflow hidden but will get wider on larger screen and the images will be visible without any crop. I don't know if it's the best way for this, take it with a pinch.

  Does the solution differ considerably from the design? The solution looks close to the original design and respect the design intention, good job !

  I hope you find my comments helpful for improving your solution. Don't hesitate to reach out if you have any questions.

  Happy coding !

  Marked as helpful

  0
• 

  Mirjax2000•680

  @Mirjax2000Posted 5 months ago

  I checked your project as well. Looks perfect to me. But, nothing is perfect until its perfect right? check this video https://www.youtube.com/watch?v=_-aDOAMmDHI&ab_channel=KevinPowell

  sometimes you are using ems, sometimes rems.

  what i understand is : use rem units only for fonts and em units for margins, paddings and other sizes. Of course you have to check what parrent is your font. I made function for it in sass. it counts for me. i call it em function. it is target pixels / content pixels = em value. In practise i want my font-size in H1 elemt for example size 32px, first i set it to rem 32 / 16 = 2 rem. And if H1 elemnt has some margin or padding i set it with em units. In my function i write it like this. padding: em(32, 16) and my function automagicly set it to 2 ems. But i cant explain it very well better check the video. and if you check my main.scss i always add commentary text what size i set for font size, to better calculate em units and of course lots of reading in developer console. or if you have different opinion you can share it with me. thx for your time

  1
• 

  Mirjax2000•680

  @Mirjax2000Posted 5 months ago

  Excellent review, thx. I have to test it like you said. Yes i have mediaqueries in pixels, yes its better idea to use relative units. right. I never tested at 30px default font size.

  i hide my package.json. but i can save it to the repo. Give me a sec. there in scss folder is debug file -> scss/partials/_debug.scss and if you change in _general.scss $debug:false to true, it will show you all bad things. But you can check in the debug file how it works. I learned some thinks from kevin powel about sass. You can show me some your project. Id like to share knowlegde with you. Here is my last project what i did from frontend mentor.https://mirjax2000.github.io/password-generator/

  1
• 

  Mirjax2000•680

  @Mirjax2000Posted 5 months ago

  Do you wanto some premium challenges?

  0