@Richard-S16Submitted over 1 year ago
ephraimdjeket
@ephraimdjeketAll comments
- P@loki-pepeSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I learned that I can toggle classes using
classListand that I can manipulate SVG colors using the CSSfillproperty. - P@xayrax88Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
This project took a little while, I am proud of getting through the project. What I would do differently next time is to go back and add the styling for the background & correct the bottom footer image color. I am mostly proud of getting the screen sizes down for mobile > tablet > desktop sizes.
What challenges did you encounter, and how did you overcome them?I had issues with the sizing and overriding of styling within my media queries but eventually figured it out and learned as I go. I used various resources like MDN & web.dev articles to help me as well as referencing previous responsive projects for aid.
What specific areas of your project would you like help with?I need help with getting the background (with the faint stripes using CSS) using CSS to make it exactly like the final product and the exact color overlay for the bottom footer hero image. Everything else I believe I did alright by making it as close to the original product as possible. Any feedback is great. Kindly please advise. Thank you for taking the time to read my solution and help. Cheeers!
@ephraimdjeketPosted about 2 months agoGood job on completing this challenge! For the footer element, I struggled a bit aswell. I believe you can either use a pseudo-element on the container (::before) or create a div overlay element and position under.
Marked as helpful1 - @ObiwummaSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the fact that I learned how to use Grid
What challenges did you encounter, and how did you overcome them?It was challenging when I tried to use grid to arrange the 5th card by the side(desktop view). While trying to sleep, an idea popped up. To separate the the first for cards from the fifth card, make their container display flex then display the first 4 in Grid.
What specific areas of your project would you like help with?Any advice for how i can improve with Grid?
@ephraimdjeketPosted 2 months agoHi Obiwumma. Really good job on this challenge. To be able to use grid on the 5th card, you'll need to understand how grid works properly. That way you can create your own grid and position each grid element however you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
Marked as helpful0 - P@olaide-hokSubmitted 2 months ago@ephraimdjeketPosted 2 months ago
This looks really good. Very responsive and everything looks perfect.
0 - @yuriinykSubmitted 2 months ago@ephraimdjeketPosted 2 months ago
I like this! It looks very beautiful on desktop view and I love the hover function. Only tip I can give is to make it responsive so everything fits in the mobile view.
Marked as helpful0 - P@Oliko136Submitted 2 months ago
- P@SKszymekSubmitted 2 months agoWhat challenges did you encounter, and how did you overcome them?
I used first time a table element so It was little bit difficult. But I make it with some help of w3schools page.
What specific areas of your project would you like help with?I'm sure that my code is not clean and there is a lot of stuff to repair in my code. For example styling the table :D. I have question about html. Should I use in this project more semantic tags instead of divs like a section elements?
- @xianortSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
It was easy to structure the HTML in the one.
What specific areas of your project would you like help with?Any feedback is welcome.
- @pariveshrohillaSubmitted 2 months ago
- @CoiferousYogiSubmitted 2 months ago
- @Sandrine-CPSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I finished my first challenge but it took more time than I expected
What challenges did you encounter, and how did you overcome them?I didn't changed the read me file when I did work on the project. As I am submitting the solution a long time after I finished I don't remember the steps I followed. Will do better for the next challenge.
What specific areas of your project would you like help with?I would like to know if the css structure is optimal, meaning are there some improvements to make it shorter ?
@ephraimdjeketPosted 7 months agoHi Sandrine. I'd say you did a very good job here :). Design aspect, everything looks close to pixel perfect. The only thing I noticed is the fonts being a bit bigger and different.
Your CSS structure is great, but I noticed that you're not using a CSS reset. I'd say this is crucial because all elements will otherwise retain their default styling and not all browsers will display apply these default rules.
I found a modern CSS reset that you could use:
/*
- Use a more-intuitive box-sizing model. */ *, *::before, ::after { box-sizing: border-box; } /
- Remove default margin */
- { margin: 0; } /* Typographic tweaks! 3. Add accessible line-height 4. Improve text rendering / body { line-height: 1.5; -webkit-font-smoothing: antialiased; } / 5. Improve media defaults / img, picture, video, canvas, svg { display: block; max-width: 100%; } / 6. Remove built-in form typography styles / input, button, textarea, select { font: inherit; } / 7. Avoid text overflows / p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } / 8. Create a root stacking context */ #root, #__next { isolation: isolate; }
Keep coding!
Marked as helpful0
