Space-tourism-website

Community feedback

• 

  P

  Christopher Adolphe•620

  @christopher-adolphe

  Posted about 3 years ago

  Hi @automate-dh,

  Well done for this challenge. I was impressed by the approach you have used to populate the inner pages content. 👍 I have noticed a few things that you might want to check in order to improve your solution.

  • On the home page, instead of using an <h5> and an <h1> for the heading, you could have implemented it this way and apply the property styling to the nested <span> element.

  <h1><span>So, you want to travel to</span>Space</h1>
  

  • The overall markup of the home page could be simplified by removing some of the nested <section> elements like so:

  <section class="main-text-container">
    <div class="col-1">
      <h1 class="uppercase"><span>So, you want to travel to</span>Space</h1>
      <p class="body-text">Let’s face it; if you want to go to space, you might as well genuinely go to outer space and not hover kind of on the edge of it. Well sit back, and relax because we’ll give you a truly out of this world experience!</p>
    </div>
  
    <div class="col-1">
      <a class="btn-explore" href="space-tourism-website/destination.html">explore</a>
    </div>
  </section>
  

  In doing so, you can then apply the styling of the button directly to the <a class="btn-explore"> and achieve the hover effect by using pseudo elements.

  • It would be more appropriate to use an <h1> element for the heading of the inner pages instead of an <h5>, like:

  <h1><span>01</span> Pick your destination</h1>
  

  • As a general observation for the inner pages, I think there is an over usage of the <section> element. By definition, it is used for thematic grouping of content with a heading which is not always the case for those inner page. You could simplify the markup pretty much like suggested for the home page.
  • In your Sass files, I would suggest to refrain from using id as selectors as this hinders reusability and also try to keep the level of nesting to a maximum of 3 levels to avoid overly specific selectors.

  I hope this helps.

  Keep it up.

  10

  Marked as helpful