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
OverviewSolutions10Comments175

All comments

  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey sheikhhaseeb559. Congratulations on uploading this solution. I see you've been putting in the work even during the holidays 👏 You have improved with the responsive design! That's a good milestone 🥳 The key thing I'd love to address here is the layout. I gleaned over your code and realised that you rely so much on the position: relative; attribute to move your components to your desired space. This method doesn't maintain the consistency of the layout across different screen sizes. I suggest you take a look at how to use flex or grid these will do you a lot of help with your layout. Here are some resources you can use: flex-tutorial and grid-tutorial. I hope this helps you a bunch! Happy holidays and happy coding! 🎉

    Marked as helpful

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey sheikhhaseeb559, It's good to see that you have uploaded another solution. I like that you have integrated media queries into your css now! Kudos 🥳! Anyways, I looked at your css and noticed that there's a few things you could add to enable your container to be placed in the middle of the viewport. Here's some code you can add to your <body></body> tag:

    body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Then you can make these changes to your container element so that the previous changes can be effective... Remove the following styles from your <div class="container"></div>:

    .container {
    position: absolute;
    left: 300px;
    top: 90px;
}

    Congrats on completing the challenge, happy coding!

    Marked as helpful

    0
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Bongani Masango, Congrats on completing your challenge! I had a look at your code and found that you set flex-col without setting flex first in your tailwind css. This would have enabled you to use flex instead of grid which would be great for this solution and then you'd change to flex-row at the desired screen width. This would prevent your divs from separating. Otherwise, I think this is really great!

    Marked as helpful

    0
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey sheikhhaseeb559 this looks impressive and I'm glad you learned about text and alignments and how to work with images after completing this challenge that's a great start! Your challenge however lacks 2 things that is:

    1. Responsiveness: This helps your solution or website to be viewed on different screen sizes. If you want to learn more about this you can visit w3 schools responsive design. It's a critical design principle.
    2. Layout alignment: You could consider learning about flexbox. It will help you to position your main card in the centre and it's useful for most of the times you are going to manipulate the layout. I also took time to look at your css code and realized you were using id's as selectors. It's not wrong if you are going to style one specific instance of an element. It's better you stick to classes cause the code between classes can also be shared with other elements.

    This is a good solution. Keep up the good work!

    Marked as helpful

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Arun Bohra. I think this is near perfect and it's responsive. You could just add a shadow to the main card and It'll make it look a lot more like the design.

    Happy coding!

    1
  • Leonel• 160

    @leonellv94

    Submitted

    -What did you find difficult while building the project? Grid took me a while.

    -Which areas of your code are you unsure of? Grid again, i think it wasn´t a good coding even when i finished it.

    HTML, CSS, CSS Grid (justify and align contents)

    4

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Leonel! Great solution it's looking pretty sharp 👌 I took a peek at your code and it's actually neat, don't beat up yourself too much on that. I also had a hard time writting proper css when I started out. It gets better with more and more practice. Also I like how you are using grid for your layouts, you are among the rare breed 😎

    • In anycase, if you prefer using grid for your layouts, it's better you apply it to the parent container and then you use flex for the container's contents. To learn more about grid and how to use it, you might want to check this out css grid.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • You might also want to add a little bottom-padding to your div with the class attribution so that it's not so much at the bottom border. It'll make the solution look a little neater. Keep up the great work and keep on coding!😎

    Marked as helpful

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Troy! It's great to see that you have uploaded yet another awesome solution. Your report is looking so clean, kudos! 👌 Anyways It's responsiveness is consistent on all screens but I think it'd be a lot better if you switched to one grid column at a minimum screen width of 650px because your card component still fits in the layout even at that screen width. (I also recommend using pixels instead of em or rem to specify screen widths in your media queries)

    • You might also want to add a hover state to your button to give it a more interactive feel and make it look less static. Otherwise, this is a very solid solution, keep up the great work and keep on coding! 👍

    Marked as helpful

    1
  • P
    ApplePieGiraffe• 30,545

    @ApplePieGiraffe

    Submitted

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    Pure CSS FAQ Accordion Card With Sweet CSS Animations

    #accessibility#sass/scss

    19

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    @APG, this is a very great solution! I like the blobbing animation and I think I will make use of that gradient changing resource. It might have been a year ago but man am I so glad to see you submit a solution (It's like that feeling when a marvel movie drops 😁).

    What library do you use for animations these days?

    Marked as helpful

    1
  • Jesus Rebeitte• 110

    @Rebeitte

    Submitted

    For this solution I used html, css and vanilla JS. I used a for loop to iterate over the botoms to select the ranks, also I added a buttom to close the submit page.

    I'm open to any advice, I had problems with the rating point, because I wanted to print the option that user selected and not only "You selected 4 out of 5".

    interactive rating component main using HTML, CSS and Vanilla Js

    2

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Rebeitte! Congratulations on completing this challenge! It looks really sharp and I hope you had fun completing it. 👏 Here's a few pointers:

    • To answer your question, you might want to add an id tag to the <span> that contains the number 4 in your html. Then you can select that span in your javaScript using document.querySelector( '#element' ) or whatever selector you are comfortable with. So you need to save the value of the button selected by the user in a variable and set that variable as the innerText property of the <span> in your javaScript. To know a little more on innerText, follow this link

    Happy coding and keep up the good work 👍

    Marked as helpful

    2
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Nathan! Congratulations on completing this wonderful challenge! Looks like you had lots of fun doing it and I also love tailwind css 😎 Here's a few pointers:

    • The solution is quite responsive but I think it can be more responsive if you apply some styles to the card at screen widths between 726px - 1168px you can just increase the width of the card to 75% of the screen so that your components within your card can be displayed better and your layout won't break.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work👍

    Marked as helpful

    1
  • Víctor Andrés Hurtado Gutiérrez• 310

    @vianhg

    Submitted

    Maybe I'm too newbie but to me, it was very difficult to try to organize all the CSS style and changes from mobile to desktop. I think my main question is about what tips there are to figure out all the CSS spaces/margins/paddings to replicate the layout

    CSS Grid, CSS Flexbox, Vue, SASS

    2

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Victor! Congratulations on completing this great challenge. Your solution is pretty solid!😎 Here's a few tips and some suggestions to your inquiry:

    • Figuring out the css spaces/margins/paddings comes with some little experience. The more you practice is the more you figure out some general patterns and you also get more comfortable with css units like px, rem, em etc. So don't worry about this, just keep on practicing and also look at how other people write their code to be able to notice those common patterns and to borrow a few ideas. You did really well with this solution!
    • You might wanna use heading tags (<h2> - <h6> ) in your <article>. In your case, you have two options, you can use <div> instead of the <article> because the div doesn't require you to add heading tags or you can make the headings to your articles <h2> tags. This will clear all your HTML validation issues
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the great work! 👍

    Marked as helpful

    1
  • 12nuskek• 20

    @12nuskek

    Submitted

    What did you find difficult while building the project? The most difficult thing was probably trying to resize the image correctly.

    Which areas of your code are you unsure of? The CSS is quite messy as i didn't build the site with mobile in mind initially.

    Do you have any questions about best practices? I've used random bits of padding and margins in certain places. It works but is this really the best way to do this. they are all in px as well. Should i be using a different format?

    Product Preview Card Component Challenge

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey 12Nuskek, congratulations on completing this challenge! I hope you had lots of fun doing this! Here's a few tips and a few answers to your questions:

    • Getting around image sizes can be cumbersome sometimes but incase you don't want to do it all the time, place the image in a container and then set its width and height properties to 100% so that it occupies that container and then you can set the size of the container to a percentage relative to it's parent element say width: 90% and the image will always resize according to the change in the size of its container.
    • Your CSS code gets cleaner with time so long as you keep on practicing, I looked at your code and it was quite messy but It's still very readable so that is good! You can just look at how some other people write their css and you'll be able to borrow a leaf or two.
    • It's okay to use your padding and margin values in px as a matter of fact most people use px to set their margin and padding properties. Also yes, it's always advisable to add margins and paddings where necessary.
    • You need to add an alt text to your images. This is because it tells the browser what image is being displayed and this can also help those using screen readers to know what image is being displayed on the website. It will also clear some of your HTML validation issues and accessibility issues
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work! 👍

    Marked as helpful

    3
  • Olena Hladkova• 10

    @olenahladkova

    Submitted

    It looks like I could do it more elegantly, but I tried to make a result as close to images as possible. I believe it would have been much easier with Figma files, but without them, it is also some challenges.

    Product preview card component using CSS Flex

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Olena! Congrats on completing this challenge. I think you nailed it so well and while it might have been a lot more easier with the figma files, sometimes we need to be able to work without them and you did so well 🎉 Here's a little pointers:

    • You might wanna apply the background color to the body instead of the main section so that you can avoid the white spaces that are surrounding your page.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the great work! 👍

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey David! This is a great solution, kudos to completing the challenge! 😎 Here's a few pointers you could use:

    • I think you should make the card and it's components a little bigger for easier readability cause they are very small at the moment. Maybe you could try a width of 400px and a hieght of 400px to be on scale relative to the width. Then you can resize your internal components to also scale relative to the card they are contained in.
    • You could add the aria-label property and set it to star icon button to your button incase you were not going to add text because the browser needs to identify what button that is and it also helps those using screen readers. Your button should look like this <button aria-label = "star icon button"> <svg><path></path></svg></button> That will resolve some of your accessibility issues.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work👍

    Marked as helpful

    1
  • P
    Stephen Lyssy• 30

    @Slyssy

    Submitted

    I think I did ok on this. One thing I noticed is that after I deployed, the location page address section did not fit directly under the map. It works fine when I inspect it in google chrome, but not on my iphone. I overcame this by setting the z-index to 1 for the address section, but all this does is put that section over the map. Not sure why it does this, and any feedback would be greatly appreciated.

    Art Gallery landing page and location page. CSS Grid and Flex

    2

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Stephen, congrats on completing this challenge, It must have been fun!!! Here's a few pointers:

    • I also checked out your solution on my phone and it seems okay. The location page address section is also fine on my computer when I inspect it. I don't know what the problem could be or what browser you are using on your phone. Also, z-index just sets the z-order of positioned elements and those elements with a higher z-index overlap those with a small one so it wouldn't help with positioning an element beyond it's z-order
    • Having a Div within a button is sure to generate some errors, you might consider just removing the divs containing the button text and the <img> tag and you could just let me be as they are so your code will look like this <button> text <img></img> </button> That should solve some of your HTML validation issues.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy Coding! 👍

    Marked as helpful

    1
  • Rick• 270

    @joyrexjrl

    Submitted

    Any feedback would be appreciated. doing as many of these smaller projects as I can to get "gooder" as the kids say (perhaps) now and days.....

    NFT preview card

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Rick, congratulations on completing this wonderful challenge! It looks pretty awesome and I think the responsiveness is pretty great! I am only here to address the accessibility issue on your report! In order to resolve your accessibility issue, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the great work 👍

    Marked as helpful

    1
  • Vani• 160

    @VANIMEHTA

    Submitted

    I have used jquery in this project and my site was working perfectly fine before deploying it. ie all the dropdown menu and active states were working. But none of this feature is working after deploying Can someone pls help with this!

    Intro section with dropdown navigation

    #jquery

    3

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Vani, congratulations on completing this challenge, it looks pretty solid! 💪 Here's a few pointers that could be useful:

    • I looked through your code and ran it on github desktop to findout what the jQuery problem was, sadly I couldn't figure it out because it also ran on mine and if I am being honest, I have used very little jQuery but once I come up with a solution, I will notify you!
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • You need to add an alt text to your images. This is because it tells the browser what image is being displayed and this can also help those using screen readers to know what image is being displayed on the website. It will also clear some of your HTML validation issues and accessibility issues

    Happy coding and keep up the great work! 👍

    0
  • Billeh• 10

    @scegob

    Submitted

    This was my first time following along to a style guide, it gave me great practice with following along with it it. I would like to get more done with mobile first design. The area I was unsure of was to get it more to the center but it is

    QR code challenge

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Billeh, congratulations on completing this challenge! I hope you enjoyed taking it on 😎 Here's a few tips to help you completely annihilate this challenge 💥 :

    • I noticed that you used display flex on your body element and it flexed your attribution div and the card component in a horizontal direction. In order to fix those issues, you might want to add the following styles to your body.
    body {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

    Just add them, it will center your card and let your items be flexed in a horizontal direction.

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work!

    0
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Refael, congratulations on completing this challenge! Was it fun? I hope it was 😃 Here's a few pointers you might find useful:

    • On the mobile view, your card's layout breaks making it lose it's centeredness. I looked through your code and realized that you used grid for your layout. Therefore, you might consider adding the following properties to your body
    body {
  height: 100vh;
  background-color: var(--cream);
  display: grid;
  align-items: center;
  justify-content: center;
}

    It should center your card on both desktop and mobile view.

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work!👍

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Muhammad, congratulations on completing this challenge! I hope it was a fun adventure 😎. Here's a few pointers you might find useful:

    • For the case of font-weights I think you were pretty close to the original design but if you want the exact thing, if you read the style-guide.md file provided along with the design files, you will be able to know which font-weights were used in the actual design.
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work

    Marked as helpful

    1
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Louis, congratulations on completing this challenge! Your solution looks pretty neat. To address your question, you could add the following properties to your body element!

    body{
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
}

    That should center your card component vertically! 😁

    Here's a few other pointers:

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • You might not want to use <p> as the child element of your <span> tag but the reverse is true, I think you should consider using <p> Your text <span> your special text </span> more text </p> this is becaue a <span> is an inline element as opposed to a <p> which is block level element. This will also fix most of your HTML validation issues.

    Happy coding and keep up the great work👍

    0
  • Lasha• 50

    @lashaarveladze

    Submitted

    Hey guys 👋 Hope you have a great day!

    This is the first project which I made here and I have some questions about it.(Just learning HTML & CSS)

    1. Can you give me some advice about how to write clean code? What you will change into my code to improve it?

    2. Also I am struggling to make responsive design and will be happy if you give me some advice about that too.

    Thank you 💖

    Product preview card component

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Lasha, this is a very neat solution congratulations on completing your first frontend mentor project 🥳 To answer your questions:

    1. Your code is very neat and organized! Both the HTML and CSS, I wouldn't change anything apart from adding landmarks in your HTML because In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    2. Responsive design has always been a hustle for most people when starting out with CSS and I am no exception 😂 but you get the hang of it the more you practice making responsive designs and incase you'd just want to expand your knowledge with responsiveness you could check out this tutorial (Follow this link) [https://youtu.be/Xig7NsIE6DI]. I hope it helps you!

    Ps: Your heading tags should only increase by one ie when you have just used a <h1> tag, your next heading tag should be <h2> and after that <h3> and it continues like that all the way to <h6>. So they have to be in a sequential order. This will also clear some more of your accessibility issues.

    Happy coding and keep up the good work!

    Marked as helpful

    1
  • dvbenthem• 110

    @dvbenthem

    Submitted

    Hello Coders,

    This my first project and i hope to get some feedback on how to improve my code. I always struggle to pick the correct class names. Also having trouble picking the right HTML tags. I looked to some other examples and they use for example <section> tags.

    I'm also curious what you think of my css code.

    Greetings, Danny

    3-column preview card component

    1

    Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey DVBENTHEM, congratulations on completing your first frontend mentor challenge! I hope you had fun doing this 😎 About the class names, don't worry, that happens to almost everyone you'll be surprised by how people name their classes 😂 Also, on the point of HTML tags, you just need to read a little more on the essential HTML tags on (this link)[https://developer.mozilla.org/en-US/docs/Web/HTML] the more you write HTML code is the more you are able to discern which tag to use in a certain instance.

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

    Happy coding and keep up the good work!

    Marked as helpful

    2
  • Tesla_Ambassador• 2,980

    @tesla-ambassador

    Posted

    Hey Mariano! Congratulations on completing your first challenge on frontend mentor. It's a really great milestone, kudos! Your solution is really great and I love how responsive it is, what you did with the ratings as the screen width reduces was really great.

    Here's a few pointers to help you resolve some of your accessibility issues:

    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • Your heading tags should only increase by one ie when you have just used a <h1> tag, your next heading tag should be <h2> and after that <h3> and it continues like that all the way to <h6>. So they have to be in a sequential order. These will help resolve most of your accessbility issues

    Happy coding and keep up the good work!👍

    Marked as helpful

    2