Not Found
Request path contains unescaped characters
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

Intro Section With Dropdown Navigation (HTML | CSS | JS Vanilla)

Cheosphere 1,040

@Cheosphere

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


...made with a lot of love 🤘🏻🙂

Community feedback

@mstrick994

Posted

Great solutions as always. I think I had a hard time with the arrows transitioning and making the sidebar menu have a nice dropdown transition and having two menus open at the same time so I just focused on the toggling aspects in the end on mines. I also like how your page transitions to relative screens.

1

@loaysh2010

Posted

@Cheosphere

You have great work. Can I ask how you can make the pages pixel-matched with the design?

1

Cheosphere 1,040

@Cheosphere

Posted

Hello @loaysh2010 , I have some knowledge of graphic design, what I do is carefully examine the "desktop-design.jpg" file, using photoshop or illustrator, so I can measure the sizes, margins and padding of each element, and apply it to my development to achieve a result almost identical to the UI design that they give us in the project files folder. It's a bit stressful and time-consuming work, but I like seeing the end result.

2

@hiki-7u7

Posted

te quedo mejor que el original xd

1

Cheosphere 1,040

@Cheosphere

Posted

@hiki-7u7 Muchas gracias por tu comentario, me obsesiono con intentar que quede lo más parecido posible al diseño UI 😆

1

@hiki-7u7

Posted

@Cheosphere jaja yo tambien pero aveces no sale :'v

1
Cheosphere 1,040

@Cheosphere

Posted

@hiki-7u7 jajaja es verdad, ¿pero sabes?, me he dado cuenta que en ocasiones, la captura de pantalla que genera esta web, con la cual compara tu solución con el diseño UI, a veces es diferente a la que uno descarga y obtiene en la carpeta de archivos del proyecto, es un detalle curioso, porque yo comparo con photoshop a nivel de pixel, los márgenes, tamaños, espacios, etc. y los dejo perfectos, muy calcados a esa imagen del diseño UI, sin embargo cuando subo el proyecto a esta plataforma, se ven ciertos "descuadres", en fin, no todo puede ser perfecto xD.... que grato poder comunicarme en español contigo jaja, te envío un gran saludo!!!

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