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. ✌️✌️✌️!)
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!
-
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.
-
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!)
These are some of the sites that inspired me to do this challenge:
- https://www.uidesigndaily.com/
- https://100dayscss.com/
- http://frontendmentor.com/
- https://www.hackerrank.com/
- https://piccalil.li/category/front-end-challenges-club/
- https://jenniferdewalt.com/
We can be each other's motivational coach and accountability friends. 😀
Email me at hello@jenniferricardo.com if you want to connect!