Front End Developer Intern
(Weekends Off)
Basic Skills (Weeks 1–2, Days 1–10): Build Foundations
Focus on core front-end skills (HTML, CSS, JavaScript, React, Git).
Week 1: HTML, CSS & JavaScript Basics
Goal: Learn HTML, CSS, and JavaScript like building a house.
Milestone: Build a static to-do list page.
Level: Basic (web foundation).
Da Wee Primary Task (1-2h) Secondary Task Resources Tim Done
y k (0.5-1h) e ?
1 1 Learn HTML/CSS Style a button with FreeCodeCamp 2.5h ☐
basics (structure, hover effect , VS Code
styling); build a static
webpage
2 1 Learn JavaScript Add a click event to MDN Web 2.5h ☐
basics (variables, toggle tasks Docs, VS Code
functions, DOM); add
interactivity to page
3 1 Build a to-do list page Style list with CSS FreeCodeCamp 2.5h ☐
(HTML/CSS for Grid , YouTube
layout, JS for
add/delete tasks)
4 1 Improve to-do list with Watch a 5-min VS Code, 2.5h ☐
responsive CSS YouTube video on YouTube
(mobile-first) CSS Flexbox (Web
Dev Simplified)
5 1 Review Follow VS Code, 2h ☐
HTML/CSS/JS; @frontenddaily on X Discord, X
improve to-do page or for tips
catch up; share on
Discord
Week 2: React & Git
Goal: Build dynamic UIs and save code like a librarian.
Milestone: Build a React to-do app and push to GitHub.
Level: Basic (React and version control).
Da Wee Primary Task (1-2h) Secondary Task Resources Tim Done
y k (0.5-1h) e ?
6 2 Learn React basics Create a simple React Docs, 2.5h ☐
(components, state); set counter component Vite, VS
up a React app with Vite Code
7 2 Build a to-do app in Style with Tailwind Tailwind CSS 2.5h ☐
React (add, display, CSS Docs,
delete tasks) YouTube
8 2 Learn Git; install Git, Push repo to GitHub, VS 2.5h ☐
create repo, commit to-do GitHub Code
app (like saving
snapshots)
9 2 Add local storage to Watch a 5-min VS Code, 2.5h ☐
React to-do app to persist YouTube video on YouTube
tasks React (The Net
Ninja)
10 2 Review React/Git; Create a 100-word VS Code, X 2h ☐
improve to-do app or project summary
catch up; share on X
Intermediate Skills (Weeks 3–5, Days 11–25): Apply and
Build
Focus on practical front-end skills (responsive design, REST APIs, VillageConnect).
Week 3: Responsive Design & REST APIs
Goal: Create flexible UIs and fetch data like a courier.
Milestone: Build a responsive dashboard with API data.
Level: Intermediate (responsive UI and APIs).
Da Wee Primary Task (1-2h) Secondary Task Resources Tim Done
y k (0.5-1h) e ?
11 3 Learn responsive Add mobile Tailwind CSS 2.5h ☐
design with Tailwind breakpoints (e.g., Docs, VS Code
CSS; build a dashboard hamburger
layout menu)
12 3 Learn REST APIs; fetch Display API data Axios Docs, 2.5h ☐
data from in dashboard JSONPlaceholde
JSONPlaceholder using r
Axios in React
13 3 Add POST request to Add error VS Code, 2.5h ☐
mock API; create new handling for failed JSONPlaceholde
dashboard items requests r
14 3 Improve dashboard with Watch a 5-min React Router 2.5h ☐
React Router for YouTube video Docs, YouTube
navigation (e.g., home, on React Router
details) (Academind)
15 3 Review responsive Follow @reactjs VS Code, 2h ☐
design/APIs; improve on X for tips Discord, X
dashboard or catch up;
share on Discord
Week 4: Major Project - VillageConnect (Part 1)
Goal: Build a unique front-end app for rural communities.
Milestone: Create VillageConnect UI and API integration.
Level: Intermediate (portfolio project).
Da Wee Primary Task (1-2h) Secondary Resources Tim Done
y k Task (0.5-1h) e ?
16 4 Start VillageConnect; set Create a Vite, 2.5h ☐
up React app, fetch mock service card JSONPlaceholder
services from component
JSONPlaceholder
17 4 Build home page UI Add a search Tailwind CSS 2.5h ☐
(service list); use Tailwind bar for services Docs, VS Code
for responsive design
18 4 Add service details page; Style details React Router 2.5h ☐
use React Router for page with Docs, VS Code
navigation consistent
fonts/colors
19 4 Integrate API; Add loading Axios Docs, VS 2.5h ☐
fetch/display services on spinner for API Code
home page calls
20 4 Review VillageConnect Create a VS Code, X 2h ☐
UI; improve pages or 100-word
catch up; share on X project
summary
Week 5: Major Project - VillageConnect (Part 2) & Portfolio
Goal: Finalize VillageConnect, build portfolio, and prep interviews.
Milestone: Complete VillageConnect app and portfolio.
Level: Intermediate to Advanced (portfolio and interviews).
Da Wee Primary Task (1-2h) Secondary Resources Tim Done
y k Task (0.5-1h) e ?
21 5 Add mock forum page Style posts with JSONPlaceholde 2.5h ☐
(display posts from Tailwind CSS r, VS Code
JSONPlaceholder); create
post form
22 5 Add form validation to Test app on VS Code, 2.5h ☐
forum post form; improve mobile device YouTube
responsiveness
23 5 Test VillageConnect; fix UI Watch a 5-min VS Code, 2.5h ☐
bugs; push to GitHub YouTube video GitHub, YouTube
on React (The
Net Ninja)
24 5 Create a portfolio site with Write a VS Code, MDN 2.5h ☐
HTML/CSS; add 200-word Web Docs
VillageConnect case project
study (problem, solution) description
25 5 Learn STAR method; Write a YouTube, X 2h ☐
write 1 STAR answer 100-word
(e.g., teamwork); share reflection on
portfolio on X front-end
journey
