Responsive-Webdesign of the challenge using SCSS

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  To avoid accessibility and HTML issues in the future, always:

  • wrap everything in your body in <main>
  • start your headings with h1 and move up by one level each time
  • give your <img> tags an alt=""

  Good job! :)

  Marked as helpful

  0

  ---

  

  DanielK•440

  @DanK1368Posted almost 3 years ago

  @anoshaahmed

  Thanks for the tips, i updated the file. Appreciate your input.

  1
• 

  Andrew Southern•390

  @whoamihealayPosted almost 3 years ago

  Hi ! You nailed the design !

  For the html part, think in boxes. Replace the section with main. Padding on the main to make it a container. Then an a article or section with the image and text. It makes it easier for screen readers.

  For the headings, one h1 per page as the main title. Then a h2 per section and h3, h4, h5 for cascading sub-sections

  And finally this one is optional but you can load svgs in a img src tag. For bigger svgs it makes the code a lot cleaner.

  Hope this helps, have a good one !

  Marked as helpful

  0

  ---

  

  DanielK•440

  @DanK1368Posted almost 3 years ago

  @whoamihealay Thanks for the feedback, really aprreciate it. I updated the file, and makes a lot more sense to use to correct semantics.

  0

  

  Andrew Southern•390

  @whoamihealayPosted almost 3 years ago

  @DanK1368 Hi, love the energy ! You went a bit overboard on articles there !

  An article still needs a heading, in this challenge everything under the image could be a single article. Then wrapping the article and the image could be a section wrapped in a main. Hope that helps!

  Marked as helpful

  0

  

  DanielK•440

  @DanK1368Posted almost 3 years ago

  @whoamihealay

  Thanks again. By the way, I've been trying to figure out why the "eye" isn't showing while hovering over the image. The blue blackground is, but the eye isnt. It is working when running the website through VScode. Would appreciate if you could have another look at the code. :)

  0

  

  Andrew Southern•390

  @whoamihealayPosted almost 3 years ago

  @DanK1368 It's because your css file is looking for the images folder in the root directory which translates to https://dank1368.github.io/images but the one you need is https://dank1368.github.io/Nft_Preview_Card/images

  In your sass file the image path needs to be relative ie: url(./images/icon-view.svg). The prepending dot indicates to navigate from the current active folder and search for a images folder.

  1

  

  DanielK•440

  @DanK1368Posted almost 3 years ago

  @whoamihealay Got it!!Thank you so much.

  0