Learning Front-End: My Approach and Resources
I’ve been diving into front-end development for a few months now, and I wanted to share the approach that’s been working well for me.
The Fundamentals First
Before jumping into frameworks, I’m making sure I have a solid foundation in the basics:
HTML
- Semantic markup and accessibility
- Forms and validation
- SEO best practices
CSS
- Flexbox and Grid layouts
- Responsive design principles
- CSS custom properties
- Animations and transitions
JavaScript
- ES6+ features
- DOM manipulation
- Async/await and promises
- Working with APIs
Learning Resources I’m Using
Here are some resources that have been incredibly helpful:
- MDN Web Docs - My go-to reference for everything web
- freeCodeCamp - Structured curriculum with hands-on projects
- JavaScript.info - Deep dive into JavaScript concepts
- CSS-Tricks - Great articles on CSS techniques
- YouTube Channels - Various creators for visual learning
Project-Based Learning
I learn best by building, so I’m working on small projects to apply what I learn:
- This blog site (built with Astro)
- Simple landing pages
- Interactive components
- Small web apps
Each project teaches me something new and helps concepts stick better than just reading tutorials.
The Challenges
It’s not always smooth sailing:
- Imposter syndrome hits hard sometimes
- So many technologies to learn—it can feel overwhelming
- Balancing learning with university coursework
- Deciding what to learn next
What’s Working
A few things that help me stay on track:
- Consistent daily practice - Even just 30 minutes makes a difference
- Building in public - This blog keeps me accountable
- Taking notes - Writing things down helps retention
- Not comparing - Everyone’s journey is different
Next Steps
I’m planning to:
- Deepen my JavaScript knowledge
- Learn React or Vue
- Understand state management
- Explore TypeScript
- Build more complex projects
The journey is long, but I’m excited about where it’s taking me!