Hey comunidad! I'm @chicanacodes — a self-taught front-end developer turned software engineer, and I'm here to tell you you absolutely belong in tech.
Whether you’re switching careers, coming from a non-traditional background, or learning code between your 9–5 and family time, this guide is for you. Let’s break into front-end development together — no CS degree, no gatekeeping, just real resources that helped me and thousands of others start coding.
What Is Front-End Development?
Front-end developers build the parts of websites and web apps you see and interact with. If you've ever customized your Myspace page back in the day or edited a Tumblr theme, you were doing baby dev work without even knowing it!
You’ll learn to work with:
- HTML for structure
- CSS for design and layout
- JavaScript for interactivity
- Tools like React, GitHub, and VS Code
Roadmap: Your Front-End Starter Pack
I’ve pulled together free resources (and a few affordable ones) that are recommended across Reddit, TikTok Tech, and my own journey.
1. HTML + CSS + JavaScript
Start here. Build a foundation you can grow from.
- The Odin Project – Foundations (Free, super thorough)
- freeCodeCamp – Responsive Web Design + JavaScript (Free, beginner-friendly lessons)
- Codecademy – Intro to Web Dev (Free and Paid plans)
Optional Paid (Worth It):
- Scrimba – Front-End Career Path (Interactive, community support – ~$20/month)
- Udemy – Web Developer Bootcamp by Colt Steele (Often on sale for $15–20)
2. Learn Git & GitHub
So you can track changes and show off your projects.
- Git & GitHub for Beginners – freeCodeCamp (Free YouTube course)
- The Odin Project – Git Basics (Free)
3. Pick a Framework (React is a Great Start)
React is everywhere in front-end jobs.
- Scrimba – Learn React (Free/Paid)
- Frontend Masters – Complete Intro to React (Paid – 1-week trial available for new subs)
- freeCodeCamp – Front End Libraries Certification (Free)
4. Build Real Projects
This is where you grow and build a portfolio.
- Frontend Mentor – Real design challenges (Free & Pro)
- JavaScript30 by Wes Bos – 30 vanilla JS projects (Free)
- DevProjects by Codementor (Free)
5. Deploy Your Work
Show your projects to the world (and future employers)!
- Netlify (Free + easy setup)
- Vercel (Perfect for React projects)
- GitHub Pages (Free)
6. Understand Basic Design (Optional but Helpful!)
You don’t need to be a designer, but knowing UI/UX principles is a flex.
- Refactoring UI (Blog + Book) (Free blog posts + Paid book)
- DesignCourse on YouTube (Free tutorials for devs)
- Frontend Design Checklist (Free resource)
Pro Tips from @chicanacodes
- Don’t rush. You don’t need to learn everything at once. Focus on one skill, one topic at a time.
- Track your wins. Keep a dev journal or post on LinkedIn/Twitter/IG — it builds confidence and your network.
- Community matters. Find your people on Discord, Reddit, or tech TikTok. You're not alone.
You Got This
Breaking into tech can feel overwhelming — but I promise, it’s possible. I’ve seen so many gente from underrepresented backgrounds succeed. Your story, your perspective, your skills — they matter.
Let this be the year you bet on yourself.
I’m cheering you on every step of the way.
Follow me here or on IG/TikTok/YouTube @ChicanaCodes for more beginner-friendly dev tips, code breakdowns, and support for our comunidad!
Did this help you? Drop your questions or favorite resources in the comments! Let’s lift each other up.
Top comments (2)
Great post for beginners in frontend development.