FRONTEND PROGRAMMING COURSE SYLLABUS

43 Theoretical Sessions
26 Practical Sessions

Each session: 2 hours

Course duration: 5 months
+1 month for Final Project
 Frontend Programming course syllabus

Table of Contents
Contents
Grading Policy: ............................................................................................................................................................................ 5

MODULE I – HTML and CSS ......................................................................................................................................................... 7

Lesson 1. Introduction to Web Development Fundamentals ................................................................................................. 7

Lesson 2. Exploring HTML Essentials...................................................................................................................................... 7

Lesson 3. Tables, Lists, Forms, and Structural Elements......................................................................................................... 7

Practice 1. ................................................................................................................................................................................. 7

Lesson 4. CSS Fundamentals: Structure, Styling, and Best Practices ...................................................................................... 7

Lesson 5. Advanced CSS Styling Techniques: Color, Fonts, Selectors, and Positioning ........................................................... 7

Lesson 6. Advanced CSS Styling Techniques .......................................................................................................................... 7

Practice 3. ................................................................................................................................................................................. 8

Lesson 7. Mastering Advanced CSS........................................................................................................................................ 8

Lesson 8. Advanced CSS Techniques ...................................................................................................................................... 8

Practice 4. ................................................................................................................................................................................. 8

Lesson 9. Advanced CSS Techniques: Variables, Transitions, Animations .............................................................................. 8

Lesson 10. Advanced CSS Styling ............................................................................................................................................. 8

Practice 5. ................................................................................................................................................................................. 8

Lesson 11. Mastering Flexbox: Container, Items, and Advanced Techniques ........................................................................... 8

Lesson 12. Exploring CSS Grid .................................................................................................................................................. 9

Practice 6. ................................................................................................................................................................................. 9

Lesson 13. Bootstrap Essentials: Components, Grid System, and Project Integration .............................................................. 9

Lesson 14. Version Control Mastery: Git, GitHub/GitLab, and Command Line Practices .......................................................... 9

MODULE II – JavaScript ............................................................................................................................................................... 9

Lesson 15. JavaScript Fundamentals: History, Variables, Operators, and Output .................................................................... 9

Lesson 16. JavaScript Control Flow: Comparison, Logic, and Iteration ................................................................................... 10

Practice 7. ............................................................................................................................................................................... 10

Lesson 17. JavaScript Functions: Hoisting, Declarations, Expressions, and Modern Syntax ................................................... 10

Practice 8. ............................................................................................................................................................................... 10
Frontend Programming course syllabus

Lesson 18. JavaScript Data Structures: Objects, Arrays, and Operator Mastery ..................................................................... 10

Practice 9. ............................................................................................................................................................................... 10

Lesson 19. JavaScript Advanced Techniques: Destructuring, Operators, Functions, Exercises ............................................... 10

Practice 10. ............................................................................................................................................................................. 10

Practice 11. ............................................................................................................................................................................. 11

Lesson 20. DOM Manipulation Mastery: Working with Elements, Events, and Time ............................................................. 11

Practice 12. ............................................................................................................................................................................. 11

Practice 13. ............................................................................................................................................................................. 11

Lesson 21. Exploring Advanced JavaScript ............................................................................................................................. 11

Lesson 22. Object-Oriented JavaScript: Classes, Constructors, Exception Handling ............................................................... 11

Practice 14. ............................................................................................................................................................................. 11

Lesson 23. Asynchronous JavaScript: Timers, HTTP Fundamentals, Fetch API, and Promises ................................................ 12

Lesson 24. JavaScript Promises and Storage: Handling Async Operations and Data Storage ................................................. 12

Practice 15. ............................................................................................................................................................................. 12

Lesson 25. Mastering RxJS..................................................................................................................................................... 12

Practice 16. ............................................................................................................................................................................. 12

Lesson 26. Functional Programming with JavaScript ............................................................................................................. 12

Lesson 27. Exploring Algorithms in JavaScript: Sorting, Searching, and Complexity Analysis ................................................. 12

Practice 17. ............................................................................................................................................................................. 13

Lesson 28. JavaScript Data Structures ................................................................................................................................... 13

