How you could start learning frontend development?
Alright, it’s been some years since I started coding. I like the idea of being fullstack! However, most of my attempts at learning frontend dev ended up after reading the tutorial and completing the ‘Hello world’ steps. I also did a couple of todo’s app 😎 If you are also in that case, please hold on!
According to my browser history, I took a three steps approach. I thought it would be cool to write about it.
But before, I also wanted to share a bit about the process used on the way. I discovered while learning to run (and also from this nice post about meditation) that in order to make an activity enjoyable, you might need a combination of three elements. A clear goal (in that case building/learning something), it needs to become a habit (COVID helped in that regards..) and a methodology (there I like the idea of fast learning as it is put forward by this cool guy).
Step 1: topic scrapping and fast learning
I performed a quick scan of the technologies used for frontend dev. Here are my takeaways;
- This https://roadmap.sh/frontend is a super cool starting point. I quickly went over it and Googled most of the steps proposed / watched a video for each. Good resources were also found on dev.to.
- The topic is huge! I got lost into topics such as PWA, buildess App, SPA, GraphQL, Web Assembly, Web Component. I tried to not get lost too long by telling myself that I could still deep-dive into those interesting topics later on.
- “Frameworks” such as Svelte got a lot of traction, but it looks like React is still dominating.
- The best doc is to be found on developer.mozilla or developers.google.
- Everything could be vanilla(ished) because in the end, it is ONLY HTML, CSS & JAVASCRIPT & DATA that are being sent out to the browser.
- I watched some series of Youtube videos of guys coding entire app. This was a must to grasp the thinking process. I also learned some nice syntactic sugar, keyboard shortcuts, and IDE tuning on the way; that was nice!
Step 2: build something
By experience, I learned that in development, nothing is being learned without being put into practice! Time to get myself in front of the blank page.
I had some ideas of what I wanted to build. Being a big fan of traveling, I never found a decent social media medium around that. I thought I could start something in that regard. I always wanted to be able to pin posts on a map that would become a timeline.
To do that, I selected, React, Redux, and Leaflet plus materializeCSS. I like the idea of vanilla stuff and building everything yourself. But sometimes, you want to go fast and there are just smarter guys that cracked it into nice (open) libraries 😏
And there it is, my first prototype, https://pinme.surge.sh/ 🎉
Step 3: list of things to improve
It is still dirty but I am very happy with the journey so far. I hope you also got some takeaways from that small post. On my side, I still have a lot of items on my todo;
- Learn more about CSS best practices and enhance the UI/UX. There are so many things to improve, for example the mobile experience. It is super important given the amount of traffic over mobile! Some transitions when cards are deleted, card highlighted when the pin is clicked, overlay the cards on top of the map,…
- A search functionality (ELK?!)
- Backend integration, if you do not persist the state, it gets cleaned on re-load.. (Going serverless or Firebase, maybe give a try at FastAPI, GraphQL?)
- Social functionality (add friends, see friend’s pins, comments, likes,..) Maybe I’ll found the new billions dollar little plus.
- How to test that thing properly?!
- How to nicely build it and have it served somewhere else than surge.sh.
Finally, learning to write blog posts is still in progress, thanks so much if you made it till here! I will probably share my progress in another blogpost. Meanwhile, do not hesitate to give feedback in comments 🤪
