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
OverviewSolutions36Comments25

All comments

  • Nguyen Dinh Tien• 40

    @tiennd12

    Submitted

    Hi, I just finished the desktop version of the challenge, mobile is not available yet :D

    My color format is not match with the design and I'm having difficulty in finding the matching color. I also found that my text is not aligned center with the button. I'd like to hear solution from others about the rating selection, mine seems unoptimized.

    I appreciate the help. Thank you.

    Interactive Rating Component using ReactJS

    #react

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi NGUYEN!

    Great work on this solution. Here are my few suggestions.

    • I think you haven't removed margin form the body looks like a white border.
    • Rating number are not accessible by the keyboard.
    • Adding transition on submit button would be better.

    Awesome work Keep going and happy coding.

    1
  • Nitin Kumar Pandey• 60

    @nitskp

    Submitted

    Can we use percentage and em simultaneously? When I was designing it got jumbled up. So, I decided to use pixels as it was working fine in this case.

    QR Code challenge

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Yes, you can but avoid using pixels most often use rem or em on font size. You can take on this StackOverflow question Should I use px or rem value units in my CSS? .

    Fantastic Work Happy Coding!

    Marked as helpful

    2
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi, ccreusat! Something unique makes people outstand. Fantastic on this challenge.

    Happy Coding!

    Marked as helpful

    1
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi Thiago, Something went wrong with your deployment. It shows our friend 404 error. Try deploying again on the root folder of the project.

    0
  • Ganesh• 280

    @Ganesh-Rathor

    Submitted

    using font is little bit difficult and what is the color of heading font

    QR code component challenge hub

    #accessibility#axios#backbone#django#chakra-ui

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi Ganesh! Great work on this challenge. I think you haven't seen the style readme file on the downloaded folder where they provide font-family and color for the project.

    Great work Happy Coding.

    Marked as helpful

    0
  • Saksham Singh• 10

    @sakssingh

    Submitted

    Hi!

    This is my first project in frontend mentor. I would really appreciate if you can review my solution and give some advice.

    Thankyou

    Order-summary card

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello Sakssingh, 👋 Amazing work on your first challenge. Here is my small suggestion

    • Just take a look at your report of your project for accessibility issues

    Great work Keep Coding, Happy Coding🤗

    Marked as helpful

    1
  • Wack• 30

    @Wack04

    Submitted

    Please feel free to comment on my mistakes and your opinions

    Flex-Box & Grid

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi, Wack04 Fantastic work on this challenge

    Here are my few suggestions

    • Consider using only one h1 tag as the top-level-heading only. The h1 tag is the most important heading because it’s the highest level tag that shows what your specific page is about.
    • The presence of more than one H1 won’t necessarily confuse the search engine, but it could dilute the SEO power of a single H1.
    • responsiveness of the site is great
    • Add :focus pseudo class to interactive elements like anchors, buttons, etc. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons, or inputs they have applied default :focus pseudo class with outline property. These default styles are subtle and hardly visible tho. Furthermore, every browser has a slightly different default style for the outline, so you probably want to change the default style.

    Great work Happy Coding and keep coding

    0
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello Sarajlija👋

    Fantastic work on this challenge Here are my few suggestion for your solution

    • In mobile view your footer has been squashed.
    • try adding some more padding on the article card and align your text center.
    • Looks great at desktop view 😋.

    That's it Great stuff. Happy Coding and Keep Coding🤗

    0
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, tenzind12 👋

    Great work on this challenge, Here are my few suggestions on your solutions.

    • Tip Calculator works only when the user clicks on the select tip. If the user changes the bill amount or number of people. It's not updating.
    • There is no indication which tip is currently selected use classes or radio inputs to manipulate dom
    • Your .p1 and .p2 font-size are too small and slim

    Well, that's it. Happy Coding!

    Marked as helpful

    1
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi ESMITH!

    Fantastic work on this challenge 🙌 . Your solution responds well. Here is are my minor suggestions for your solution

    • When I resized my screen to tablet size your .card fits the entire width of the screen you can use max-width for that issue.
    • Your .card__info__description font-size seems to bit smaller. It makes harder to read for poor vision peoples

    Well, that's it. Happy Coding!

    Marked as helpful

    1
  • TrakaMeitene• 505

    @TrakaMeitene

    Submitted

    Actually tried to make the arrow to animate after client scroll. Will try later, to make it not a pseudo class content , so I could do that. But it was fun to work with such a sunny design.

    Sunyside landing page with js and animation

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, TrakaMeitene!

    Fantastic work on this challenge. Here are my few suggestions

    • You have misspelled <!DOCTYPE html5> you should remove the 5.
    • Your .bildes overflows out of the window.

    You nailed it! Happy Coding

    0
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    I manage to make this website responsive without media queries. Feel free to take a look!

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Responsive 3 Column Card Component (No Media Queries)

    #accessibility#bem#lighthouse

    8

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Great work on this challenge. You have managed the responsiveness of the site very well that's cool. Keep up the great work!

    1
  • Saurabh VR• 320

    @saurabh1996-rex

    Submitted

    Wasn't able to provide the border-radius for the whole container. Please suggest me a way to tackle it.

    HTML, CSS

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, saurabh! 👋

    Fantastic work on this challenge, Here are my few suggestion

    • You can add border-radius on the main element and make it overflow:hidden;. By that you can have the rounded edges in the card.

    • You should also make it responsive for smaller screens 📱.

    • Add :focus pseudo class to interactive elements like anchors, buttons etc. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default :focus pseudo class with outline

    Good luck with that, have fun coding! 💪

    1
  • Talha• 120

    @TalhaAmjad0034

    Submitted

    It is my first upload in Frontend Mentor, I've learned a lot from this project,

    I have a question how can i all lazy opening of nav menu in mobile version, i struggled a lot but in vain.

    Thanks for having a look and giving me any feedback/criticism so I can improve :)

    Responsive Insure landing page using HTML SCSS and js (Desktop first)

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, Talha!👋 Fantastic work on your first challenge, Here are my few suggestions

    • When you are trying to apply transition property for display:none to display:flex, transition properties do not work. The reason is display:none property used to remove element from the dom. display:flex property is used to make flexible box layout it cannot be partly displayed. That is why the transition property does not work. You can use keyframe animation @keyframes navAnimation{0%{display:none; opacity:0; } 1%{display:flex; opacity:0;}100% {opacity:1; }}
    • another way is using transform property set transform:translateY(-100%) property in mainMenu this moves mainMenu out of the screen. When the nav is in the active stage change the transform property to transform:translateY(0).
    • Consider using the h1 element as a top-level heading only the reason for that is h1 elements are treated as top-level headings for many screen readers.
    • Your .links should be accessible for screen readers use <a href=""></a> tag for all your social link and Add some aria-label for your .links. This attribute is used to define a string that labels the current element. In your case these anchors have icons inside so screen readers users won't know what it is.

    Wish you Happy Coding!💪

    0
  • P
    tediko• 6,530

    @tediko

    Submitted

    Hello👋!

    It was one of the most enjoyable challenges I have done so far. When I saw that challenge requires a change theme I decided to add another functionality which is extra "custom" theme where the user can edit freely colors in theme modal. Many times, when I finished a certain function, I had an idea with another one, and I had a lot of fun doing it. Honestly, It took me more time to made this custom modal than the calculator itself - which itself was a good javascript challenge as well. You can use both the keyboard and the mouse to enter data into the calculator. List of things I learned or used creating this project:

    • Added customizable settings for 4th theme. User selected colors are saved in Local Storage so the settings are saved and loaded when the user will come back to the site. The user can set 13 options, but he doesn't have to change all of them, he can only change those that interest him. To get the color from user I used vanilla-picker library which creates a color palette from which to choose. Palette always show current set color of element you want to change so it is easy to adjust colors back and forth without searching for that color again.
    • Added prefers-color-scheme CSS media feature which is used to detect if the user has requested a light or dark color theme and save it to Local Storage. I made it with window interface matchMedia() method. It returns a new MediaQueryList object that can then be used to determine if the document matches the media query string. In this case prefers-color-scheme. Read more(1). How to detect user prefered theme in JS(2).
    • Implemented focus trap inside modal to make it ADA compliant. Focus trap in short prevent our focus go outside the modal once the modal is opened. Read more.
    • While displaying the result, I used toLocaleString() method to return a string with a language-sensitive representation of this number. In short it convert 3500 to 3,500 if in U.S. Read more.
    • I tried to make my comments more readable and transparent. For this purpose, I used JavaScript description comments which are equivalent to Python docstring. If you precede your function definitions with a description comment, VSCode will pick it up and include it as a tooltip. It’s like having MDN right there in your editor. Read more.
    • I used object literals instead of if statement in several cases. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this. Read More.
    • Of the things that are invisible at first glance, the calculator returns a error message after the user divides by zero and also after you calculate one result you can click/input equal button again and it will perform same operation again. For example 2+2=4 and another click will be 6 since result our previous equation was 4 and our last input was 2 so 4+2=6.

    You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

    Special thanks to @brasspetals for tossing an idea with the focus trap which she used in her project. No specific questions here but any additional feedback will be appreciated! Let me know if you spot any bugs. I know they're hiding somewhere! 😅

    Thanks! 😁

    Calculator - Mobile first, Sass, BEM, Webpack, vanilla-picker

    13

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Great Work on this challenge the calculator looks awesome.😍 I really liked the way of OOP in your code and I have learned something new from that. and Awesome work custom color selection.

    Happy Coding!💪

    1
  • Mallory• 120

    @azerroth11

    Submitted

    I feel like I did pretty good but I'm of course open for suggestions for improvements ! Thanks in advance :)

    Mobile first

    3

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, MALLORY!👋 Fantastic work on this challenge.

    Here are my few suggestions.

    • When I resized my screen to tablet view your .card seems to be too small. I think you have used mediaquery at 375px .You should increase your media query width to make it responsive
    • You can use max-width in the .card. So it won't grow when it hit the certain point.

    Wish you Happy Coding.💪

    1
  • Khang Duong• 10

    @khangbeo

    Submitted

    I did this for desktop first. Haven't figured out how to do mobile yet. Feedback welcome. I have to go back and change some stuff, but I'm proud of my first challenge attempt. I will resubmit a responsive, mobile-first design once I learn how to.

    Stats Preview Page with HTML and CSS

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi, KHANG DUONG! Fantastic work on your first challenge

    • You can have a overlay on the image element and use mix-blend-mode:multiply on the overlay change the opacity to opacity:0.75; to make it look like design.

    • I Suggest you to have a look on Mediaquery documentation. to make it responsive

    Great work!😍 Happy Coding💪

    0
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, Andrej!👋

    Fantastic work on this challenge.

    Here are my few suggestions for your solution

    • You should increase your font-size in .paragraph to allow users easier to read
    • You should change font-family in .paragraph according to their style guide
    • When resizing to mobile view there is more breathing space on the top of the .btn. Instead of specifying min-width in .cars__item you can make your .btn as display:inline-block and add margin-top to that.

    Wish you Happy Coding💪

    0
  • Nilanshu V Rajmane• 125

    @nilanshu96

    Submitted

    How can I get border radius working without using overflow:hidden on the container when there's a background image on a child div?

    CSS and HTML

    3

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, NILANSHU RAJMANE'S!👋

    Well done on this challenge

    • you can use border-radius for both of your child element image,image__tint.
    • When resizing the screen the card hits the end. there is no breathing space for the card. you can add margin get some breathing space.

    Amazing work. Happy Coding💪

    1
  • Harish• 10

    @harishcalvin

    Submitted

    Hi, This is my first project, built from scratch. I built my best, please share your feedback and tips to improve my code. Thanks :)

    Stats-preview-card-component

    3

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, HARISH'S!👋.

    Fantastic work on this challenge

    Here are my few suggestion for you

    • In mobile view the card image has been broken. To fix that src="./image-header-mobile.jpg" You should period . in front of your image path.
    • Your card-content has more breathing space on the top make use of that. You can move your card-content slightly upwards.

    Yep! that's it Good work Happy Coding💪

    1
  • Siddhant Kashyap• 30

    @asksid27

    Submitted

    justify-content wasn't having any effect on mobile version, I tried space between but was having some problem with height(I think). Please help me with those spacings. Any more suggestions will be appreciated.

    Basic HTML and CSS - Desktop first

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, SIDDHANT KASHYAP'S!👋 Your solutions responds very well Here are my few Suggestion for your solutions

    • In mobile view in card Element you should not specify the direct height of 90% the height should be taken by the content of the element
    • it's seems like you haven't changed fonts in your project.
    • In mobile view .content h1 text must be be aligned center.
    • You should set some breathing space for stats children. It is to close to each other

    Yep! that's it!😍 Wish your Happy Coding💪

    2
  • Waleed Alharthi• 90

    @waleed-cs

    Submitted

    Hey, I have a couple of question:

    1- how to get the image similar to the preview? (cropped from right)

    2- how to change the share image to the white color when I hover the mouse on it?

    HTML/CSS/FLEXBOX/JS

    1

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello, Waleed Alharthi. 👋

    Your solution responds Preety Good.

    • You can use max-width for your drawer image` to get similar preview of the image.
    • If you are using the svg in a image tag, it is not possible to change anything within the SVG.
    • To the svg color on hover you have to include the whole SVG inline in html.
    • Use @media mediaquery to make it mobile responsive.

    Happy Coding.😊

    0
  • Ursula• 610

    @UrsulaSpela

    Submitted

    Hi! I have a problem aligning buttons. Does anyone know how to fix it?

    3-column-preview-card

    2

    Dinesh• 1,115

    @Dinesh1042

    Posted

    Hello URSULA'S! 👋

    Good job on this challenge! Your solution responds well, here's my few tips:

    • Don't use percentages for your margin use em units or rem units for margin , padding and for other stuffs
    • use should use max-width in your elements so it won't enormous long in the larger or desktop
    • You should make it responsive by using media query

    Good luck with that, Happy Coding😊

    0
  • Dinesh• 1,115

    @Dinesh1042

    Posted

    Hi, soransh singh!

    Good job on this challenge. You can use regex expression on email validation. There is a outline in your button which moves your entire form upward. Your solution Awesome!

    Happy Coding!.😍

    1