I will build a mini website in plain HTML, CSS and Javascript for 100 days, these websites will be proof of concepts in many cases that will allow me to practice some specific concept while building something with it at the same time!
You can check my progress here
At the time of starting this challenge I've been working with web technologies for over a year. During this year I've learnt quite a lot, however I've been feeling like I am relying too much on libraries like Bootstrap to achieve some stylings that I could easily do myself.
Also, as these libraries have default stylings if at some point I need to add some customization into my projects it can become a painpoint due to my lack of understanding of some CSS concepts.
For the duration of this project I will build a mini project using only HTML, CSS and Javascript. This means that I will not be using any type of CSS nor Javascript library.
The only exception to this happens in the build process, where I will use my own build scripts to dynamically add each day's project to the Homescreen, for this I may also install some external libraries if needed as this has nothing to do with front end development.
Also, I may use some tools such as Babel or PostCSS to add cross-browser compatibility, however cross-browser compatibility is not the main focus of these projects, so keep that in mind.
Note: To reset browser default I've included a generic reset.css file in some of the projects when I find it necessary.
Completed on Sept. 14, 2020 🥳
After completing these 100 days of code I can say I've practiced quite a lot and explored many of the technologies that are used in some of the popular libraries and packages we use for building the web. And not only that, but this also gave me the opportunity to face some of the challenge that come when using these "low level" technologies and appreciating the abstraction that many of these libraries offer even more.
Among the many concepts I was able to practice while doing these daily projects are:
- CSS Animations
- CSS Transitions
- SVG manipulation
- Creating plain Javascript scripts
- Intersection Observer
- Flexbox
- Grid Layout
- Notifications API
- 3D shapes
- Canvas
- The ::before and ::after pseudo elements
Finally, these are some of my favorites projects that came out of this process
- Modern Art Generator
- Web iPhone
- Animated tic tac toe
- Conway's Game of life
- Space Cube
- Memory Card Game
And remember, you can check all the other ones here!