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

Mobile First Workit Landing Page using HTML & SCSS

P
Sydโ€ข 20

@SydBrain

Desktop design screenshot for the Workit landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, this is my first time working on "real projects" after enduring a useless 12 month Front End Face-To-Face Course that didn't prepare me for the job.

Here's a few questions I'd like to ask to the community:

  • Am I using HTML5 elements well?
  • What's a better way to organize SASS foldering? Did I overdevelop the page by choosing to use SASS?
  • I'm having trouble with making optimal responsive layouts, I find myself constantly tweaking dimensions and positioning. Could you point me to some resources that could make me improve?
  • I reeeeally don't like using absolute positioning in my projects. Is there a better way to layout decorative and/or overlapping elements?

Thanks in advance!

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hey, Syd! ๐Ÿ‘‹

Congratulations on completing your first Frontend Mentor challenge! ๐ŸŽ‰ Nice job on this one! ๐Ÿ‘

A few things you can do to improve your HTML would be,

  • Turning the features section into a list using the ul and li tags (since that is a list of features).
  • I don't think the word "tailored" in the page heading needs to be a link, as it probably only has that underline for decoration.
  • Not adding any alt text to images you don't want screen readers to notice and read (such as decorative images, which aren't important to the content of the page).
  • For the above reason, it might be worth removing the alt text on the social media icons in the footer of the page and adding an aria-label to the links that wrap them instead.

I don't think using Sass for this project was overkill. Sass has lots of great features that are easy to get used to and using it here is great practice for larger projects where it comes in very handy. ๐Ÿ˜‰

Making layouts responsive and using absolute positioning are two things that become much easier to do (and think about in general) with practice! ๐Ÿ˜‰ Something that really helped me become better at the two is inspecting other websites and reading other people's code to see how they did things. Use the dev tools to inspect and poke around professional websites or browse this platform and the read the code of high quality solutionsโ€”this will show you ways of doing things that you might not have thought of before and give you a chance to explore new ideas. ๐Ÿ™‚

Hope this helps. ๐Ÿ˜Š

Keep coding (and happy coding, too)! ๐Ÿ˜

Marked as helpful

1

P
Sydโ€ข 20

@SydBrain

Posted

@ApplePieGiraffe

Thank you very much! Your feedback was extremely helpful!

1

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