Practice 17. ............................................................................................................................................................................. 13

Lesson 29. Essentials of JavaScript: Paradigms, Threading, Non-Blocking, and Runtime ....................................................... 13

Lesson 30. NPM and Module Management ........................................................................................................................... 13

Practice 18. ............................................................................................................................................................................. 13

MODULE EXAM WEEK:.............................................................................................................................................................. 13

MODULE III – React JS ............................................................................................................................................................... 14

Lesson 31. React.js Fundamentals: History, Architecture, and Development Environment ................................................... 14

Lesson 32. React.js: JSX, Components, and Styling Basics ...................................................................................................... 14

Practice 19. ............................................................................................................................................................................. 14

Frontend Programming course syllabus

Lesson 33. React.js State, Components, and Lifecycle Basics ................................................................................................. 14

Practice 20. ............................................................................................................................................................................. 14

Practice 21. ............................................................................................................................................................................. 14

Lesson 34. React Router Essentials: Basic Routing and Practical Application ......................................................................... 14

Lesson 35. React.js Advanced Technique............................................................................................................................... 15

Lesson 36. React Hooks and Router Hooks ............................................................................................................................ 15

Practice 22. ............................................................................................................................................................................. 15

Lesson 37. React Context API and Hooks: Simplifying State Management ............................................................................ 15

Practice 23. ............................................................................................................................................................................. 15

Lesson 38. React State Management: Reducers, Memoization, and Custom Hooks .............................................................. 15

Lesson 39. Redux Essentials: Introduction, State Management, and Core Concepts.............................................................. 15

Practice 24. ............................................................................................................................................................................. 16

Lesson 40. React-Redux Hooks and Middleware ................................................................................................................... 16

Practice 25. ............................................................................................................................................................................. 16

Lesson 41. Building Apps with Custom Configurations .......................................................................................................... 16

Lesson 42. Enhancing the User Experience ............................................................................................................................ 16

Lesson 43. Unit Tests, Integration Tests, and Accessibility Checks ......................................................................................... 16

Practice 26. ............................................................................................................................................................................. 16

Project Showcase: Hands-On Application of Knowledge ........................................................................................................... 17

Expectations Upon Course Completion: .................................................................................................................................... 18

Frontend Programming course syllabus

Grading Policy:

Grade Final score Honor degree

A 85 – 100 High
B 70 – 84 Merit
C 50 – 69 Pass
F < 50 Fail

Assessment:
Graded Activity Weight
Module exam (theoretical and
30%
practical)
Student assessment 10%
Final Project 30%
Final exam 30%

1. Module exam:
The exam is held 1 time. Module exam questions consist of Module I. 1 Week before the Exam is
Reading Period.

Assessment type Format

Theoretical Multiple choice or open-ended
Practical In-Class or task based

2. Student assessment:
Student assessment is the process of evaluating students’ abilities and achievements. Each
student is evaluated every month during their education period by the following criteria:
Student’s performance:
 Takes an active part in classes
 Listens carefully to lessons
 Asks questions when he doesn't understand the lesson
 Motivation is high
Frontend Programming course syllabus

Student’s technical knowledge:

 Performs and understands assigned tasks
 He can apply what he knows and has some knowledge
 Can write code without any help

3. Final Project:
The final project enables to show student’s comprehension of the course topics, and capabilities in
problem formulation, presentation, and team working. Projects are assigned by ATL Academy or ATL
Tech.

How you will be graded:

 Completion of task
 Code review/structure
 Content of knowledge

4. Final exam:
The final exam will be based on theoretical questions. Exam questions consist of all topics delivered
during whole session.
Assessment type Format
Theoretical Multiple choice or open-ended
 Frontend Programming course syllabus

MODULE I – HTML and CSS

Lesson 1. Introduction to Web Development Fundamentals

 Essential parts of a computer - CPU, RAM, GPU etc.

 Visual Studio Code
 The most used extensions
 HTML, CSS and JavaScript

Lesson 2. Exploring HTML Essentials

 HTML tags
 Tag attributes, style attribute, style tag
 HTML symbols

Lesson 3. Tables, Lists, Forms, and Structural Elements

 HTML tables
 Ordered list, Unordered list
 Form

