Scribd
Upload
6 views6 pages

Frontend Course Outline

The document outlines a 12-week web development course covering HTML, CSS, Bootstrap, JavaScript, and React. Each week includes specific topics, practical tasks, and links to design resources on Figma. The course culminates in sessions on Git and TypeScript, with a focus on integrating React components and libraries.

Uploaded by

nomeibro
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
6 views6 pages

Frontend Course Outline

The document outlines a 12-week web development course covering HTML, CSS, Bootstrap, JavaScript, and React. Each week includes specific topics, practical tasks, and links to design resources on Figma. The course culminates in sessions on Git and TypeScript, with a focus on integrating React components and libraries.

Uploaded by

nomeibro
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/ 6

Course Outline

3 Months (12 weeks)

1st Week

Day - 1
1. Introduction Web Development, HTML, HTML5 & IDEs
2. Basics of HTML & CSS and HTML Headings, Paragraphs & Images
3. HTML Text Formatting, Links, Entities, and Inline vs Block Level Elements
4. HTML Lists: Unordered List, Ordered List
5. Detailed Overview of HTML5 and HTML5 Semantic Elements

Day - 2
1. Creating and Using CSS Styles: Inline CSS, Internal CSS & External CSS
2. Using CSS3 Styles with div, p, span, etc. for Creating Beautiful Web Pages
3. CSS3 Box-Model: Padding, Margin, Outline, Border, Background
4. CSS3 Floating, Positioning, Overflow, Image-Opacity, and Image-Sprites

Day - 3
https://www.figma.com/file/76qyk4r8URRVgPEjvuaNVX/Login-Page?node-id=0%3A1

Day - 4
https://www.figma.com/file/DDRfBj9yNZy9E7A1ZONuDc/Login-Page-task-2?node-id=0%3A1

Day - 5
https://www.figma.com/file/cl5Zt8iRpjg5e4f7ea41en/Portfolio-UI---Web-%26-Mobile-(Communit
y)?node-id=0%3A1

2nd Week

Day - 1
1. Introduction to BootStrap 4 and BootStrap 4 Grid System in Detail
2. Bootstrap 4 Typography, Tables, Images, Thumbnails and Buttons
3. Bootstrap 4 for Creating Elegant Forms for Collecting User Data

Day - 2
1. Bootstrap 4 Jumbotron, Tooltips, Popovers, Alerts, Spinners & Badges
2. BootStrap 4: Navs, Navbars, Menus, Tabs, Dropdown and Collapse
3. Bootstrap 4 Pagination, Modals, Cards, Image Carousel and Scrollspy

Day - 3
https://www.figma.com/file/hSjAHdITYTr1dFk6WBxXXY/Untitled?node-id=0%3A1

Day - 4
https://www.figma.com/file/H2cKNnJvxHjcddbuU5plhT/Landingpage-LaslesVPN?node-id=0%3
A1

Day - 5
1. Complete HTML, CSS, and Bootstrap revision

3rd Week

Day - 1
https://figma.com/file/asfF4yG5m75QGsYkIf8Cd8/Figma-Web-Design

Day - 2
Use the slider on the previous task
https://figma.com/file/asfF4yG5m75QGsYkIf8Cd8/Figma-Web-Design

Day - 3 - 4 - 5
Develop file using the slider and complete responsive
https://www.figma.com/file/NRBh43X8duUV8B3VbAe2Qm/Landing-page-for-Hosting-Compan
y

4th Week

Day - 1 & 2

CSS library introduction (Foundation, Skelton, Animation.css Material Design)


CSS extension (SASS, SCSS, LESS)

Day - 3 - 4 - 5

Make this using Material UI library use different animation


https://www.figma.com/file/EJnSyhStsDxNOoJgklUoUX/Assessment-Test?node-id=0%3A1

5th Week
Day - 1
Basic of JavaScript
Javascript Fundamentals
● Functions & function declaration
● Data types
● let, const, var difference
● Function Calling
● Operators
● Array Operation
Day - 2
● Object & object method
● Loops
● Handling click event
● Arrow Function
Day - 3
● Stings
● switches
● Await
● Asynchronous
Days - 4 & 5
Test Task
Custom slider owl carousel Animation

6th Week

Day - 1
Calculator with percentage calculation
Day - 2
Convert Age years into Days
Day - 3
Counter Tasbeeh
Days - 4 & 5
https://www.figma.com/file/liAIfQ3m1BFueBroE52fbM/Frispes-Landing-Page---%5B-
Free-UI-Kit-%5D-(Community)?node-id=0%3A1
7th Week
Day - 1
● What is React?
● What is a Single Page Application
● Setup React
● Understand The flow of folders
● How to Add packages
● What is Virtual DOM?

Days - 2 & 3
● Difference b/w Class component and Functional Component
● Make one hello world app with a functional component
● What are Node Modules
● what is package.json

Days - 4 & 5
● React Lifecycle(make a diagram with your hand on a hard note to understand)

8th Week

Days - 1 & 2
● create a project in react.js and add a bootstrap library with npm
Days - 3 & 4
● Learn what is Reusable component
● work on the previous projects and use reusable component
Day - 5
● what are props
● why do we use props
● practice

9th Week
Day - 1
● React -Router
● install react-router with npm
● (Link,useNavigate,NavLink)
Day - 2
● React hooks
● how we initialize variables in react.js
● useState hook
● Practice
Day - 3
● use effect hook
● use Effect
● Practice
Days - 4 & 5
● useRef hook
● Why do we use (UseRef) hook
● Practice (Scroll to desired Section using UseRef hook)
● UseMemo Hook
● why do we use (UseMemo) hook
● Practice

10th Week
https://www.figma.com/file/fAIyt6fXpMHTpxTnuM3s1G/Untitled?node-id=1%3A161

11th Week

Day - 1 & 2
● Git Session
● Practice Git

Day - 3 & 4
Typescript Session
TS code structure
TS Functional Components
TS Class Components

Day - 5
React Integration Overview
12th Week

You might also like