Web Dev

THUREIN @ RISO Lab

[email protected]
 Learning outcome

Foundational Knowledge of Web Technologies

Full-Stack Development and Project Deployment

Additional Focus Areas (Soft Skills)

Foundational Knowledge of Web Technologies

● Building Static Web Pages with HTML

● Styling Web Pages with CSS
● Interactivity with JavaScript
● Advanced JavaScript Concepts
Full-Stack Development and Project Deployment

● Backend Development with Node.js and Express

● Frontend-Backend Interaction
● Deployment and Version Control
● Project Management and Collaboration
Full-Stack Development and Project Deployment

● Critical Thinking and Problem Solving

● Collaboration and Peer Feedback
● Practical Application
● Preparation for Real-World Web Development
Portfolio Project
Start simple. Add more.
Week 01: Basic HTML and Version Control with Git
Goal: Tasks:

Build the foundation HTML of the portfolio Create a basic homepage with your name,
a short bio, and an image.
website.
Use semantic HTML tags like <header>,
Learn Basic Git version control.
<main>, <footer>, and <section>.

A simple list of hobbies or skills (using

<ul> or <ol>).
Deliverables:
Install Git on your system and initialize a
A basic webpage with semantic HTML
repository for your project.
structure.
Commit your initial work and push it to
A GitHub repository containing the initial GitHub (create a new repository for your
HTML file and proper commit messages. portfolio project).
Week 02: Basic CSS
Goal: Tasks:

Add styling to the portfolio website. Use CSS to style the homepage:

Add background colors, custom fonts, and

basic padding/margins.
Deliverables:
Style the header, bio, and footer.

A visually appealing homepage decorated Introduce a simple layout using the box
using CSS. model.
Week 03: Basic JavaScript
Goal: Tasks:

Focus on foundational JavaScript Learn and practice: Array methods

programming concepts. like .push(), .pop(), .shift(), .
Variables (let, const, var). unshift(), and .forEach().
Data types (strings, String methods
numbers, arrays, objects). like .toUpperCase(), .toLowe
Deliverables:
rCase(), and .includes().
Control flow (if/else
Focus on foundational JavaScript
statements, switch). Solve basic JavaScript
programming concepts.
exercises to build problem-
Loops (for, while, do-
solving skills:
while).
Calculate the sum of an
Reverse a string.
array of numbers.
Find the maximum and
minimum numbers in an
Week 04: DOM Manipulation & Event Handling

Goal: Tasks:

Add user interactivity using JavaScript and Create a JavaScript function that displays
the DOM. a welcome message (e.g., "Welcome to
My Portfolio").

Use JavaScript to dynamically interact

Deliverables:
with the elements on webpage.
A web page with basic JavaScript
Add a "Contact Me" form where users can
interactivity.
input their name and email.
A working form with validation.
Use JavaScript to validate the form and
display a success message on submission.
Week 05: Responsive Design
Goal: Tasks:

Make the portfolio responsive. Use media queries to adjust the layout for
different screen sizes.

Implement a mobile-first design approach.

Deliverables:
Make the navbar responsive (e.g.,
A fully responsive portfolio.
collapsing into a menu icon on smaller
screens).
Week 06: Advanced JavaScript Concepts
Goal: Tasks:

Add dynamic content using JavaScript Add a "Projects" section to the portfolio
arrays and loops. that dynamically displays a list of projects
using JavaScript.

Store the project details (title, description,

Deliverables:
and link) in an array and loop through it to
A dynamically generated "Projects" display the data.
section.
Week 07: Backend with Node.js and Express

Goal: Tasks:

Set up a backend server. Set up a Node.js server with Express to

serve the static portfolio website.

Create basic routing for the homepage,

Deliverables:
"About Me," and "Projects" pages.
A Node.js server serving the static
website.
Week 08: Server-Side Rendering with EJS
Goal: Tasks:

Render dynamic content on the server Use EJS to generate the "Projects" section
side. dynamically from a server-side array.

Add a "Blog" section where blog posts are

rendered dynamically using EJS.
Deliverables:

A portfolio with dynamic pages generated

by EJS.
Week 09: Frontend-Backend Interaction
Goal: Tasks:

Enable interaction between the frontend Create a contact form that sends data to
and backend. the backend using a POST request.

Store submitted contact form data

temporarily on the server.
Deliverables:

A functional contact form with backend

handling.
Week 10: Deployment and Version Control
Goal: Tasks:

Deploy the portfolio website to a live Choose a hosting platform (e.g., Render,

hosting platform. Vercel, GitHub Pages).

Set up a production build of your website

(if necessary) and deploy it.
Deliverables:
Test the deployed website on different
A live, deployed version of your portfolio devices to ensure it works correctly.
website accessible via a public URL.
Share the live link in your GitHub
repository's README file.
Week 11: Final Project Enhancements
Goal: Tasks:

Add finishing touches and advanced Add a "Testimonials" section where data is
features. fetched from a JSON file or backend API.

Improve the site's aesthetics using

advanced CSS (e.g., animations or
Deliverables:
transitions).
A polished and feature-rich portfolio.
Week 12: Final Presentation
Goal: Tasks:

Showcase your portfolio and reflect on the Present the final version of the portfolio to
learning journey. the class.

Explain the technologies and features

implemented.
Deliverables:

A comprehensive and professional

portfolio website.