Full-Stack Web Development
Tasks:
Task 1 - Portfolio Website
Description: Create a static personal portfolio using
HTML, CSS, and JavaScript. It should include sections
like "About Me," "Skills," "Projects," and "Contact."
Skills: HTML, CSS, JavaScript.
Task 2 - To-Do List Application (Frontend Only)
Description: Build a basic to-do list application where
users can add, remove, and mark tasks as completed
using only HTML, CSS, and JavaScript. This will involve
DOM manipulation and basic event handling in
JavaScript.
Skills: HTML, CSS, JavaScript.
Task 3 - Basic Database with SQL
Description: Create a simple SQL database (e.g., SQLite
or MySQL) to store data like user tasks or personal
information. Interns will learn to write basic SQL queries
(e.g., CREATE TABLE, INSERT, SELECT, UPDATE, DELETE)
and manage records.
Skills: SQL.
Task 4 - To-Do List Application with Python and SQL
Description: Build a backend for the to-do list
application using Python (Flask/Django) and SQL. The
app will allow users to add tasks, store them in a SQL
database, and fetch tasks to display on the frontend.
This task integrates a Python backend with a frontend UI
and SQL for data storage.
Skills: Python, SQL, HTML, CSS, JavaScript.
Scheduled TimeLine
Week 1: Frontend Foundations with HTML, CSS, and
JavaScript
Goal: Get comfortable with the basics of HTML, CSS, and
JavaScript by building a portfolio website.
Day 1-2: HTML & CSS Basics
Structure: HTML elements, tags, attributes, and
semantic HTML.
CSS: Selectors, properties, layout concepts (flexbox or
grid), colors, and fonts.
Exercise: Create a basic "About Me" page with CSS
styling.
Day 3-4: JavaScript Basics
JavaScript fundamentals: variables, functions, and basic
event handling.
DOM manipulation (e.g., selecting elements, updating
text/content).
Exercise: Add interactive elements (e.g., button click
effects) to the page.
Day 5-7: Portfolio Website Project
Objective: Build a static personal portfolio with sections
like "About Me," "Skills," "Projects," and "Contact."
Focus on using HTML, CSS, and basic JavaScript for
interactive effects.
Weekend: Refine design, check for responsiveness, and
add finishing touches.
Week 2: JavaScript Interactivity - To-Do List Application
Goal: Develop a to-do list app with JavaScript for DOM
manipulation and event handling.
Day 1-3: DOM Manipulation and Event Handling
JavaScript for adding, removing, and updating HTML
elements.
Event handling for tasks like button clicks, form
submissions.
Exercise: Create a mini interactive page with buttons,
lists, and events.
Day 4-7: To-Do List Application Project
Objective: Build a frontend-only to-do list app where
users can add, remove, and mark tasks as completed.
Apply JavaScript for creating new list items, deleting
items, and marking tasks.
Focus on clean, reusable code for managing to-do list
functionality.
Weekend: Review and improve code for efficiency and
style.
Week 3: Introduction to SQL and Database Management
Goal: Learn SQL basics and create a database to store
information for web apps.
Day 1-2: SQL Basics
Database concepts: tables, columns, rows, primary keys.
Basic SQL queries: CREATE TABLE, INSERT, SELECT,
UPDATE, DELETE.
Exercise: Set up a SQL database (SQLite/MySQL) and
practice creating and managing tables.
Day 3-4: Practical Database Creation and Management
Create a database for storing data like user tasks or
personal info.
Practice SQL queries for data entry, retrieval, updates,
and deletions.
Exercise: Write SQL queries to manage tasks (add, view,
delete) in a sample database.
Day 5-7: Database Integration with Frontend
Understand the connection between frontend data and
backend storage.
Plan and prepare for integrating SQL with the to-do list
app in the next phase.
Weekend: Review SQL concepts and optimize database
structure for tasks.
Week 4: Backend Integration with Python (Flask/Django)
and SQL
Goal: Build a backend with Python and SQL to manage
data for the to-do list application.
Day 1-2: Python Basics and Flask/Django Setup
Python review: functions, data structures, and working
with libraries.
Flask/Django setup: Environment setup, creating routes,
and handling HTTP requests.
Exercise: Set up a basic Flask/Django app with one or
two routes.
Day 3-4: To-Do List Backend Development
Objective: Implement a backend for the to-do list app
using Python and SQL.
Build routes for adding, viewing, and deleting tasks.
Connect the SQL database to the backend and handle
data through API routes.
Day 5-7: Integrating Frontend and Backend
Connect frontend with backend: Fetch tasks from the
backend to display on the frontend.
Test all functionalities and ensure the frontend is
updated based on the backend data.
Weekend: Finalize project, review all components, and
polish code.
Note : You can use any Tech Stacks for Backend
