Skip to content
Submitted over 2 years ago

Mobile First Workit Landing Page using HTML & SCSS

P
Syd•20
@SydBrain
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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

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