Workit Landing Page

What are you most proud of, and what would you do differently next time?

Built with. 🔨

• HTML & CSS.
• Vite.

Features. ✨

• Used a picture element to serve a more optimized hero image for the mobile and tablet screen sizes.
• Included a visually hidden heading to improve accessibility for screen reader users.
• Self-hosted fonts for faster loading.

Ending Notes. 📝

• I used to include both WOFF2 and WOFF font files, but seems like WOFF2 is fully supported by all major browsers, so I am gonna stop including the WOFF file type as a fallback option.
• Changed my head section boilerplate in this project. Did some tweaks to the order I used to place the tags inside the head section. Moving forward will be using that.
• Initially, I used border-radius to create the curved background colors on the page. While this method gave a good result, it was bit hard to get the exact curve given in the design. So later I used an SVG instead.

What challenges did you encounter, and how did you overcome them?

• I wanted to use overflow-x: hidden on the .main element to hide the horizontal overflow of the green background patterns at the top of the page. However, when I added overflow-x: hidden, a scrollbar appeared in the vertical direction. This was very confusing to me. Turns out, if you set overflow-x to hidden, overflow-y is automatically set to auto. That’s why I was getting a vertical scrollbar even though I was dealing with the horizontal axis using overflow-x: hidden. This was an issue since I wanted the top green patterns’ horizontal overflow to be hidden while allowing the bottom green background patterns’ vertical overflow to be fully visible.
  • The solution was, instead of using overflow-x: hidden, use overflow-x: clip. When clip is used, it allows you to clip the overflowing content in one direction (in my case it was horizontal), while keeping your overflowing content on another direction (vertical for me) still visible.

What specific areas of your project would you like help with?

Would love some overall feedback on any areas where I can improve.