- It was a relatively easy challenge, but I had difficulty defining how many columns there would be
- semantic html, it sometimes confuses me to know which tags to use
- What is the next logical step now?
Wanna keep working on mobile-first, and really wanna improve grid since I'm only starting to learn it. I hope this project ended up not too terrible. Always appreciate any sort of feedback!
All areas lol. I truly feel sorry for whoever will try to read through my god-awful code. I hope I'll get better with more practice/experience.
Truly feels like I wrote a lot of unnecessary stuff, most likely made a lot of questionable decisions as well. But this is the best I can do at the moment with my current very limited knowledge.
Any criticism is very welcome, since it helps a lot in learning ^_^
Looks a bit bigger than the original design but other than that nice job! ^_^
I'm most proud of the responsive design, but next time I will refactor my code to reduce redundancy and use CSS Grid instead of Flexbox.
What challenges did you encounter, and how did you overcome them?I encountered challenges on mobile devices with breakpoints and maintaining container sizes. However, after consulting W3Schools, I was able to overcome them.
Hello @Godinhoweverson
Idk if I should comment on other people's code as a beginner myself, but it forces me to so imo you should try more semantic tags instead of generic div
, and putting css file into a separate folder seems a bit weird, other than that it's responsive and looks great! Cheers bro!
Hey @EliPinheiro I would humbly recommend to work on mobile version too, and use semantic HTML tags instead of regular divs, also probably better to use classes instead of id. Take it all with a grain of salt though since I'm a very beginner myself. Cheers!
Looks clean :o
Oh the buttons changing the background color on hover is something I should've done as well xD. Nicely done friend!
Hey there. I'm a very beginner myself but found and easy yet a bit cheese way to center the card. Try it if you want to
body {
display: grid;
min-height: 100vh;
place-content: center;
}