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

Submitted

NFT preview challenge using HTML and CSS

Nitesh Singhβ€’ 40

@niteshh-s

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am new to Web development. I Made this website using beginner level HTML and CSS. No bootstrap used. It appears perfect on desktop screen. I would really appreciate if anyone can suggest me how can i make this website completely responsive.

Community feedback

Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

Hello Nitesh Singh ! Congo πŸ‘ on completing this challenge

Let's look at some of your issues, shall we:

  • Check my article on accessibility issues

  • Always use h1 first and then h2, h3 and so on

  • Headings should only increase by one use h1 first then h2 etc..

  • Warp your card content around the main tag Ex: πŸ‘‡

<body>
<main class="container">
*all you content here*
</main>
</body>

If you use vs code the check this article

happy CodingπŸ˜€

Marked as helpful

0

Nitesh Singhβ€’ 40

@niteshh-s

Posted

hey @Crazimonk.. thank you for your valuable feedback. Could you tell me a little more about the usage of heading tags.. Did you mean that If i use a <h2> then the next heading tag should be h3 ? it should not be h4 or h5 or any other? did i get it right? Your help would be really appreciated πŸ™Œ

0
Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

@niteshh-s

  • Yes see h1 is the first heading so use it for Title h2 h3 upto h6 are for the sub-heading ok

  • so now when using in the HTML you have to use from h2 to h6

  • "Did you mean that If i use a <h2> then the next heading tag should be h3 ?" This is right

Marked as helpful

0
Nitesh Singhβ€’ 40

@niteshh-s

Posted

@Crazimonk Thank you for your explanation. I'll keep this in mind. Also, i have started to learn bootstrap today. So, hopefully it'll make things easier for me 😀

1
Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

@niteshh-s

No it Won't, maybe while styling component bt..just piece of advice learn basic of HTML and CSS first & make yourself where you can easily navigate through code. 😊

0
Nitesh Singhβ€’ 40

@niteshh-s

Posted

Thank you so much for your valuable feedback. I will take your words into consideration. I am new to web development and not yet familiar with many tags. Hopefully I'll reach your level soon.

0
Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey niteshh-s, good job completing this challenge. Keep up the good work

Your solution looks great however I think the card needs to be scaled up a bit. You can do this using transform: scale(). The user avatar and author should match the design, it is not supposed to be replaced. Lastly the image should be a bit wider to match the design.

In terms of your accessibility issues simply wrap all your content between <main> tags to get rid of all issues

In addition I recommend that you start using html semantic tags since it will greatly improve your code.

Read more on it here

https://www.w3schools.com/html/html5_semantic_elements.asp

You can make this website completely responsive using css media-queries. I recommend reading up on it since they utilize breakpoints in order to adapt to various devices

I hope this helps

Cheers Happy coding πŸ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord