Skip to content
OverviewSolutions
13
Comments
18
theCavyDev
@okeke-ugochukwu

All comments

  • theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    Nice work @blakelyons.
    I like the the number of filtered countries shown at the top left.

    The only thing I'd suggest is making the CountryDetails component a page on it's own. It's the ideal way if this were a in real wold project.

    Cheers!

    0
  • Aram Nayebbandi•510
    @devaramnyeSubmitted about 1 year ago

    I find it difficult or hard to make the right decisions for the landmarks in this small project. I hope you can help me out with growing my knowledge of accessibility. I hope you like my work and feel free to give some feedbacks.

    • Semantic HTML5
    • Flexbox
    • BEM (learning)

    Responsive image flexbox

    1
    theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    Nice work!👏

    For landmarks, let the content decide. Whatever width at which the website content begins to look visually imbalanced is usually landmark worthy.

    Using traditional device breakpoints too usually help in the decision making, but not all the time anyway.

    0
  • theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    This looks great. The only way to get better is practice.

    I noticed you explicitly defined the card width. I'd suggest you use more or implicit or relative units like %.

    So instead of:

    .main-content  {
   width: 315px 
}

    You could do :

    .main-content  {
   width: 90%
   max-width: 315px
}

    This way, the card is responsive on small screens but does not exceed 315px. So it still looks good on bigger screens. (that's if you're taking the mobile-first approach)

    But nice job still 🚀

    Marked as helpful
    0
  • Federico Martinez•870
    @fdmartiSubmitted about 1 year ago

    This is my first Vue+Typescript project using Pinia as a state management. Had a couple of issues at the moment to making the props reactive at first but I could find a solution a bit of nasty.

    Job listings with filtering

    1
    theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    Nice work man.

    Your filter component is little misaligned. With the absolute positioning you can just set left: 0 and right: 0 to get it centered.

    Marked as helpful
    1
  • Jackson Whiting•360
    @jacksonwhitingSubmitted about 1 year ago

    I had trouble dynamically changing the height of the bars on the chart. The only way that worked was to add an inline style to change the height dynamically based on the JSON data. I usually avoid inline styles if at all possible. If anyone can take a look and has other ideas on how to change the height, please let me know. My solution works, just not ideal in my mind.

    Responsive Expenses Chart Component

    1
    theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    @jacksonwhiting

    Considering real world use case, as long as it's a dynamic chart, your approach is ideal.

    Marked as helpful
    0
  • Dean•190
    @DeanMustafaSubmitted about 1 year ago

    Hey, y'all! I tried my best but still, I cannot make the background as in the picture. I appreciate it if somebody teaches me how to add those 2 circles in the background. Thanks

    Profile card component [9]

    2
    theCavyDev•510
    @okeke-ugochukwuPosted about 1 year ago

    Hey Dean. Nice job!

    The background is a tricky one, lol, but they are just two circles with a gradient background, creating a fade illusion. So here's how you could go about it.

    Make two circles using divs. With the eye dropper tool (color picker) in the inspector section of your browser devtools, pick the colors for the gradient. The starting color would be the lightest part of the circle, the ending color would be the main background color (thus creating the fade illusion). Then absolutely position the divs (might need to rotate too) until as close as possible to the original design.

    You can as well check out solutions posted by others, to see how they did it. It's just creativity.

    I hope this helps :)

    Marked as helpful
    0
  • Anthony Licata•170
    @anthonyplicataSubmitted over 1 year ago

    I used this challenge as more of a learning challenge. There were new concepts in here, and I wanted to learn better practices based on a professional. I watched Kevin Powell as a guide, and it was incredibly helpful. I feel much more confident in my markup now. I learned to create a responsive webpage for mobile and desktop using flexbox and grid. Using <picture> is a great tool to add multiple img files that can be used for different screen sizes. I learned better ways of organizing elements too.

    This challenge tested me quite a bit with figuring out how to make it responsive. I realize that vertical and horizontal card are the same and it depends on the width of the screen and the max-width you set. I spent quite a bit of time trying to make two separate "cubes" to put next to each other, but I learned quickly they did not maintain interaction how I intended.

    I'm still struggling with bringing the contents into the center of the page. For the last challenge I was given helpful advice of removing padding and margin to utilize the flexbox potential. It worked for that one, but for this challenge I could not figure it out.

    I would love some advice on that.

    Edit: With some helpful advice (a reminder as well) I got it centered! Should stick in my head this time.

    Responsive Product Review Card CSS

    2
    theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    Hi Anthony, you're doing really really great!

    Your elements are centered quite alright. The height of your body tag is snapped to the total height of it's content, making the entire page look like it's not centered.

    Give it a min-height of 100vh and you're good

    Marked as helpful
    0
  • Ken_1219•50
    @Ken-1219Submitted over 1 year ago

    This is my first submission after joining Frontend Mentor so I don't know if I properly implemented the challenge or not. So, I would appreciate any feedbacks and suggestions given. Thank You!

    QR Code Component using CSS Flex

    2
    theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    Way to go for a first challenge 👏.

    Practice and keep an eye for details and you good to go. 👏

    0
  • theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    Man be giving joy back to back 👏👏

    1
  • Michael Chukwu•360
    @Mike-DaveSubmitted over 1 year ago

    This was really a tough one for me. Working with dates is just something else, however I was able to complete this challenge. I am open for any feedback.

    Age calculator app

    1
    theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    This is a nice job.

    I noticed that all fields are cleared out when any input is wrong. I think it would be better UX if only the wrong field is cleared out.

    Marked as helpful
    0
  • theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    Hi Esther. First of all, great job! 👏

    The answer you are looking for is "practice".

    Cliche? Lol, I know, but that's actually it. But still, here are some tips:

    • Generally, the idea of breakpoints is the points (widths & sometimes heights) at which your website's layout becomes visually imbalanced. So they should be created in relation to your website's content not necessarily screen sizes. But this takes time to master. So here's what you could do:

    There are traditional breakpoints that work for most layouts:

    • 480px { mobile }
    • 768px { tablet }
    • 1024px { small screens, laptops }
    • 1200px And above { desktops } (Google for more detailed info)

    Now, these breakpoints are not set in stone, but they're popular as they're cover many device widths. So, you could practice with these on projects with minimal layout. As you begin to get the hang of it, you can move on to more complex layouts. With time you would be able to create you own custom breakpoints, relative to the website's content and build cooler stuff 😎

    Just practice. I hope this helps.

    Marked as helpful
    2
  • Po-Cheng Yeh•190
    @blp100Submitted over 1 year ago

    Second challenge from Frontend Mentor! Using tailwind-css to build the website and exploring Figma for the first time.

    Grid and flex systems in CSS posed some hurdles, but I tackled them head-on to create the main design.

    Fixing spacing and font styles was a pain, especially when specs were unclear. Real-life problems require human discussion.

    After finishing this challenge, I feel more confident in my skills. Thanks to the amazing Frontend Mentor team! Can't wait for the next challenge!

    Resiponsive langing page with tailwind-css

    1
    theCavyDev•510
    @okeke-ugochukwuPosted over 1 year ago

    Looks good! The confidence boost is always a good feeling

    2