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
Not Found
Not Found

Submitted

News Homepage (HTML | CSS | JS Vanilla => animejs library)

Cheosphere• 1,040

@Cheosphere

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the News homepage coding challenge

This is a solution for...

News homepage
  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Community feedback

Pranshu Sahu• 770

@Pranshu-Sahu

Posted

Hello @Cheosphere, your solution looks amazing.🎉🎉✨

Your solution looks completely 👍 fluid and responsive.

I have spotted some some errors 🤦‍♂️ in your solution-

  • In smaller screens, using tab key to navigate through your web page hamburger menu opens even if I do not press enter on it.

  • on your webpage👨‍🔧, when your navabar is offscreen but still contain focusable children. Consider watching video on (accessibility)[https://www.youtube.com/watch?v=fGLp_gfMMGU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=2].

Hope this helps.

Happy coding.🙂✨🎉👨‍💻

🎉Wish you all the best for future projects.👍

Marked as helpful

2
Cheosphere• 1,040

@Cheosphere

Posted

@Pranshu-Sahu Hello Pranshu, thank you very much for your comment. You are right, at the moment of pressing the tab key the mobile menu appears, but this happens only in Chrome, since Firefox (my browser) and Safari, does respect the overflow hidden property, anyway it is a very interesting detail and I will find out how to solve it for Chrome. Cheers!

0
Felipe Amorim• 680

@FelipeCastroDEV

Posted

you are my reference haha how much time did you spend in this project ?

i think to start that project now, and would like to know an estimated time :D

2
Cheosphere• 1,040

@Cheosphere

Posted

@FelipeAmorimDev Hello Felipe, thank you very much for your comment, this project took me 2 days, each one of 5 hours of work approximately. I have seen that the menu settings, in desktop version and then mobile, is one of the tasks where I use the most time.

1
KramLig Coder• 50

@kramlig22

Posted

I really love and awesome you're doing for this project, I really amazed at what you do. How many times refresh your live solutions it's really awesome. I will follow you to check how the real workflow. I have been doing 6 years developing sites using WordPress and maybe this time I need to enhance and push my career to a real Web Developer world.

I am happy to find this community. And I am happy also that we can check each code.

Cheers to your project solution @Cheosphere

1
Bee Horma• 170

@hormakery

Posted

i really love it,i must say

1
Cheosphere• 1,040

@Cheosphere

Posted

@hormakery Hello Bee Horma, I really appreciate your comment, and it's great that you liked my work, it's created with great care 🙂

0
Diogo Quina• 30

@DQuina

Posted

Magnifico! Está um trabalho muito bom. Espero que possa contar com a sua ajuda neste meu inicio de carreira na programação. Um bem haja

1
Cheosphere• 1,040

@Cheosphere

Posted

@DQuina Olá Diogo, muito obrigado pelo seu gentil comentário, será um prazer se eu puder ajudá-lo em algo, também continuo aprendendo desenvolvimento web frontend para melhorar um pouco mais a cada dia. Um abraço à distância meu irmão!

0
silentwolfe• 50

@devourer999

Posted

Hello @cheospere great work, I must say you are indeed a rock star😎 but your responsiveness for large screen doesn't display the nav bars...so i am letting you know just incase you are not aware of it☺

1
Cheosphere• 1,040

@Cheosphere

Posted

@devourer999 Hello silentwolfe, thank you very much for your feedback, indeed there was a problem with the view of the navigation menu in some desktop sizes, when I did the tests with the browser tools I did not see it, but in Screenfly I could see the problem, I have already solved it, Thanks a lot!

2
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

I just wanna ask how long it takes to do a project?

1
Cheosphere• 1,040

@Cheosphere

Posted

@chukwudobe-Micah Hello Chukwudobe, it depends on the complexity of the challenge, in this case two days of approximately 4 to 5 hours of work

0
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

@Cheosphere okay then, thanks for the reply and the details. I'll keep following you to get inspired more.

1
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

I can't wait to learn js so I can do that cool menu bar.

1
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

Giving you a follow, hope I get a follow back.

1
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

Wow, this is so good. How did you get the design so accurately?

1
Cheosphere• 1,040

@Cheosphere

Posted

@chukwudobe-Micah Hello Chukwudobe, thank you very much for your comment, what I do is measure from photoshop the sizes and spaces of each element in the original UI design, it is an entertaining and stressful job at the same time 😆

0
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

@Cheosphere I'll try this, I love what you do.

1
Cheosphere• 1,040

@Cheosphere

Posted

@chukwudobe-Micah Thank you very much for appreciating the work that is done with great care.

1
Bee Horma• 170

@hormakery

Posted

@Cheosphere how? I'm not used to photoshop.....funny how i usually ask this questions in my head.....it is a good hack

1
Cheosphere• 1,040

@Cheosphere

Posted

@hormakery Hello Bee Horma, that's right, the original design (the jpg file) that is provided in the folder with project files, in software such as Photoshop or Illustrator you can measure in detail the different sizes, spaces, margins, etc... with this you can achieves a design very similar to the original.

0
Bee Horma• 170

@hormakery

Posted

@Cheosphere thank you

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