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
OverviewSolutions25Comments100

All comments

  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Karthik,

    Take a look on score part. Every game I won, I got -1 points which should not be correct.

    1
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Samuel,

    Overall, you did great job congrats! You should have a look on your HTML and accessibility issues. There is a lot of issues so make sure to look at every and learn much more about them. Also, I saw that you used a default font-family so make sure to have a look in style-guide and to import proper font-families in your css, or link them in your HTML, button need more padding on top and bottom, and also line-height should not be 2 (too much). I think 1.6 would be perfect.

    *important: take a look on your markup and try to use semantic html, like h1, h2, h3 for headings, subheadings etc., button for buttons (not span with class of button), main etc.

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Try using smoother border-shadow on buttons and take a better look for footer color. They are not the same with the color from design. 😃

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hey Makson, great job! Well done 😊🙌 I suggest you to add load event on window element and delete value of inputs

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hey friend, take a look for your accessibility issues. There are a lot of them. Also, you should set smaller padding and in my opinion don't use fixed values (px) for your main container because on smaller screen's than yours it looks narrowly and there is no enough white space.

    Your solution does not meets the criteria of a given design. You should make also mobile version of this solution.

    Marked as helpful

    1
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hey Pranav, I just take a look on your solution. It looks very nice 😃

    I recommend you to do a few more things to make it better:

    • Add cursor pointer to your cards and also some transition on hovering over them
    • You have SO much accessibility and HTML issues so definitely you should take a deep look into it, change it and then generate new report
    • On mobile version border-radius looks weird

    Hope it helps!

    Marked as helpful

    1
  • Aymen-Ben-Massoud• 100

    @aymen-ben-massoud

    Submitted

    image not showing in live server in github and vs code works why???

    first card

    1

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hey Aymen-Ben-Massoud, you need to set . before /images (so, ./images/url) to make your image visible. You type correct path but you need to set . before backslash.

    Also, check your accessibility issues and then generate new report when you're sure that you correct all of them.

    Hope it helps 😊

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hey Jerry, very nice solution! Congrats 🎉

    I would only suggest you to always have some hover effect on interactive elements such as buttons. Also, then you should have some transition to make hovering nice and smooth.

    Keep having fun while coding! 😁

    Marked as helpful

    0
  • Syazwan Fitri• 400

    @syzwnftr

    Submitted

    Hi, any feedback for improvement are greatly appreciated. I added a wiggle animation on this challenge and I would like to hear some thought about it. Plus, I fairly new to JavaScript and it would be really nice if someone can review my code.

    Intro Component With Sign Up Form | HTML, CSS Flexbox, JS

    2

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Awesome work Syazwan! I really like error messages. Do you have any advice where I can learn JS from scratch?

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Mainul, very nice solution!

    I have a few suggestions for you:

    • You need to set box-shadow on your white boxes
    • Try to avoid horizontal and vertical scrollbar. For horizontal scrollbar you should delete min-width: 100vw; from body and for horizontal scrollbar you need to set margin: 2rem; instead of 5rem and also on body overflow: hidden;

    Marked as helpful

    1
  • Patryk Besler• 355

    @beslerpatryk

    Submitted

    Hello everyone 👋 This is my "Sunnyside Agency Landing Page" solution using pure CSS and JS. If you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a frontend developer. Thank you 😁

    Sunnyside Agency Landing Page | Pure CSS & JS

    1

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Patryk, again 😆

    You did very nice job, here. I really like this mobile menu. Do you have any advice where I can learn JavaScript. It would be the next step in my learning process.

    Also, I have two suggestions for your solution:

    • You set max-width to body element and on desktop you have some white space on each side. Try to have some container with max-width and width and then add element in it
    • Making some animation on header arrow would be pretty nice. Try to do something with transform: translateY; to make it move vertically

    Keep coding, having fun and also learning! 😃

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Hao, I don't have any suggestion for your solution. Awesome work man, congratulations!

    Marked as helpful

    1
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Johnnatan, congratulations on completing this challenge. It looks great! I have a few suggestions for you:

    • Always add cursor: pointer; to your buttons
    • In why us box you don't need a bunch of paragraphs. Try this with unordered list with list items. It would look much cleaner in your code and also it is more semantic
    • Try to find the way to center text per month

    Marked as helpful

    0
  • Patryk Besler• 355

    @beslerpatryk

    Submitted

    Hello! 👋

    This is my " Huddle Landing Page" challenge solution using pure HTML and CSS. I tried to follow semantic markup rules and make my code as clean and easy to read as possible. Do you know any good tips for creating social media buttons like those in this project? I spent too much time fighting with the alignment and size of this element and I am almost sure there is more elegant way to do it.

    As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as an aspiring front-end developer. Keep in mind that I always try to return the favor 😏

    Huddle Landing Page with Pure HTML and CSS

    2

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Patryk, well done on completing this challenge. You don't even have accessibility or HTML issues and it is the best answer on your semantic HTML that you wrote. Very nice!

    Otherwise, I have a few suggestion for you:

    • Make logo bigger and add some margin bottom on them
    • Add transition to your button
    • Social icons looks awesome. I would add some transition to them. Try it!

    On mobile screen I would make bigger logo and that's it! Keep learning, enjoying and have fun! 😁

    Marked as helpful

    1
  • Stephane Jean• 360

    @distephano30

    Submitted

    Good day,

    Here's my solution. Waiting for your feedback.

    What solutions do you use to get the social icons?

    Using HTML and CSS only

    1

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    There are a few things you can do better on mobile screen:

    Try to add some margin on top and bottom because logo is stuck on top, there is no white space. Also, make heading a little bit smaller. Try to solve the problem with image on mobile screen because it is very stretched.

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Medjahdi! I like your solution. It matches the design 100%, congrats!

    Keep doing good work!

    0
  • Mahmoud• 185

    @Mahmoud-Elshaer-10

    Submitted

    Please provide your feedback. Any suggestions are most welcome!

    HTML CSS

    3

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Great solution Mahmoud! 🤩

    Add some hover effect on button and it will be perfect.

    Marked as helpful

    1
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Gabriel, congratulations for completing this challenge! I have a few suggestions for your solution:

    • Your header element have too much padding
    • In my opinion you should make logo smaller
    • Make social icons bigger and also make bigger heading
    • Give button some white space

    On mobile screen make heading smaller and reduce line-height. Also, get some margin for social icons because they are stuck to the bottom

    PS. Check your HTML issues. They are pretty important :)

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Mainul, nice job! 😄 I have a few suggestions for you:

    • This should be a landing page so you have to avoid vertical scrollbar that you have
    • Add transition on button and svg images
    • Heading should be bigger

    On mobile screen is everything okay but in my opinion button is too large and heading is too small

    Marked as helpful

    1
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Stephane, well done! You make great solution for this challenge 😃 I have a few suggestions for you:

    • Always add :hover and :focus on buttons and links. You need it here and also add later some transition to make hover smooth and nice
    • Try to add some hover animation on social svg's. I suggest you to take a look on my solution and see how I have done it. It may be useful 🙂
    • For <a> tags you need to add aria-labels

    Check your accessibility and HTML issues. They are pretty important these days

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Take a look on your HTML and accessibility issues. Also, add background color to body and make attribution outside of the main card

    0
  • Jakub• 210

    @flexer89

    Submitted

    Hi, please share your feedback and let me ask some questions.

    • I didn't get any background images so i made it from scratch using HTML/CSS. Was it good?
    • Sometimes i still have difficulties with css properties order. Is there any system or pattern how to arrange them, or there is just a freedom?
    • Is it a good practice to comment the code like me? I mean CSS code

    Responsive Chat App ilustration with animations

    2

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Jakub, I did this challenge a few days ago so I think it can be helpful for you to hear my suggestions.

    First, I will answer on your questions.

    • Every challenge on Frontend Mentor should be from scratch but in this case you did not have any images so you have to use only CSS. I think you did good job
    • You shouldn't have problems with properties order. They are only specificity. I recommend you to have a look on w3schools about it or on Mozilla Dev Network
    • You should always have comments on your code, so it is awesome

    Also, I have a few suggestions for your solution:

    • Make heading and paragraph text smaller on mobile devices
    • Chat text shouldn't be bold

    Marked as helpful

    0
  • Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Yousef, I have a few suggestions for you. This challenge should be a landing page so it is unnecessary to have a vertical scrollbar. You have to avoid it with reducing padding that you added to containers. Also, in my opinion much easier way to do this challenge and have a responsive landing page is to have one main container and inside of them top and bottom section. You wrap everything in main element.

    On mobile devices it looks very nice so well done!

    I suggest you to take a look on my solution :)

    Marked as helpful

    1
  • Mahmoud• 185

    @Mahmoud-Elshaer-10

    Submitted

    Please provide your feedback. Any suggestions are most welcome!

    HTML CSS

    1

    Dušan Lukić• 1,660

    @dusanlukic404

    Posted

    Hi Mahmoud! I really like your solution. There is no issues - GREAT!!!

    I recommend you to use 3rem for margin-top and margin-bottom instead of 10rem because it should be landing page so you don't need vertical scrollbar. Also, when you change that set overflow: hidden; to your body element.

    • (If you change things like I said also do this)
    • In your media query for mobile devices you can add margin-top and bottom.

    Marked as helpful

    1