This was a really challenging one, spent a long time on it, im proud that ifinishe my first javascript project
cat-script
@cat-scriptAll comments
- @XaramsonWhat are you most proud of, and what would you do differently next time?@cat-script
Well done!
- @nunu114What are you most proud of, and what would you do differently next time?
I learned how to use Flexbox on multiple occasions. Responsive design is one of my weaknesses, so I tried my best to implement it through this challenge.
I tried my best to use rem and vh instead of px (rem still confuses me every time).
What challenges did you encounter, and how did you overcome them?I had a hard time using Flexbox. Sometimes I'm still confused between justify-content and justify-items. I was trying to put the element in the center horizontally and vertically. I successfully centered it horizontally, but for some reason, it sticks on top of the document. Then, after some googling and trial and error, I wrapped the container in another container, set the height to 100vh, then set the display to flex. After that, I can finally center it not only horizontally but also vertically.
Another thing that I'm still not comfortable yet is adding a box shadow to a container.
What specific areas of your project would you like help with?I wanted to be comfortable using rem units and flexbox. Rem units still confuse me, even though I have already taken many lessons on them.
@cat-scriptYou can use
px
units first then divide thatpx
by16
to get yourrem
units (e.g. 12px/16 = 0.75rem). It's kind of strange at first but you'll soon get used to it! Just keep it up! - @Kyl67899What are you most proud of, and what would you do differently next time?
I am most proud of being able to use grid box properties using mdn website on grid box and using the different properties. I find it was easy to use flex box but wanted to challenge myself using grid box instead.
What challenges did you encounter, and how did you overcome them?Overall, grid box properties and using grid box to code this challenge was quiet difficult.
To help me with coding the grid box, I used the mdn document often because it was hard to find the numbers to be able to create the boxes. Using grid-row and grid-column properies made it easy to create each box section and align it where it sees fit.
What specific areas of your project would you like help with?I would like to continue practicing and working on grid box and flexbox. I plan on using froggy game for practicing grid box usage so when I am coding a complex grid layout it would be easy to understadn with the grid properties that were taught in the game and the mdn document.
@cat-scriptIf you change the values of
src
attributes inside the<img>
tags, images will render properly. - @amporabipo@cat-script
Great work! 🎉
- @gok786@cat-script
You can watch this video by Kevin Powell for this challenge solution. You did the layout really well, a few minor fixes and it would be so much better. 🎉
- @Sheyon565@cat-script
Looks great! I have the white space at the bottom as well, although it doesn't appear in the preview site.
Marked as helpful - @skellynbWhat are you most proud of, and what would you do differently next time?
setting up the click and hover buttons really took my time but its an added knowledge.
@cat-scriptYou can do better! 👏
- @tonydevtechWhat are you most proud of, and what would you do differently next time?
I will do more better
What challenges did you encounter, and how did you overcome them?Got through anyways
@cat-scriptKeep it up! 🎉
- @C1SLRWhat are you most proud of, and what would you do differently next time?
this is my first challenge in frontend mentors i completed my QR code project easily with extra grip on flex box i want rating on my code in out of 10 also i want to know where should i improve my self
What challenges did you encounter, and how did you overcome them?main challenge was to face was center a div for that i used youtube and some help from https://w3schools.com after all i am still facing some problems to naming css classes
What specific areas of your project would you like help with?as beginner idk about that
@cat-scriptI'm a beginner too but here something easy that I think you can fix:
- The image is distorted and missing the rounded corners
- The font included in the
style-guide.md
is Outfit - Some spacing around the text
- The
box-shadow
in the preview image is more subtle