Scribd
Upload
1 views

Front End Developer Intern

The document outlines a structured internship program for a Front End Developer, spanning five weeks with a focus on building foundational and intermediate skills in HTML, CSS, JavaScript, React, Git, responsive design, and REST APIs. Each week includes specific goals, milestones, primary and secondary tasks, and resources to aid learning and project development. The final weeks culminate in a major project, VillageConnect, and preparation for portfolio and interviews.

Uploaded by

vigneshbvn2525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Front End Developer Intern

The document outlines a structured internship program for a Front End Developer, spanning five weeks with a focus on building foundational and intermediate skills in HTML, CSS, JavaScript, React, Git, responsive design, and REST APIs. Each week includes specific goals, milestones, primary and secondary tasks, and resources to aid learning and project development. The final weeks culminate in a major project, VillageConnect, and preparation for portfolio and interviews.

Uploaded by

vigneshbvn2525
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy