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

All comments

  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    1
  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    1
  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    1
  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    0
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    Hello👋!

    Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

    • Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
    • Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
    • For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
    • Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. I used it in my resets so every element with animation apply to that.
    • I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
    • Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

    I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

    No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility

    5
    Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    1
  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    1
  • Tereza•605
    @sirriahSubmitted over 3 years ago

    Hello! Well, this almost drove me crazy :D I spend few days thinking about the layout. I couldn't decide if I should use CSS Grid or Flexbox. First I try to use Flexbox, but when I finished mobile view I started again with Grid. Positioning was little bit tricky, but I made it. But then, I opened it in Chrome :D and everything was broken. I used properties like grid-template-columns: subgrid, padding-inline, padding-block, margin-inline etc. And this is not supported in some browsers - so I recreated it again. Please, look at my solution and tell me, what I should improve. I always have a problem with semantic html. Have a nice day and Happy coding! 👋👩‍🦰

    Creative Single Page Site / CSS Grid, Mobile-first, Sass, Vanilla JS

    3
    Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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

    1
  • trudihub•140
    @trudihubSubmitted over 3 years ago

    Hey everyone, I built this photosnap site with react and styled-components. Mainly used grid layouts. Any feedback is appreciated !

    Photosnap Website

    1
    Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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!

    1
  • Axseinga•430
    @axseingaSubmitted over 3 years ago

    Hi there,

    The website looks good only at the 375px and 1440px resolution. Please let me know how I can improve my code so it is more responsive and looks alright in every resolution. The biggest struggle for me is to position elements on top of each other - the background does not resize accordingly and the buttons go over the place. The flexbox containers resize ok on mobile version however they do not on the desktop and I do not know from where it comes from.

    All feedback really appreciated! Thank you!

    Mobile first using SASS and BEM + vanilla js

    1
    Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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 :)

    0
  • BBrownley•50
    @BBrownleySubmitted over 3 years ago

    This is the first project I'm proud to show off in my portfolio, however, I'm unsure about my code quality/style as I've never had it reviewed and I tend to just go with whatever works. I was wondering if there are any improvements I can make in regards to that? Anything else I can improve on?

    React site with styled-components

    1
    Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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! :)

    1
  • Marko Nikolajević•1,065
    @MarkoNikolajevicPosted over 3 years ago

    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! :)

    0