Emelie Nyberg Kedert project-news-site

[EmelieNyberg]

News Site

In this assignment, I was asked to create a news website with a theme of my choice. I chose to make a news site for parents about babies.

The problem

How I Approached the Problem:

To solve the problem, I started by carefully analyzing the requirements and breaking them down into smaller tasks. I created a simple plan on paper that outlined each step I needed to take, from setting up the basic structure to integrating key features.

Tools and Techniques I Used:

I used HTML and CSS to develop the website. My approach involved using both Grid and Flexbox in CSS to ensure that the site was both user-friendly and responsive. I also used Media Queries and Keyframes to enhance functionality and experiment with animations.

Planning Process:

I began by sketching the layout and features of the site on paper. Once the structure was clear, I moved on to designing the look and planning how to structure the code, with a focus on core functionality first. By continuously testing in VS Code and checking the results in the browser, I was able to improve functionality and refine the design.

What I Would Do Next If I Had More Time:

With more time, I would focus on enhancing the user experience by adding more interactive elements and further refining the design. I would explore the possibility of adding additional features such as slideshows, videos, and more clickable elements. I believe these additions would increase the value of the site.

[EmelieNyberg]

This is the link to my website: https://babies-focusedonparents.netlify.app/code/

[JennieDalgren]

Great job with the project. Love the AI babies ;)
Here are some feedback:

Responsiveness:

The media queries work for the most part, but the typography could use some improvement to ensure it's legible on smaller screens. Switching from fixed units like px to more fluid units like rem or em would help with scaling. We haven't talked about this yet, it's more a extra tip for the future.

Example:

h1 {
    font-size: 2rem; /* Scales with the screen size */
}

HTML Semantics:

Excellent use of semantic HTML elements like <header>, <main>, and <article>. This improves accessibility and makes the structure of the content easy to follow.
A small suggestion: avoid overuse of <div> tags where a more descriptive tag could be used for better clarity.

Keep up the good work 🎊