MERN STACK DEVELOPMENT

BOOTCAMP
> MUHAMMAD TALHA KHAN
MODULE A:
FRONTEND
WEB DEVELOPMENT
SUMMARY
1. Subject: HTML, CSS, JS, API integration.
2. Duration: 3 Months (2 days a week)
3. Mode of training: Live on Youtube or Fb page
4. Topic of Study: Introduction to Front End Development for the Web.
5. Objective: The objective of this module is to get a hands on
understanding of HTML, CSS, JS and API Integration. By the end of the
module we will have built 15 projects.
Materials & Resources
1. HTML & CSS Textbook - HTML and CSS by

Jon Duckett.

2. JavaScript Textbook - A Smarter Way to Learn JavaScript by Mark

Meyers.
LIST OF 15 FRONTEND
WEB DEVELOPMENT
PROJECTS:
1. HTML Form - Client side form validation with HTML

Project Requirement:
1. Create an HTML Form with the following fields:
● Username
● Email
● Password
● Confirm Password
● Submit button
2. All four fields must have a value provided by the user to submit the form.
3. Username must have 3 characters.
4. Email should be valid.
5. Password should be at least 6 characters.
6. Confirm Password should match the password.
7. If the data input by the user is acceptable, display a green border around the input box.
8. If the data input by the user is unacceptable, display a red border around the input box.
2. Movie Theater Seat Selection App

Project Requirement:
In this project we will be creating a seat selector UI for a movie theater. We will have a
dropdown picker to select a movie, a legend to display if a seat is vacant, selected, or
already reserved, a drawing of the theater and also some text to display the number of
seats selected by the user and the total cost of the tickets.

1. Select from movie choices and seats in a theater in order to purchase tickets
2. Display UI with movie select, screen, seats, legend & seat info
3. User can select a movie/price
4. User can select/deselect seats
5. User can not select occupied seats
6. Number of seats and price will update
7. Save seats, movie and price to local storage so that UI is still populated on refresh
3. Video Player

Project Requirement:
In this project we will be creating a custom video player using the HTML5 video element and
it's JavaScript API with a custom design.

1. Display custom video player styled with CSS

2. Play/pause
3. Stop
4. Video progress bar
5. Set progress bar time
6. Display time in mins and seconds
4. Calculating Exchange Rates

Project Requirement:
Select countries to get the exchange rate for a specific amount

1. Fetch exchange rates from API (https://api.exchangerate-api.com)

2. Display UI with 2 select lists for countries and 2 inputs for amounts
3. Display the values for both countries
4. Update values on amount change
5. Swap country rates
5. DOM Arrays Methods

Project Requirement:
Project to teach high order array methods and DOM manipulation

1. Fetch random users from the randomuser.me API

2. Use forEach() to loop and output user/wealth
3. Use map() to double wealth
4. Use filter() to filter only millionaires
5. Use sort() to sort by wealth
6. Use reduce() to add all wealth
6. Landing Page with Sliding Menu and Modal Window

Project Requirement:
Simple landing page with sliding menu and modal

● Create and style landing page

● Style side nav and modal
● Add functionality to make menu open/close on button click
● Add functionality to make modal open/close on button click
7. Classic Hangman Game

Project Requirement:
User can select letters from keyboard to guess the word in a certain number of tries

● Display hangman pole and figure using SVG

● Generate a random word
● Display word in UI with correct letters
● Display wrong letters
● Show notification when select a letter twice
● Show popup on win or lose
● Play again button to reset game
8. Random Food Selector

Project Requirement:
Search and generate random meals from the themealdb.com API

● Display UI with form to search and button to generate

● Connect to API and get meals
● Display meals in DOM with image and hover effect
● Click on meal and see the details
● Click on generate button and fetch & display a random meal
9. Expense Tracking App

Project Requirement:
Keep track of income and expenses. Add and remove items and save to local storage

● Create UI for project

● Display transaction items in DOM
● Show balance, expense and income totals
● Add new transaction and reflect in total
● Delete items from DOM
● Persist to local storage
10. Music Player App

Project Requirement:
Create UI to play music stored in the "music folder" using the HTML5 audio API

● Create UI for music player including spinning image and song detail popup
● Add play and pause functionality
● Switch songs
● Progress bar
11. Infinite Scrolling

Project Requirement:
Display posts from jsonplaceholder and add infinite scroll to fetch posts and also add filter box

● Create UI & custom CSS loader animation

● Fetch initial posts from API and display
● Scroll down, show loader and fetch next set of posts
● Add filtering for fetched posts
12. Fast Typing Game

Project Requirement:
Game to beat the clock by typing random words

● Create game UI including a difficulty setting

● Generate random word and place in DOM
● Score increase after word is typed
● Implement timer
● Add certain amount of time after word is typed based on difficulty
● Store difficulty setting in local storage
13. Memory Cards

Project Requirement:
Flash card app for learning. Display, add and remove memory cards with questions and answers

● Create flip cards using CSS

● Create "Add new card" overlay with form
● Display question cards and flip for answer
● View prev and next cards
● Add new cards to local storage
● Clear all cards from local storage
14. Text to speech app

Project Requirement:
A text to speech app. Pre-made buttons and custom text speech. This project uses the
Web Speech API.

● Create responsive UI (CSS Grid) with picture buttons

● Speaks the text when button clicked
● Drop down custom text to speech
● Speaks the text typed in
● Change voices and accents
15. Search for Lyrics

Project Requirement:
Find songs, artists and lyrics using the lyrics.ovh API

● Display UI with song/artist input

● Fetch songs/artists and put in DOM
● Add pagination
● Add get lyrics functionality and display in DOM
16. Final PROJECT ASSIGNMENT

PORTFOLIO WEBSITE:
1. For your final project assignment, you will be creating a comprehensive portfolio website that
showcases all the above projects you have completed during this front-end development
bootcamp. This portfolio website will serve as a testament to your skills and accomplishments,
allowing potential employers or clients to assess your capabilities.

2. Remember, your portfolio website should reflect your skills, creativity, and professionalism. Make
sure to thoroughly test your website for any bugs, typos, or design inconsistencies. A polished and
error-free portfolio will leave a positive impression on visitors and enhance your chances of
landing job opportunities or freelance projects.

3. Good luck with your final project assignment! Use this opportunity to demonstrate your expertise
and make your portfolio website a true reflection of your capabilities as a front-end developer.
BENEFITS YOU WILL GET
AFTER COMPLETING THIS
BOOTCAMP
Completing the front-end development bootcamp provides you with a range of valuable benefits:

1. Portfolio of 15 Projects: Through hands-on projects, you will create an impressive portfolio
that demonstrates your ability to design and develop diverse web applications.
2. Strong Technical Skills: This bootcamp curriculum covers HTML, CSS, JavaScript, and
other essential technologies, equipping you with the knowledge to build responsive and
interactive websites.
3. Problem-Solving Abilities: You will sharpen your problem-solving skills by tackling
real-world coding challenges, enhancing your ability to analyze and solve complex
problems.
4. Networking Opportunities: Connect with fellow boot camp participants, mentors, and
industry professionals, expanding your professional network and creating potential job
opportunities.

By completing the front end development bootcamp, you will not only gain a portfolio but also
develop the skills, knowledge, and connections necessary for a successful career in frontend
development.