Submitted 9 months ago

Main page using CSS

accessibility

ed•40

@Barcode77

A solution to the Recipe page challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

First i most proud that I took the challenge and saw through it. Applying lessons learnt in real life provided a challenging but real way to learn.I also plan to observe time, ie take time off, if needed when in the thick of it

What challenges did you encounter, and how did you overcome them?

Writing HTML and CSS I was a bit familiar with but applying and deploying are new things i got to encounter. Despite what i knew, i realized there was a lot more to cover and get hands on experience on, especially with CSS. By testing different ideas, I deduced the which paths to take, and for deploying, I simply just had to learn.

What specific areas of your project would you like help with?

Extending the color to include the list numbers
Styling the table as provided.
Any other feedback is welcome ; ).

Code

Please log in to post a comment

Community feedback

hitmorecode•7,540
@hitmorecode
Posted 7 months ago
I took a look at what you did. Here are a few thing you can do to improve your page.
- Let's start with CSS reset. Make it a good habit in applying CSS reset in your page. Here is a simple example of a CSS reset.
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
- After applying CSS reset you don't have to add margin: 0; or padding: 0;.
- If you want the page to have 100% height, it's best to do it like this min-height: 100vh;.
- You don't to add width: 100%' on the body. By default the body is always 100%.
- Avoid giving classes or id's the same name as elements. Don't use body for a class name.
- I don't understand why you used position relative.
- You have justify-content: center; without using flexbox.
```
body {
    /* margin: 10px auto; */
    /* justify-content: center; */
    background-color: hsl(30, 54%, 90%);
    display: flex;
    justify-content: center;
    align-items: center;
}
```
- As you can see the image is not centered, make these changes to fix this.
```
img{
    height: 300px;
    /* max-width:600px; */
    border-radius: 15px;
    /* min-width: 375px; */
    width: 100%;
}
```
- When you have a font that's going to be used in multiple places, you can just add it on the body.
- You did not used media query to make the page responsive.
- Some fonts don't match the design.
See if you can fix these things and if you need help let me know.

I hope you find this helpful. Keep it up 👍👌

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