My solution for "News homepage" challenge

Community feedback

• 

  Maxime•430

  @maxime927Posted about 2 years ago

  I can propose another way for your burger menu, by using a iconfont for the differents pictos ( menu and menu-close), in that way, you'll be able to change only the class of the button to have a different icon in each case. You can do it on web or with gulp by compiling all svg icons you have in an iconfont usable in all the website and directly loaded at the start of the navigation.

  Pay more attention to the design because the burger menu dimensions are not respected. ( same for the rest of the design [spacings, font-size, mobile menu] )

  I can advise you to use the google extension : PerfectPixel to compare your integration with a jpg/png of the design, with that, you can assure you that you respect totally the designer's expectation. :)

  Marked as helpful

  0

  ---

  

  Catalin-Marius Untea•290

  @unteacatalinPosted about 2 years ago

  @maxime927 Hi! Your feedback is highly appreciated! I've replaced my burger menu with font awesome icons. I have no experience working with gulp; so, compiling all svg icons in an iconfont is something I've never done. I'll search some tutorials on gulp or read the official documentation. Just one question: gulp can be used with vanilla javascript, or I'll require a framework? I used PerfectPixel to compare my implementation with templates. I've done some adjustments. It's not perfect, considering that I'm not working with Sketch or Figma design files. Thank you! :)

  0

  

  Maxime•430

  @maxime927Posted about 2 years ago

  @unteacatalin I always use gulp by default on my starter pack before using jquery and other framework, i saw a gulpfile.js prepared in "vanilla" here (https://gist.github.com/andrewmullican/0d397901ddf4aea83e02) but i didn't tried this code yet sorry.

  But if you prefer to not use frameworks, you can generate your iconfont with this website : https://fontastic.me/. ( i used it a lot of times ) In that way, no need to add other scripts to your sources :)

  I have the free account on FrontendMentor too so i understand your situation with jpg design files. What I do is create a Sketch or Figma file with my jpg/png files and check every space by creating a rectangle, it is approximative but it closer to the result expected and at the end i use PerfectPixel to adjust everything.

  You're welcome !

  Marked as helpful

  0