Practice 1.

 Building a website structures

Lesson 4. CSS Fundamentals: Structure, Styling, and Best Practices

 CSS structure: selector, declaration, property, and value

 Inline CSS, Internal CSS, External CSS
 Width, Height, Margin, Padding, Border, Outline
 Id, Class

Lesson 5. Advanced CSS Styling Techniques: Color, Fonts, Selectors, and Positioning
 Color & Background-color: RGB(A), HSL(A)
 Font-size, font-weight, font-style
 Box-sizing
 Display properties

Lesson 6. Advanced CSS Styling Techniques

 Visibility and opacity
 Containers vs wrappers
 Browser developer tools
 Vendor prefixes
 Text-transform, text-decoration, text-shadow, box-shadow, drop-shadow
 Frontend Programming course syllabus

Practice 3.

 Lesson 4,5,6

Lesson 7. Mastering Advanced CSS

 Fonts, External fonts with the link, Google Fonts
 Using local fonts with font-face
 Icons, font awesome
 Background images and positioning

Lesson 8. Advanced CSS Techniques

 CSS selectors deep look

 Pseudo-class, pseudo-elements
 Position - static, relative, absolute, fixed, sticky
 Practice with positioning (how to center elements and many more)

Practice 4.

 Lesson 7 – 8

Lesson 9. Advanced CSS Techniques: Variables, Transitions, Animations

 Css variables, var() function, ::root

 Transition, timing function
 Animations, transforms
 Cubic-bezier
 Practice with Animations

Lesson 10. Advanced CSS Styling

 Responsive design
 Media queries
 Mobile-first vs desktop-first media queries
 Linear-gradient, radial-gradient

Practice 5.

 Lesson 9-10

Lesson 11. Mastering Flexbox: Container, Items, and Advanced Techniques

 Flex, Flex container and flex items

 Flex basis, flex shrink, flex grow, flex order, flex wrap
 Practice with flex
 Frontend Programming course syllabus

Lesson 12. Exploring CSS Grid

 Grid
 Practice Grid and Flex

Practice 6.

 Lesson 11-12

Lesson 13. Bootstrap Essentials: Components, Grid System, and Project Integration

 Bootstrap
 Practice Bootstrap

Lesson 14. Version Control Mastery: Git, GitHub/GitLab, and Command Line Practices

 Git
 Github or Gitlub
 Practice Command Prompt

Practice 6.

 CSS

MODULE EXAM WEEK:

 Reading period
 MODULE EXAM I

MODULE II – JavaScript

Lesson 15. JavaScript Fundamentals: History, Variables, Operators, and Output

 JS History
 Variables, basic data types
 Arithmetic operators
 Working with primitive types
 Numbers, String, Boolean
 Undefined, null, NaN
 Typeof
 Comments in JS
 Printing outputs – alert, console
 Frontend Programming course syllabus

Lesson 16. JavaScript Control Flow: Comparison, Logic, and Iteration

 Comparison operators
 Logical operators

 if, else, switch

 Loops – for, while, do-while
 Prompt, confirm

Practice 7.

 Lesson 15 – 16

Lesson 17. JavaScript Functions: Hoisting, Declarations, Expressions, and Modern Syntax

 Hoisting
 Functions
 Function declaration
 Function expression
 Arrow functions
 Default parameters

Practice 8.

 Lesson 17

Lesson 18. JavaScript Data Structures: Objects, Arrays, and Operator Mastery

 Objects
 Difference between primitives and objects
 Arrays
 Array functions: push(), pop(), shift(), unshift(), indexOf(), splice(), slice(), fill(), concat()

Practice 9.

 Lesson 18

Lesson 19. JavaScript Advanced Techniques: Destructuring, Operators, Functions, Exercises

 Destructuring
 Rest and spread operator
 Higher-order array methods (forEach(), map(), reduce(), filter(), join(), sort(), find())
 First Class Functions: Passing functions as arguments, Functions returning functions

Practice 10.

 Lesson 19
 Frontend Programming course syllabus

Practice 11.

 Lesson 18-19

