How I Self Learned Frontend Development in Javascript, HTML, and CSS
“Learning to code is useful no matter what your career ambitions are.” — Arianna Huffington
I am going to give a quick rundown of how I learned to frontend development.
Introduction
Let me share my journey into frontend development. A bit about my background: I started college as a finance major. With my dad serving as a C-suite executive at a prominent private equity firm, I initially aspired to follow in his footsteps. My plan was to enter the finance world, climb the same ladder he did, and eventually make a name for myself in that field.
However, everything changed during my sophomore year. Like many college students, I experienced a turning point, but mine came unexpectedly. My dad’s best friend, “Turbo” (his nickname), introduced me to the world of computer science. He encouraged me, saying, “You’d be good at it. Give it a try.”
So, I took a leap of faith.
I enrolled in the first Computer Science course offered at my university. It was noticeably more challenging than the finance and business courses I had taken. Important to note, I was not taking general business topics — I was deep into foundational finance courses like intro to finance and financial/managerial accounting.
Maybe computer science felt harder because concepts like finance and accounting were part of our daily conversations at home. Algorithms, optimization, and data structures? Not so much.
By the middle of the semester, I realized I genuinely enjoyed it. By the end of the semester, I liked enough I switched my major to Computer Science and Mathematics.
Diving Into Frontend Development
Most of the coursework in Computer Science Major was heavily focused on backend development: algorithms, operating systems, databases, and the like. Unfortunately, there was no formal instruction on frontend development.
The best way I started was to basically start developing frontend UIs using projects already done by other people.
So, had to self teach myself. The best way I found was to dive into frontend projects that had already been built. The one source I used was the 50 Projects in 50 Days series on Github.
I committed to working through one project every day. For reinforcement, I used Anki (spaced repetition tool) to revisit the projects I’d already completed. This approach helped me retain what I learned and become comfortable with the syntax. Over time, I started to understand how UI components could be manipulated and arranged on a screen.
Getting Started: Prerequisites
Before you begin, here’s what you’ll need:
- Node.js installed on your computer
- Visual Studio Code (or your favorite code editor)
- Basic knowledge of Linux commands (e.g.,
lsmkdircd) - Familiarity with fundamental programming concepts like loops, variables, and data types
Step-by-Step Guide
- Clone the Repository
$ git clones https://github.com/Rafiul-Islam/50projects50days.git
can optionally use SSH to clone
2. Navigate to any project folder with index.html in the root path
3. Start the Project Locally
$ npx http-server
4. Open your Chrome browser (or any browser of your choice) and go to:
localhost:8080
5. Once you’re ready, delete the content in the .html, .js, and .css files. Challenge yourself to recreate each project from scratch. Reference the original code only if you get stuck
Conclusion
Learning frontend development can be an exciting journey if approached methodically. For me, starting with hands-on projects like 50 Projects in 50 Days was a game-changer. Not only did I build practical skills, but I also developed a deeper understanding of how HTML, CSS, JS can be used to manipulate the DOM.
If you’re considering diving into frontend development, don’t hesitate. The path may seem challenging at first, but with persistence and the right resources, you’ll find yourself creating amazing things in no time.
Thanks for Reading! Before you go:
- 👏 Clap for the story and follow the author 👉
- 🔔 Follow me for more content: Twitter | LinkedIn
- ☕️ Feel free to support me :)
