Scribd
Upload
4 views4 pages

Frontend-Syllabus-2024 (3)

The document outlines a comprehensive 90-day syllabus for a Frontend development course covering HTML, CSS, and JavaScript, as well as React. It includes daily topics, practical exercises, evaluations, and project work to ensure students gain hands-on experience. The course culminates in project submissions and interview preparation sessions to equip students for real-world applications.

Uploaded by

ml4033676
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
4 views4 pages

Frontend-Syllabus-2024 (3)

The document outlines a comprehensive 90-day syllabus for a Frontend development course covering HTML, CSS, and JavaScript, as well as React. It includes daily topics, practical exercises, evaluations, and project work to ensure students gain hands-on experience. The course culminates in project submissions and interview preparation sessions to equip students for real-world applications.

Uploaded by

ml4033676
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/ 4

Frontend Syllabus

DAYS TOPICS DATE SIGNATURE

HTML & CSS

Day 1  Introduction
 Frond-end & Back-end Explanation
 Create HTML structure in notepad and
view in browser
Day 2  Basic HTML Tags
 CSS and types
 Program to HTML with inline CSS
(background-color , font-color)
DAY 3  HTML checked attribute, element, tag,
self-closing tag, HTML id, class, style,
name , DOCTYPE
DAY 4  Heading Tags, h1-h6 (font size)
 CSS margin and padding (inline)
 HTML comments
DAY 5  HTML colors & CSS colors,
RGBA,HEX,HSL
 VS CODE installation
 Live serve Extension
Day 6  Internal CSS,
 CSS syntax class attribute
 Design using internal CSS, Using of
<div> (width , height)
Day 7  HTML table
 Table design using (internal CSS)
 Border collapse
 Table header color and font-design
Day 8  HTML List and types
 List->CSS style
 Image->img tag
Day 9  HTML block and inline element
 Discuss-> project problem of statement
analysis
Day 10  HTML & CSS (internal) workout
 Evaluate students (Q/A session)
Day 11  External style sheet
 Linking style sheet
 Design using External style-sheet
Day 12  Anchor tag
 Uses of anchor tag
 Create link and design using anchor tag
 Page navigation
Day 13  Explain box modeling
 Understanding box-sizing property
 Content-box
 Border-box
Day 14  Explain universal selectors
 Apply style using universal selector
margin & padding (universal)
 Float left right
Day 15  Workout using HTML & CSS
 Written test
 Evaluation (make it report)
Day 16  CSS flex-box flex-direction , align-items,
justify-content , align- content
Day 17  HTML semantic elements
 Design using flex
Day 18  HTML form with CSS design
 All input type values
Day 19  CSS grid, grid alignment , grid-template
column ,grid-temple-row , row-gap,
column-gap
Day 20  Mock-test conduct online max 30
Questions
 Team split for project & assign problem of
project to team
Day 21  HTML video & audio controls
 CSS borders
 CSS box-shadow
Day 22  CSS icons integration ->
 Google icons
 CSS inline-block
Day 23  Design CSS card
 CSS overflow
 Border-radius
 Hover - transition
Day 24  Media Query
 Responsive breakpoints
 Create design mobile , laptop, desktop - 4k
Day 25  Written test & Evaluation
Day 26  CSS position
 Z-index
Day 27  Transform
 Transition
 Animation
Day 28  Website building demo
 Doubt clearing
 Creating drop-down using CSS
Day 29  Project team
 Problem statement
 PPT presentation , each team
Day 30  Basic project using HTML CSS/ verify &
validation
JAVASCRIPT

Day 31  JavaScript introduction


 Java-Script compiler architecture
Day 32  DOM -> documents object model
 HTML & java script integration using
button on-click
Day 33  Function demo and JavaScript data-type
 var, let , const.
Day 34  Control statement
 Conditional statements, if , if-else , else-if,
switch
Day 35  Array
 Looping statement
Day 36  Iteration, using while, do-while, for
Day 37  JavaScript operator
 Arithmetic operator
 Assignment operator
Day 38  JavaScript operators
 Logical operator
 Comparison operator
Day 39  Function
 Function Arguments
 Function parameters
 return type
Day 40  Written test (or) MOCK Interview Basic
Question
WEEKEND 2 HRS (OR) ONLINE
ASSIGN PROJECT , BASED ON PROBLEM STATEMENTS, & PROJECT MODULE
PLAN
DAY 41  Introduction react & working react,
node.js , npm , virtual dom
 Basic react app creation
Day 42  Arrow function
 call back function
 React functional component design
 JSON implement
Day 43  Different between class and function
component,
 Map iteration using JSON
Day 44  Create functional component render
dynamically
Day 45  JavaScript spread operator , Rest
Day 46  React pass-value to the components using
separator and destructure
Day 47  React application building using CSS
Dynamic
 Components workout (Q&A) session
WEEKEND 2 HRS (OR) ONLINE
Project module presentation each team
Day 48  Install material UI library
 Design using material UI
Day 49  Mui grid system responsive
Day 50  React router dom
 Page navigation
Day 51  Demo project design using react
 Material UI and JSON
Day 52  Design Mui form & use-state in functional
component
Day 53  JavaScript async/await , Synchronous
Day 54  set-interval / set-timeout
Day 55  Axios & fetch/ app calls
Day 56  React api integration & use-effect hooks
Day 57  Data display in react UI using material UI
Day 58  Java-script promises,
 opps intro
Day 59  Class constructor(this , super)
Day 60  Inheritance
Day 61  Method overloading & overriding
Day 62  BOM NAVIGATION, SIZE ,
LOCTAION
DAY 63  Property and method
Day 64  Mui dialog integration
Day 65  JavaScript & react mock integration
Day 66,  Project
67,68  Module Submission
Day 69  Git hub creation and controlling
Day 70  Git deployment
Day 71  HTML , CSS, workouts, interview basic
Day 72  JavaScript interview program workout
Day 73  React interview preparation
Day 74  JavaScript mock
Day 75 -  Buffer project documentation and
90 validation

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