News site project - Jenny Andersén

[jempa182]

https://universe2news.netlify.app/

[JennieDalgren]

Great job with this project! Also, love the style and design of it.

Use of Semantic HTML:

Great job using semantic tags like <header>, <main>, and <footer>. This improves both accessibility and SEO.

CSS Grid and Flexbox Usage:

Excellent application of both CSS Grid and Flexbox. The use of Grid for the main layout and Flexbox for smaller components is well-balanced.
Ensure that grid and flex properties are only applied where necessary to avoid unnecessary complexity.

Alt Text for Images

Ensure all images have descriptive alt text for accessibility.

Code structure

There are some instances of repeated CSS properties across different selectors. Refactor these into a single class to keep your CSS DRY (Don't Repeat Yourself).

Example on refactoring:
You have the following button styles repeated in both .btn-primary and .btn-secondary

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
}

Instead of repeating these properties, you can create a base class (e.g., .btn) and apply it to both .btn-primary and .btn-secondary.

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
}

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: black;
}

This keeps your code DRY and more maintainable!

Keep up the good work! With a few tweaks, your project will be even stronger. 🌟