HTML, CSS and Javascript

Community feedback

• 

  P

  Dave•5,295

  @dwhenson

  Posted almost 4 years ago

  Hi @CommanderMeow great job on this one - I really struggled with this one, especially placing all those images in the right places, but you seem to have done that really well! 🙌

  Here's a few points to think about:

  1. For the HTML, I would suggest using some of the elements that were brought in in HTML5. This would include header, nav, main, footer etc. At the minute your divs with id's are working but this would be better for people using assistive tech to use your site. This will solve most of the accessibility issues highlighted in your report too.

  2. On large screens your page becomes very spread out. I would consider putting some constraints on your content to prevent this. There are a few different ways to achieve this I like to add the following to my body element:

  .center-content {
  	display: grid;
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px) minmax(1rem, 1fr);
  }
  
  	.center-content > * {
  		grid-column: 2;
  	}
  

  This puts all the direct children of the body in the center column, that has a min-width of 375px and a max of 1440px. The outside columns provide a bit of spacing.

  You'll find in this challenge that this causes a number of other issues though - all solvable, but a bit hectic sometimes.

  I hope this helps. I've tried to focus on things that will help you in future challenges rather than picking up details. Really good job though - keep up the good work!! 👍

  Cheers 👋

  12

  Marked as helpful