Skip to content
OverviewSolutions
8
Comments
49
P
Marko Nikolajević
@MarkoNikolajevic

All comments

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Vishal

    you did a good job on this challenge, I noticed a few things you could check and maybe fix.

    • the background image is missing
    • check font sizes to make them look more as the design
    • check input size
    • you could add hover effect on the button
    • check the report to see accessibility and html issues

    Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Marco

    You did a really good job on this challenge. Your solution is responsive and everything looks well.

    To make your solution looks more like the design, I would suggest to add a white background color on your cards

    Your code is clean and well documented with comments :)

    Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi idkbit

    you did a good job for this challenge, I 've a few feedbacks for you.

    • I would wrap a elements inside a <button> in this case
    • You should add a hover effect on buttons, you can just add :hover pseudo class on link class and apply hover styles. To make hover effect smoother you could add transition on it

    Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Orkhai

    You did a great job as a first challenge! Your solution is responsive and everything works well.

    I've a few suggestions for you

    • You don't need to set the width on the body
    • You could add some transition on buttons to have a smoother hover effect. If you decide to di that you should add border: 1px solid transparent on your buttons because you have a border on hover and this will make a better effect

    Anyway you good job and keep on coding with fun :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi tediko

    You did really a great job on this project! I like animations especially ones on social icons :). Your code is clean and clear. Good job adding sr-only for accessibility, this is a good plus.

    Your work is almost pixel perfect from the design :)

    Good job and keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Antoine,

    your solution look good. Nice job on finishing it!

    To include fonts you can use the link tag in your html file

    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
// here you import both fonts needed for this project

    and the set the font-family in your css file

    font-family: 'Inter', sans-serif;
font-family: 'Lexend Deca', sans-serif;

    you have to set specific font where it is needed for example

    h1 {
  font-family: 'Inter', sans-serif;
}

    Keep on coding and have fun :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Tereza, you did really an amazing job with this challenge.

    Everything is responsive, all animations are great especially the slider's one and adding sr-only class for accessibility is a plus. :)

    Your code is well documented and clean.

    Congratulations for completed it especially after the struggles you had in the beginning! :)

    Keep coding and have fun

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi trudihub, you did a great job on this challenge! I like it!

    Your code is clear and clean, I just have a feedback for you. On laptops view the text inside divs with description class is squeezed. I think is because you set a media queries too early @media (min-width: 1024px).

    Anyway you did a great job!

    Keep on coding and have fun!

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    HI Agnieszka, you did a good job on this challenge

    To make your code more responsive you could add more media queries, for example the tablet view is from 768px or 48rem. In your case you changed flex-direction to row-reverse at 37.5rem...$bp-desktop: 37.5rem;. I would suggest you to create a few more as $bp-tablet: 48rem. I usually use one media query for laptops and one more for desktops (1440px).

    In this way you could have more control on different screen sizes.

    A part of this, your solution looks good

    Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi BBrownley congrats on finishing this challenge! You did a really good work on it.

    I've just a few suggestions for you

    • you footer-top element is not styled properly on mobile view, I think because you set a fixed width on child elements
    • I noticed the urls have the # on them as https://bbrownley.github.io/designo/#/about
    • check out the report for accessibility and html issue and try to fix them

    A part of these feebacks, you did a good job especially adding maps for locations.

    Keep on coding and have fun! :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi groudse

    To manage the border radius on mobile you can add this code inside you @media part

    .first {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 0;
}

.third {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-right-radius: 0;
}

    You could use a shorthand property for the border radius border-radius: top-left-value top-right-value bottom-right-value bottom-left-value

    As you said you still have to finish the mobile version of the challenge

    Keep on coding and have fun! :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi David, you did a nice job with this challenge!

    I've a few suggestions for you

    • you could use display: grid; to recreate the 2 columns grid layout instead of using float and display: table;. I think it's easier using grid.
    • here a useful link about using filter on images https://www.w3schools.com/cssref/css3_pr_filter.asp
    • another solution for the image filter is creating a sort of overlay on it using a div or a pseudo element as ::after and apply on it a background: /* color value */

    Your html and css code is clear. Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Omer, you did a really good job on this challenge!

    I like the animations you added and the load button is a plus for me! Your code is clear and understanable, well done!

    Maybe you could add more info on the countries in the homepage as there are in the design, but except of that I don't have anything else to suggest you.

    Keep on coding! :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Onyekwere Precious! Congrats for completed this project and you did a great job on this. Your code is well organized and clear.

    Looking at the report, you've some html issues...for example the div as a child of button element, you should use span instead.

    Overall your project looks great. :) Keep on coding!

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Kadheryna, you did a good job with this challenge.

    I just have a few suggestions about your code

    • looking at the report you can see that you have some issues that could be fix easily, as <title> tag that is empty or missing alt attribute in <img /> tag
    • I would suggest you to be more consistent in you sass code, for example if you started using px or rem keep on using one of these. Same for the colors, some of them are in hsl and other in rgba
    • the rgba is wrong because the last item is the alpha value and it goes from 0 to 1
    h1,
    h2 {
      color: rgba(248, 252, 253, 255); // 255 should be from 0 to 1
    }

    • You could wrap some elements of cards in a <div> and I think it would be easier to work with them

    • I think there too many margin on mobile view into the cards

    They are just a little fixes, overall your work is really good :)

    Keep on coding

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    hey @p1t1ch! I love your solution and it works perfectly!

    I'm working on the same challenge but using nextjs, mongodb and next-auth for log the user in. Honestly I'm having some troubles to complete it. I hope to finish it soon even if I'm working on it a little bit in the evening.

    I notice a little bug on your solution, when I log in with github the url is https://fm-invoice-app.netlify.app/# and I had to remove the # to navigate to the site.

    Anyway you did an amazing job with animations and all the rest! Keep on coding :)

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    Hi Tielinen,

    your first solution looks really good and the code is clear and readable! Nice done! :)

    • to place images on the right bottom you could set position: relative on the info-card class and remove styles you add on <div class="image-container"> and add these styles on it
    position: absolute;
bottom: 0;
right: set the value equals to the left padding of the card;
    • one more thing, you start using h2 and go down to h3, I would suggest you to start with h1 and then move down to h2 etc

    Anyway everything looks good!

    Keep coding :)