Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions28Comments17

All comments

  • Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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

    @MuhammadM1998

    Submitted

    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

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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

    @gelo29

    Submitted

    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

    @UDsGitHub

    Posted

    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

    @UDsGitHub

    Posted

    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
  • P
    Aleksander Tysklind• 820

    @outerpreneur

    Submitted

    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

    @UDsGitHub

    Posted

    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
  • P
    Aldhair Escobar• 165

    @aldhairescobar

    Submitted

    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

    @UDsGitHub

    Posted

    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

    @LonelyBuddy

    Submitted

    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

    #sass/scss

    2

    Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    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
  • Mehul9063• 10

    @Mehul9063

    Submitted

    This is my first solution. It contains the desktop version of the challenge. If there are any suggestions to improve my solution then please share your feedback.

    NFT Preview Card (Desktop version)

    1

    Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    Hi Mehul, Your solution looks great! one quick tip though would be to add cursor: pointer to all your hoverable elements to make it more noticeable that these are interactable 👍. Just went through your report and noticed you have a lot of errors basically saying you need to add alt text into your images. I know sometimes we (me) assume we dont need alt text on some images that we believe dont contain any descriptive text, but we need alt text also for accessibility by for example those who use screen readers to access our sites. Also one of your html reports said you should enclose your content in landmarks: quick tip, try to use the html elements more often that divs that would also help with accessibilty by other software that use html structure to navigate through a site 👍. Before I leave ill give an example of the html stuff. you can use a main element and add the class of card you already have to it👍.

    Marked as helpful

    1
  • Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    Hey Blanyer, I noticed you didnt ask for feeback this time, but I saw your site and felt inclined to comment.. it seems like your images are stretching and squishing... a quick fix to that would be to add something like so to your images

    img{
    object-fit: cover;
    object-position: center;
}

    that would make the image stretch to cover its div assuming it is in one, and the object position would position the image similar to background-position... so play around with that to find what works.

    Marked as helpful

    1
  • Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    Hi Amaka, Your site looks good, there are just a few things you can do to make it work better...

    1. You should have a min-height: 100vh; on your body so it always stretches to fill the entire view height. That would help with aligning the card vertically.
    2. Your card should have a max width... but then again that could make it small on larger screens so dont make the mistake I made of having a max width based on what i could judge from my small screensize.. it seems like the 90% you have now works pretty well, but to make it better, you could use a width of max-width: max(90%, 25rem)-- This would basically choose the bigger width between 90% and 25rem, so on larger screens, it would be 90%, but on smaller large screens, it would be 25rem... assuming 25rem is bigger than 90% of the body's width just note the 25rem i put there is arbitrary.. you should put a value there based on what looks like it works for you.

    Aside from all my rambling, you are good! 👍

    Marked as helpful

    0
  • Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    Hi Blanyer,

    Your site looks very nice, there are just a few things that stand out to me at the moment.

    1. Your a tags don't have cursor: pointer;,
    2. Your Breakpoint for the media query is too large... maybe reduce it to about 700px or 550px.
    3. You have a blurred box shadow, unlike the design.
    4. Lastly, your javascript is not functioning properly, so you might need to fix that.

    Other than that, you have it all good 👍

    Marked as helpful

    1
  • Udochukwu Amaefule• 570

    @UDsGitHub

    Posted

    Hi Mohamad, Nice work on your site... a few things you could add to make it work better..

    1. min-height: 100vh on your body so that the background wouldnt clip on the bottom.. also if you have background-repeat: no-repeat, remove that too.
    2. You could add padding to your body so that its children wouldnt touch the borders of the screen.
    3. You should make the purple "Try it free 7 days then $20/mo. thereafter" a link (a tag) because it is supposed to be a link.
    4. You could remove the empty form action attribute and other attribute and let them default. Other than that, you should be good my man.. keep it up👍

    Marked as helpful

    0