Responsive Loopstudios Landing Page with HTML, SCSS, JS and Vite

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

This is one of my dream projects! ✨

I have wanted to complete this project this project from ever since I joined this platform. Today I finished it! It took around a week and half to finish and deploy the project. I didn't hurry and mess up my code. Instead did it patiently and effectively.

Built with: ⚒️

• Semantic Vanilla HTML
• SCSS
• CSS
• Vanilla JS
• Vite

I initially started this project using Parcel. But I encountered an error of some of my elements disappearing on the live preview. After switching to Vite, I got them fixed.

I have tried my best to build an accessible and responsive website. Made use of aria properties for better accessibility and added interactive effects for users. As I mentioned, it took around a week because I was busy with school, else I think I could've finished it earlier. The layout itself is simple but the positioning of some elements is different from what I've built in the past. So, I am happy that I could break things down and build the best possible result.

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

I usually have a lot of difficulty building grid layouts and responsive navigation bars. But this time, I did things easily. Didn't google a lot. I did try using the new syntax for getting transparent background from custom properties.

.element {
background-color: hsla(from m.color(primary__black) h s l / .5);
}

I got this idea from Kevin Powell's last video and I found it really handy. I have always wanted an easy way to get a transparent background without having to copy-paste my hsl code and then converting it to hsla.

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

I would like to know how responsive it is on your devices. How to improve my JavaScript and build better and accessible websites.

Any suggestions on how I can improve are welcome! 😄