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

Tech News Page - Using BS5 and no JS

#bootstrap
Lizβ€’ 80

@Azulio123

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. Still need to work on accessibility (read more documentation to add SR stuff)
  2. Workflow habits must improve
  3. Refactoring is ongoing

Any general feedback and resources are welcome. I struggled with using bootstrap in a few different ways, but overcame my issues and learned a lot more about it and targeting certain things to override bootstrap.

I did not need to us JS in order to get the drawer menu in mobile view to work. HA!

Community feedback

@VCarames

Posted

Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

  • Unless your company requires you to use a library , I strongly suggest you stay away from using libraries until you fully grasp the fundamentals of HTML, CSS and JS. By using a library, you are robbing yourself from actually learning how to code.

  • It is best practice to use, Classes for your naming convention as classes are reusable, making them ideal for CSS styling. IDs on the other hand, are not reusable and are mainly used for JavaScript.

  • Unfortunately, JS is doing the opening and closing of your nav button. Since Bootstrap uses JS to make thing work (if you all the code that you added, the nav will still open and close).

  • There needs to be header, main and aside element in your HTML code to improve semantics and accessibility.

  • The "numbers" in the bottom are not headings the should be paragraphs.

  • The β€œimages” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=β€œtrue” to hide them from assistive technology.

  • Implement a Mobile First approach πŸ“± > πŸ–₯

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  • You want to use variables for your colors.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  • I noticed that you went from two easy challenges to this one. I suggest, pacing yourself and slowing build your way up. This way, you can learn how everything things work in a smaller scale.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! πŸ‚πŸ¦ƒ

Marked as helpful

0

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