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

Space tourism multi-page and responsive website

#sass/scss#semantic-ui
hebrerilloā€¢ 350

@hebrerillo

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I think I can improve the handling of responsive and flexible images. Also, any general feedback is welcome.

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey @hebrerillo, this looks visually solid, congrats!

The only thing that I noticed is the use of semantics, especially headings, on each page. We're missing the h1s here and the heading levels doesn't seem to be in order (ex. h5 is mentioned first before h2). Use classes to style your headings (or anything for that matter), instead of looking at 'how large' they look on the design and assigning a heading tag. Here's a resource regarding the headings.

Hope this helps!

Marked as helpful

1

hebrerilloā€¢ 350

@hebrerillo

Posted

@emestabillo thank you for your feedback!!

I only had the 'h1' tag in the home page but was missing in the rest of the pages. Now I added the 'h1' tag in the rest of the pages.

I also updated the order of the headings. For example, now 'h3' tag is before 'h4' tag. Is that what you meant?

I made a commit with your suggested changes. Could you please take a look?

Thank you so much!!

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@hebrerillo seems better, yes. It's best-practice, however, not to skip heading levels as stated in the resource I mentioned above. You can reuse the heading tag once it's been mentioned once, in order.

For example, in the technologies page, you have h1> h4 > h3. The numbers are not in order. Ideally, it would be h1> h2 > h3. You can then reuse h2 and h3 elsewhere in the page as long as it has been mentioned in order once, ex. h1> h2 > h3 > h2 > h3 > h2. This semantic is common in designs that have multiple sections, since each of the sections will usually need the same headings.

Another side note about the h1 on the homepage. I would keep the entire phrase 'SO, YOU WANT TO TRAVEL TO SPACE' in one h1 tag. I would write it as <h1>SO, YOU WANT TO TRAVEL TO <span>SPACE</span></h1>.

Hope this helps!

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