Lesson 20. DOM Manipulation Mastery: Working with Elements, Events, and Time

 DOM
 Working with DOM
 Searching, reading, modifying using DOM
 The event, mouse events
 DOM elements
 Creating, inserting, deleting DOM elements
 Events, Event listeners
 Keyboard and Scroll events
 Date and time

Practice 12.

 Lesson 20

Practice 13.

 Lesson 20

Lesson 21. Exploring Advanced JavaScript

 JS specification: ES6, ES7

 Set, map
 Object inheritance and prototype chaining
 new keyword
 this keyword
 Creating objects with function constructors

Lesson 22. Object-Oriented JavaScript: Classes, Constructors, Exception Handling

 Object Oriented Programming

 Classes, subclasses
 Constructor, super keyword
 Practices with classes
 Exception handling, creating custom exception
 Try, catch, final

Practice 14.

 Lesson 20-21
 Frontend Programming course syllabus

Lesson 23. Asynchronous JavaScript: Timers, HTTP Fundamentals, Fetch API, and Promises

 Asynchronous JavaScript
 SetTimeOut, SetInterval
 What is HTTP?
 Difference HTTP and HTTPS
 Fetch, Making HTTP request with fetch
 GET method

Lesson 24. JavaScript Promises and Storage: Handling Async Operations and Data Storage

 then(), catch()
 Promises
 Resolve, reject

Practice 15.

 Lesson 23- 23

Lesson 25. Mastering RxJS

 RxJS library
 Observable
 Difference between Observable and Promise
 subscribe()
 unsubscribe()
 pipe()

Practice 16.

 Lesson 24- 25

Lesson 26. Functional Programming with JavaScript

 Introduction to functional programming

 Functional programming using JavaScript
 Pure functions and immutable objects
 Currying
 Closures

Lesson 27. Exploring Algorithms in JavaScript: Sorting, Searching, and Complexity Analysis

 Algorithms
 Sorting and Searching algorithms
 Big O notation, algorithm complexity analysis
 Coding some exercises
 Frontend Programming course syllabus

Practice 17.

 Lesson 26- 27

Lesson 28. JavaScript Data Structures

 Data Structures
 Stack, Queue, PriorityQueue
 Binary Tree

Practice 17.

 JS module

Lesson 29. Essentials of JavaScript: Paradigms, Threading, Non-Blocking, and Runtime

 Why JavaScript is called multi-paradigm, single-threaded, non-blocking

 JavaScript Runtime Environment
 Call stack, heap memory
 Callback queue, Event Loop

Lesson 30. NPM and Module Management

 NPM
 Initializing NPM projects
 Dependencies and scripts
 JS module system (import/export/require)
 Webpack

Practice 18.

 JS module

MODULE EXAM WEEK:

 Reading period
 MODULE EXAM II
 Frontend Programming course syllabus

MODULE III – React JS

Lesson 31. React.js Fundamentals: History, Architecture, and Development Environment

 History of React.js
 Declarative and imperative programming
 Component-driven architecture
 Single-page applications
 React.js development environment
 Introduction to JSX
 Create-react-app

Lesson 32. React.js: JSX, Components, and Styling Basics

 Diving deep into JSX

 Thinking in JSX
 Dynamic Content
 Components
 Functional components
 Conditional Rendering
 Props
 Styling components

Practice 19.

 Lesson 26 – 27

Lesson 33. React.js State, Components, and Lifecycle Basics

 State
 Class components
 Asynchronous setState
 Event handling in React
 Components Lifecycle Methods
 High Order Components
 Mounting, updating, unmounting
 Virtual DOM and DOM

Practice 20.

 Lesson 28

Practice 21.

 Lesson 29 – 31

Lesson 34. React Router Essentials: Basic Routing and Practical Application

 React Router
 Frontend Programming course syllabus

 React-router-dom
 Nested routing
 Route params
 Practice

Lesson 35. React.js Advanced Technique

 Lazy loading
 Code Splitting
 Making a rest request
 Practice: Quiz app

Lesson 36. React Hooks and Router Hooks

 React Hooks: useState(), useEffect(), useRef()

 React Router Hooks: useHistory(), useParams(), useLocation()
 Difference between class and stateful functional components

Practice 22.

 Lesson 32 – 34 / In-class quiz

