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
OverviewSolutions8Comments49

All comments

  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    tediko• 6,580

    @tediko

    Submitted

    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

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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

    @sirriah

    Submitted

    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

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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

    @trudihub

    Submitted

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

    Photosnap Website

    1

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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

    @axseinga

    Submitted

    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

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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

    @BBrownley

    Submitted

    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

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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
  • David Oluwatobi Ebenezer• 235

    @EbvidPro

    Submitted

    1. Is my code neat enough?
    2. Please someone should help me with the image filter, I was not able to do that.
    3. Point out some necessary aspects I still need to improve on.

    Thanks.

    Using CSS Layout

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

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

    1
  • Omer Mahdi• 85

    @iam-omer-mahdi

    Submitted

    do you think there is something i should add or remove ? do you think there is something i could have done better ? rate my work 1 - 10 ?

    Vue js, Vuex, Axios, Gsap, Sass

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

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

    1
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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!

    0
  • Kadheryna• 200

    @kadheryna

    Submitted

    I'd like to receive feedback on my code :)

    Grid page

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    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

    0
  • p1t1ch• 390

    @p1t1ch

    Submitted

    Created my first fullstack app on the serverless technologies: Netlify Functions + Netlify Identity + Hasura. Based on the Gatsby starter as always... So this turned into a journey 3-weeks long! Also it should be 100% keyboard accessible. Would appreciate your feedback 😉

    P. S. Invoices are saved in the database, and I cannot let everyone to edit public invoices (otherwise the list would be empty a few moments later). So to test the app you need to login first (with Github account for example) to CRUD your own list of invoices

    Invoice app on serverless

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

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

    1
  • Janne Tielinen• 90

    @Tielinen

    Submitted

    Hello everyone, this is my very first Frontend Mentor solution.

    I tried to focus every detail on design as well as I could, and write well structured simple, easy to read code.

    Is there simpler, or best-practises to place elements right/bottom corners of their containers? Like images are in this solution.

    What is the best way to place info-cards to "cross" formation on desktop screens?

    Where you think I did good? What one thing you would change in my code, why, and how?

    Thanking in advance Janne

    Mobile-first solution using CSS and Flexbox

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

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

    1
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi @giosassis

    You did a good job on this challenge! Looking at your code I've some suggestions on how you could 'improve' it.

    • you could use the main tag as your main container instead of apply some styles on the body tag and add
        background-color: #e6eff6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    • then you would have to restyle divs with class="main" and class="main2"

    I think doing this would make easier for you to code a responsive website. Feel free to ask whatever question you need :)

    Keep on coding:)

    0
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi @gamb14, you did a really good job using React for the first time. You split the page in smaller reusable components and all code is understandable and clean!

    I haven't anything to suggest you except to keep on coding and have fun!

    Happy coding :)

    0
  • Vinicius Scarabelli• 130

    @S0NES

    Submitted

    So i have this challenge for myself to do 1 project every day and unfortunately i couldn't make the footer part to work in responsive the way it should. if anybody can help me solve that i would love to give it a try.

    Hundle landing page w/ curved section

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi @S0NES you did a good work on this project! Looking at your code I've a few suggestions for you

    • you could change the h1 inside your divs with class="panel" to a h2 tag because they have different font sizes and to be more consistent about the design
    • you could use the main tag instead of section tag and add a footer tag to wrap all elements which goes inside it

    What would you do about the footer on mobile?

    0
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi pvcodes!

    As @ApplePieGiraffe said you did a good job on it.

    I've noticed a few things

    • on mobile view the div with class="social-icons" overlaps the paragraph text because you used position: absolute setting right and bottom. I suggest you to remove this styles and add to center elements
    display: flex;
justify-content: center;

    Keep on coding :)

    0
  • Mohammad Bilal• 10

    @mbilal1109

    Submitted

    I didn't do a mobile design because that's something I'm still learning, but other than if there any changes you guys think I can make feel free to let me know.

    Used only HTML and CSS

    2

    P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi Mohammad! You did a good job. Looking at your code I've some suggestions

    • you used ids on all of you h3 tags <h3 id="black">, an id must be unique, in this case you can use classes instead, <h3 class="black">
    • I suggest you to create a div for the card and put card's elements inside it

    Keep on coding!

    0
  • P
    Marko Nikolajević• 1,065

    @MarkoNikolajevic

    Posted

    Hi Adedamola! As your first time you did a really good work!

    Looking at your code I've some suggestions for you

    • <section id="details" is missing the closing >
    • you can add the lang attribute on the html tag like <html lang="en">

    For the rest, your code is clear and understandable! Good job!

    Keep on coding

    0