Skip to content
OverviewSolutions
28
Comments
17
Udochukwu Amaefule
@UDsGitHub

All comments

  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hey Kadu, just saw your solution and it looks great. The one issue I found, was that it seems as though your main profile component isnt in the same container as the time tracking components as such, when the screen width changes below 1100px, it starts to break and look off.

    Good luck with that, Id suggest having both the profile and the.... dont mind me. I just looked at the divs in your code and noticed I have said a bunch of stuff right now. Yeah so basically, your profile needs to be able to stretch with the rest of the components and look decent while at it.

    Good luck 👍

    1
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hey man I just saw your solution to this challenge, and it looks great. the only thing I had to pick on, was the navmenu's responsive styling. When in mobile display size and the navmenu is opened, if the screen width changes back to desktop size, the navmenu as well as the hamburger menu remains open and visible. This is a slight bug you have to fix. Good luck 👍

    1
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hey CodeSenpai, I saw your solution and it looks great. I really love the way you did the border of the card. The issues I noticed so far are:

    1. Your hover trigger is over the whole card instead of just the "Etherium" image.
    2. You could also add cursor: pointer to your hoverable elements that arent like that by default e.g, anchor tags.
    3. You could add some vertical padding to your body so the attribution part isn't touching the bottom of the page. These are all I have to pick on at the moment, but you can start by taking a look at the report Frontend mentor gave you.

    Good luck 👍

    Marked as helpful
    1
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hey man I really love your solution, and I have been spending the past few hours trying to study and learn from it. I am still hung up on how you made the number input appear without the increment, decrement stuff... I saw your code and it looks like you used appearance, but testing stuff out on codepen, it doesnt seem to work the same for me. Any advice?

    0
  • Muhammad Mahmoud•340
    @MuhammadM1998Submitted almost 3 years ago

    3 Attempts just to get the solution preview working! Had a bit of a problem getting the columns at equal size with flexbox, found this article and it turned out to be very helpful and i learned new things about when and why do we use flex: 1 or flex-basis: 100% and what's a better approach. Totally recomended. https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/ First time to to use BEM for HTML classes and it's really useful. Would appreciate any feedback.

    Four-Card-Feature-Section

    2
    Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi Muhammad, I just saw your site and it looks great. The only things I think you should add or change, are:

    1. The top padding of your site. Your page seems too close to the top of the screen.
    2. The middle two cards are not the same width as the outer two in the larger screen sizes. I think this might be due to the issue you were having with flexbox. I just noticed and felt inclined to point it out. Good luck! 👍
    0
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi, Ali, I just saw your site and it looks great. I also noticed you used height to reveal your FAQ questions. To that end, one way you can improve your design right now is to add a transition effect to the opening and closing of the FAQs. That would improve the user experience in my opinion.

    0
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi XCRISX,

    I just saw your site and it looks amazing. The only things I might pick on, are the fact that you don't have any hover effects on your hoverable elements. Also, your newsletter subscription's input does not have padding for the text, so that makes it a bit uncomfortable.

    Good luck! 👍

    0
  • Gelo•10
    @gelo29Submitted almost 3 years ago

    This is my first challenge I welcome all feedbacks and some suggestions and tips, My Question is as a beginner should I use Media Query for responsive design or should I jump to other tool?

    HTML and CSS

    1
    Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi Gelo, Your site looks good. Here are a few things you could do to improve your work.

    1. Instead of selecting all possible html elements in the page, you could use the " * " selector so select all the elements like so *{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
    2. To improve semantics and accessibility, you could wrap your main card content in the main element and give it the class or id of main like you already have on that div.
    3. You should have a background-size: cover on your body's background.
    4. I noticed you have a lot of multiple selections on elements you wanted to style like for example "article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }" You want to try and avoid long selections like that because it reduces the readability of your code. other than that, the rest of your code looks pretty good, only other thing I'd pick on is maybe adding some transition duration for your hover effects. Good luck! 👍
    Marked as helpful
    0
  • Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi GJCIII, Your site looks great and is responsive on varying screen sizes. One thing you could do though to make it a bit better would be to fix the scale on regular (large screens aka my type of screen, aka 1024 x 720px screens) because I noticed that it was a bit too large for that size. Also, you could add a bit of color change for the buttons to make the users aware that they are hovering over said button or interacting with it, also you have an underline on your "Proceed to Payment" button. Last two things, try to center your card a bit more. I assume it was pretty difficult because you have both the card and your attribution in the same flex container, but you could always remove the attribution from the page or just remove it from the container and give it some margin to stay at the bottom of the screen. Lastly, to improve semantics and avoid accessibility issues, you should replace the div you have with a class of "card" with a main element with the same class. This would improve the HTML structure of your page and help with navigation via external tools. Good luck! 👍

    Marked as helpful
    0
  • Aleksander Tysklind•860
    @outerpreneurSubmitted almost 3 years ago

    Hi! In this exercise, I have struggled to do the pink overlay in the picture. I have tried in different ways, none of them worked.

    I also struggled to have both sections (columns) with the same width.

    I also don't know how to shrink the three columns with stats, a bit more narrow and contained.

    If you have any suggestions, I will be happy to know them.

    Stats preview card

    2
    Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    A quick tip for the overlay, is to just use a filter style on the image and tint the color with the purple hue. Good luck 👍

    Marked as helpful
    0
  • Aldhair Escobar•165
    @aldhairescobarSubmitted almost 3 years ago

    I'm trying to use a clean CSS, maybe I needed to use more classes here, the idea is to add some scroll animations on this project in the future, so any feedback on how I can improve it will be appreciated :)

    meet landing page - Mobile First - HTML - CSS

    1
    Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi Aldhair, I just saw your site and it looks great. My only comments are on your html report and stylistic stuff that i think would just make the site look a tad better in my opinion... just my opinion.

    1. You could use either swap the h2 and h3 between your "built for modern use" and your "Smarter meetings, all in one place" or use a span or a p element for your "built for modern use" and use css it scale it appropriately.
    2. You could also have both the section of images and the section after that in one section because it looks like it could or should be one. That would also help with the semantics of having a heading in each section.
    3. I feel as though this site is slick and cool enough to have a cooler scroll bar because my first impression on the site was that that scroll bar is blocking a bit of the images in the header section and if it were slimmer and slicker, it would look a lot better. Lastly, i just noticed by mistake, that you have some cool scaling happening on focus on your links/buttons. I think if you had that scaling on the buttons/links on hover, that would be cool to, but just a personal opinion. Great site and good luck 👍
    Marked as helpful
    1
  • Henry Zheng•420
    @LonelyBuddySubmitted almost 3 years ago

    Second challenge completed... I really need a break. I was so close to burnout.🤣

    What I did and tried in this challenge:

    • created 2 reusable minxins to create buttons and gray-pattern-blocks on the page.
    • tried using helper classes, but I didn't bother it too much.
    • used Sass partial to make code smaller

    Challenge 3 is coming soon! 😉

    HTML,Scss

    2
    Udochukwu Amaefule•570
    @UDsGitHubPosted almost 3 years ago

    Hi Henry, I just saw your site and it looks great. My only comments would be on the first keyboard images pseudo element. I dont know if its supposed to be there or its more of a design element from the background because I have not attempted this challenge, but yeah I think that is what is causing most of your issues with responsiveness on smaller screensizes. I think just like Aakash has said above, you should add overflow hidden to your container element, but also make those pseudo elements absolutely positioned so that they dont affect the flow of other elements. I just noticed you already have them on absolute positioning, but yeah. Start first with the overflowhidden and work your way to figuring out the content spill on the smaller screens. Good luck 👍

    Marked as helpful
    0