Lesson 37. React Context API and Hooks: Simplifying State Management

 React Context Api

 React Context Api with Hooks
 useContext()
 The task with hooks and context API

Practice 23.

 Lesson 35

Lesson 38. React State Management: Reducers, Memoization, and Custom Hooks

 Reducer logic: useReducer()

 Memoaization, useMemo and useCallback
 Custom hooks
 Practice

Lesson 39. Redux Essentials: Introduction, State Management, and Core Concepts

 Introduction to Redux
 State Management with Redux
 Store
 Redux DevTools
 Reducers
 Actions and action creators
 Action Types
 Frontend Programming course syllabus

Practice 24.

 Lesson 36 – 37

Lesson 40. React-Redux Hooks and Middleware

 React-redux hooks: useSelector() and useDispatch()

 Selectors with Redux
 Redux middlewares
 Asynchronous Redux
 Redux thunk

Practice 25.

 Lesson 38

Lesson 41. Building Apps with Custom Configurations

 Webpack, Babel
 Creating app with custom setup with webpack

Lesson 42. Enhancing the User Experience

 Web Accessibility, WCAG, WAI-ARIA

 Web performance optimizations and Web Vitals
 Progressive web apps and offline

Lesson 43. Unit Tests, Integration Tests, and Accessibility Checks

 Testing React components

 Writing unit tests with jest and react testing library
 Writing integration test and mocking data
 Accessibility testing with jest-axe

Practice 26.

 React module

MODULE EXAM WEEK:

 Reading period
 MODULE EXAM III
 Frontend Programming course syllabus

Project Showcase: Hands-On Application of Knowledge

Throughout the course, participants will engage in a series of mandatory hands-on projects,
each carefully crafted to reinforce and apply the skills acquired. These projects serve as
benchmarks, allowing you to demonstrate proficiency and creativity in the frontend
development domain. Upon successful completion, you will not only fortify your understanding
of the technologies but also assemble an impressive portfolio. Here are the essential projects
included in the curriculum:

Personal Portfolio Website (Project 1):

Craft a personalized portfolio website to showcase your skills, projects, and achievements.

Weather App (Project 2):

Develop a dynamic weather application that fetches real-time weather data.

To-Do List Application (Project 3):

Build a feature-rich to-do list application with user-friendly interfaces.

Interactive Games (Project 4):

Dive into the realm of interactive games, applying JavaScript for engaging user experiences.

Chat Application (Project 5):

Create a real-time chat application with user authentication and interactive messaging
features.

Reddit Client (Project 6):

Build a simplified Reddit client that interacts with Reddit’s API.

Final Project (Project 7):

Culminate your learning with a comprehensive final project, integrating diverse skills acquired
throughout the course.Choose a project that aligns with your interests, allowing you to
showcase your individuality as a frontend developer.
 Frontend Programming course syllabus

Expectations Upon Course Completion:

Upon completing the Frontend Programming Course, students will:

 Web Development Proficiency:

 Build responsive and visually appealing web pages with HTML, CSS, and JavaScript.
 Apply advanced CSS styling and layout techniques.

 JavaScript Application Development:

 Develop dynamic web applications with JavaScript, focusing on DOM manipulation.
 Utilize asynchronous operations, Promises, and HTTP requests.

 React.js Skills:
 Create single-page applications using React.js, including JSX, state management, and
component-driven architecture.
 Implement React Hooks for efficient state handling.

 Styling Techniques:
 Apply advanced CSS styling, including gradients, shadows, and responsive design principles.
 Ensure web accessibility and optimize performance.

 Version Control and Collaboration:

 Use Git, GitHub, or GitLab for version control and collaboration.
 Familiarity with command-line basics.

 Project Showcase:
 Develop a final project demonstrating acquired skills and problem-solving abilities.
 Continuous Learning:
 Cultivate a mindset of continuous learning to adapt to emerging technologies.

 Industry Best Practices:

 Implement clean and maintainable code.
 Adhere to coding standards and industry best practices.

 Community Integration:
 Establish connections within the frontend development community.

 Readiness for Industry:

 Graduates are prepared for challenges in the professional realm of frontend development.