Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found

Submitted

News homepage solution [using ReactJS]

#react#sass/scss#vite#bootstrap
The Nghia 100

@dothenghia

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (12)
warning

Heading levels should only increase by one

<h4>Hydrogen VS Eletric Cars</h4>
Learn more
warning

Heading levels should only increase by one

<h4>Reviving Retro PCs</h4>
Learn more
warning

Heading levels should only increase by one

<h4>Top 10 Laptops of 2022</h4>
Learn more
warning

Heading levels should only increase by one

<h4>The Growth of Gaming</h4>
Learn more
error

Images must have alternate text

<img src="/FM-News-homepage/assets/image-web-3-desktop-80273c80.jpg">
Learn more
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

Ensures landmarks are unique

<nav class="header-nav__pc"><ul class="header-nav__pc-list"><li class="header-nav__pc-item">Home</li><li class="header-nav__pc-item">New</li><li class="header-nav__pc-item">Popular</li><li class="header-nav__pc-item">Trending</li><li class="header-nav__pc-item">Categories</li></ul></nav>
Learn more
warning

All page content should be contained by landmarks

<div class="header-logo"><img src="/FM-News-homepage/assets/logo-2ae3d696.svg" alt="Logo"></div>
Learn more
warning

All page content should be contained by landmarks

<img src="/FM-News-homepage/assets/image-web-3-desktop-80273c80.jpg">
Learn more
warning

All page content should be contained by landmarks

<div class="row pt-3 pt-md-4 pt-xl-5">
Learn more
warning

All page content should be contained by landmarks

<div class="col-12 col-md-4 mt-md-0 mt-5 side-contents">
Learn more
warning

All page content should be contained by landmarks

<div class="row pt-5 sub-contents">
Learn more

The Nghia’s questions for the community

This is the first time I have used Bootstrap in my project, I really like it because of its Grid System - Flexible and powerful. Thanks to it, I have responsived for all devices resolution easily.

But I wonder that :

  • Do people still use Bootstrap in their projects ?

  • Which is better between Bootstrap and Tailwind ?

Community feedback

P

@Eileenpk

Posted

Hi The Nghia! your project looks great, and this might answer your question regarding which is better Bootstrap or tailwind.

Bootstrap 's main benefits are;

  • CSS framework that provides a comprehensive set of pre-designed components, such as buttons, forms, and navigation.
  • A responsive grid system that makes it easy to create mobile-friendly layouts.
  • Documentation that is extensive and it has a large community of developers that contribute to the development of the framework.
  • Makes it easy to find solutions to common problems and learn best practices.

Tailwind's main benefits are;

  • Utility-first CSS framework that provides a set of low-level utility classes that can be used to build custom designs.
  • The framework is built on the idea of atomic CSS, where small, reusable classes are used to build up the styles of an element.
  • Highly customizable and allows you to create unique designs without having to write a lot of custom CSS.

Both Bootstrap and Tailwind CSS have their own set of strengths and weaknesses. Bootstrap is a more opinionated framework that provides a lot of pre-designed components, making it a good choice for quickly prototyping a project. Tailwind CSS is more flexible and can be used to create more unique designs, which is a good choice for projects that require a lot of custom styling.

The best one for you will depend on the specific needs of your project.

Hope you found this helpful!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!