Skip to content

Latest commit

 

History

History
61 lines (33 loc) · 2.8 KB

README.md

File metadata and controls

61 lines (33 loc) · 2.8 KB
Raw

Vanilla Frontend Challenge

What's this?

Vanilla Frontend Challenge is a weekly challenge to build UI components with HTML, CSS and Javascript the vanilla way.

Every week, I'm going to build a UI component without using any frameworks or libraries like Tailwindcss, Bootstrap, Jquery or React.

It's all pure HTML, CSS and Javascript. Just plain old vanilla! (Some people who love vanilla flavor might not like the implication. ✌️✌️✌️!)

Why I'm doing this?

A few days ago, I took a frontend developer exam and I realized how much I don't know. Admittedly, most of the questions were unfamiliar to me, especially related to HTML5 and CSS3. Everything seemed new!

That's why I want to go back to the fundamentals and catch up with the latest updates.

I think I've been dependent on using frameworks and knowing that it only takes a Google away to find answers.

Don't get me wrong. Frameworks are great for faster development and I find it best to use them when building big projects. But it's important to understand how things work in the back too and it makes using frameworks easier and make more sense.

Got some catching up to do!

So what's the goal?

  • To improve frontend development skills by building one UI component a week without using frameworks and libraries. Only pure HTML, CSS and javascript.

  • Publish a post on your site (or social media) documenting how you built the design of the week of your choice, such as covering the difficult parts and what you learned.

  • You can use open source and free designs to follow if you're not a designer like me.

    Some free resources:

    UI Design Daily - Open source designs every week day! It's my best favorite!

    Frontend Mentor - A frontend challenge site where you can post your solutions, give and get feedback from the community

    AR SHAKIR - A lot of freebies if you're a follower.

    Freebies UI

  • This is a learning journey so don't pressure yourself to make it a hundred percent pixel perfect. Aim for close enough based on your judgment.

  • Set a specific deadline! (For me, I'm doing a trial period of 4 weeks so 4 designs. I want to see how it makes me feel first so I can make adjustments or if I want to continue. Start small. No pressure!)

Inspiration

These are some of the sites that inspired me to do this challenge:

Take the challenge with me!

We can be each other's motivational coach and accountability friends. 😀

Email me at [email protected] if you want to connect!