Welcome to the Frontend Track
Frontend development is where creativity meets logic — where ideas turn into interfaces users love.This track provides a curated roadmap, tools, and guides to help you become a world-class frontend engineer.
Start Here
Begin your learning journey, understand what frontend development entails, and explore your potential career path.
Core Fundamentals
Everything starts here — HTML, CSS, and JavaScript are the building blocks of the web.Mastering these will set a strong foundation for everything that follows.
HTML Foundations
Learn how to structure web content with semantic HTML tags and accessibility in mind.
Resource: MDN Web Docs, freeCodeCamp HTML course.
Resource: MDN Web Docs, freeCodeCamp HTML course.
CSS for Styling
Master layouts, animations, and responsive design using modern CSS (Flexbox, Grid).
Resource: CSS Tricks, Kevin Powell’s YouTube channel.
Resource: CSS Tricks, Kevin Powell’s YouTube channel.
JavaScript Essentials
Understand core concepts like variables, functions, DOM manipulation, and events.
Resource: JavaScript.info, MDN JS Guide, Scrimba JS course.
Resource: JavaScript.info, MDN JS Guide, Scrimba JS course.
Frameworks & Libraries
Once you know the fundamentals, frameworks like React, Vue, or Next.js help you build scalable, interactive apps efficiently.React.js
The most popular library for building dynamic user interfaces.
Learn: React.dev Docs, Net Ninja React playlist, EpicReact.dev.
Learn: React.dev Docs, Net Ninja React playlist, EpicReact.dev.
Next.js
Learn fullstack development with Next.js — routing, API routes, and static generation.
Learn: Next.js Learn course, Vercel Blog.
Learn: Next.js Learn course, Vercel Blog.
Vue.js (Optional)
An approachable framework for building progressive web interfaces.
Learn: Vue Mastery, Vue School, Vue Docs.
Learn: Vue Mastery, Vue School, Vue Docs.
Styling & UI Systems
Frontend engineers also need great design sense. Learn how to make your apps look and feel amazing.Tailwind CSS
A utility-first CSS framework for fast, responsive styling.
Learn: Tailwind Docs, Tailwind Labs YouTube.
Learn: Tailwind Docs, Tailwind Labs YouTube.
Component Libraries
Explore UI kits like Chakra UI, Material UI, and Shadcn/UI to speed up development.
Design Tools
Learn basic design principles and use Figma to prototype your interfaces.
Resource: Figma Learn Hub, DesignCourse on YouTube.
Resource: Figma Learn Hub, DesignCourse on YouTube.
Tools, Workflow & Optimization
Professional developers use tools that make their workflow efficient and maintainable.Version Control with Git
Master Git commands, branching, and collaboration using GitHub.
Package Managers
Understand npm, Yarn, and pnpm — the backbone of frontend dependency management.
Performance Optimization
Learn to make your apps faster — lazy loading, caching, and image optimization.
Practice & Projects
Build, break, and rebuild. Practical projects cement your learning and grow your portfolio.Frontend Practice
Hands-on challenges to practice real-world UI development.
Open Source
Contribute to open-source projects and learn from others’ code.
Personal Portfolio
Build and deploy your personal website to showcase your projects.
6. Career Growth & Community
Join developer networks, get mentorship, and prepare for professional opportunities.Interview Prep
Practice technical interview questions for HTML, CSS, JS, and React.
Join GDGOC Unilorin
Connect with peers, attend meetups, and grow your network through GDG On Campus.
Inspiration Zone
Explore Developer Portfolios
See what top developers are building and get inspiration for your next project.