Front-end Development | Ingress Academy
For individuals For business Jobs & hiring
Career Paths Courses Why Us Instructors Blog
az en ru
Portal

Software Development

Front-end Development

Front-End Development Course equips students with the skills required to build modern and responsive web applications from scratch. Throughout the program, participants learn HTML, CSS, JavaScript, React, state management, API integration, and AI-powered development tools, while gaining hands-on experience through real-world projects. The training concludes with a final project and deployment to live environments such as Vercel or Netlify.

Intermediate On-site 20 weeks 80 hours

About this course

Become a skilled Front-End Developer by mastering the technologies behind modern web applications. This course covers everything from HTML, CSS, and JavaScript fundamentals to advanced React concepts, state management, API integration, and performance optimization. Participants will gain hands-on experience by building real-world projects, using industry-standard tools such as Git and GitHub, and leveraging AI-powered development assistants like ChatGPT and GitHub Copilot. By the end of the program, students will be able to design, develop, and deploy responsive, scalable, and interactive web applications with confidence.

What you'll learn

  • Upon successful completion of the Front-End Development Course, participants will be able to:
  • Build modern and responsive websites using HTML, CSS, and JavaScript.
  • Develop dynamic and interactive web applications with React.
  • Integrate and consume REST APIs in web applications.
  • Manage application state using Context API, Redux Toolkit, and React Query.
  • Use Git and GitHub for version control and collaboration.
  • Apply AI-powered development tools to improve productivity and code quality.
  • Optimize application performance and follow industry best practices.
  • Deploy web applications to production environments such as Vercel and Netlify.
  • Design, develop, and deliver complete real-world Front-End projects independently.

Prerequisites

  • Basic computer and internet usage skills.
  • No prior programming experience is required.
  • A personal computer with internet access for practical exercises and projects.
  • Willingness to learn and practice regularly throughout the course.
  • Recommended (but not mandatory):
  • Basic understanding of how websites and web browsers work.

Training program

Download program
  1. 1 Lesson 1 — Introduction & Setup
  2. 2 Course overview, expectations, grading
  3. 3 What is Frontend Development?
  4. 4 Client vs Server architecture
  5. 5 How browser works (request/response basics)
  6. 6 Introduction to tools:
  7. 7 VS Code installation
  8. 8 Extensions (Live Server, Prettier, etc.)
  9. 9 Folder structure & workflow
  10. 10 Lesson 2 — HTML Fundamentals
  11. 11 HTML document structure (<!DOCTYPE>, html, head, body)
  12. 12 Basic tags:
  13. 13 headings, paragraphs
  14. 14 links, images
  15. 15 Attributes (href, src, alt)
  16. 16 Inline vs block elements
  17. 17 Best practices (clean structure)
  18. 18 Lesson 3 — HTML Forms & Semantic
  19. 19 Forms:
  20. 20 Lesson 2 — HTML Fundamentals
  21. 21 HTML document structure (<!DOCTYPE>, html, head, body)
  22. 22 Basic tags:
  23. 23 headings, paragraphs
  24. 24 links, images
  25. 25 Attributes (href, src, alt)
  26. 26 Inline vs block elements
  27. 27 Best practices (clean structure)
  28. 28 Lesson 3 — HTML Forms & Semantic
  29. 29 Forms: input types (text, email, password) o textarea, select
  30. 30 Form validation (required, minlength)
  31. 31 Semantic HTML: header, section, article, footer
  32. 32 Accessibility basics (labels, alt text)
  33. 33 Lesson 4 — CSS Fundamentals
  34. 34 CSS syntax (selector, property, value)
  35. 35 Types of CSS: inline, internal, external
  36. 36 Selectors: class, id, element
  37. 37 Box model: margin, padding, border, content
  38. 38 Units (px, %, rem, em)
  39. 39 Lesson 5 — Layout & Flexbox
  40. 40 Display properties (block, inline, inline-block)
  41. 41 Positioning: static, relative, absolute, fixed
  42. 42 Flexbox: flex container vs items o justify-content, align-items
  43. 43 Real layout examples
  44. 44 Lesson 6 — Grid & Responsive Design
  45. 45 CSS Grid basics: rows, columns, gap
  46. 46 Grid vs Flexbox (when to use)
  47. 47 Responsive design: media queries o mobile-first approach
  48. 48 Breakpoints
  49. 49 Lesson 7 — SCSS & Frameworks
  50. 50 SCSS basics: variables o nesting
  51. 51 Intro to Bootstrap or Tailwind
  52. 52 Utility-first vs component-based styling
  53. 53 When to use frameworks
  54. 54 Lesson 8 — Git & Project Setup
  55. 55 What is Git?
  56. 56 Basic commands: init, add, commit, push
  57. 57 GitHub workflow: repo creation o push project
  58. 58 Collaboration basics
  59. 59 Project structure setup
  1. 1 Lesson 9 — JS Basics
  2. 2 What is JavaScript?
  3. 3 Variables (let, const, var)
  4. 4 Data types: string, number, boolean
  5. 5 typeof operator
  6. 6 Naming conventions
  7. 7 Lesson 10 — Operators & Conditions
  8. 8 Arithmetic operators
  9. 9 Comparison operators
  10. 10 Logical operators
  11. 11 Conditional statements: if, else if, else o switch
  12. 12 Lesson 11 — Loops
  13. 13 for loop
  14. 14 while / do-while
  15. 15 Loop use cases
  16. 16 Basic problem solving
  17. 17 Lesson 12 — Functions
  18. 18 Function declaration vs expression
  19. 19 Arrow functions
  20. 20 Parameters & return
  21. 21 Scope (global vs local)
  22. 22 Hoisting concept
  23. 23 Lesson 13 — Arrays & Objects
  24. 24 Arrays: creation, indexing o push, pop, shift, unshift
  25. 25 Objects :key-value structure
  26. 26 Access & update data
  27. 27 Lesson 14 — Advanced Arrays
  28. 28 map()
  29. 29 filter()
  30. 30 reduce()
  31. 31 find(), sort()
  32. 32 Real examples with data
  33. 33 Lesson 15 — Modern JS
  34. 34 Destructuring (array, object)
  35. 35 Spread & rest operators
  36. 36 Template literals
  37. 37 Optional chaining
  38. 38 Lesson 16 — DOM & Events
  39. 39 What is DOM?
  40. 40 Selecting elements: querySelector, getElementById
  41. 41 Changing content & styles
  42. 42 Events: click, input
  43. 43 Event listeners
  44. 44 Lesson 17 — Forms & Validation
  45. 45 Handling form submission
  46. 46 Prevent default behavior
  47. 47 Form validation logic
  48. 48 Error handling in UI
  49. 49 Lesson 18 — Async JavaScript
  50. 50 Synchronous vs asynchronous
  51. 51 setTimeout, setInterval
  52. 52 Callbacks concept
  53. 53 Introduction to Promises
  54. 54 Lesson 19 — Fetch & API
  55. 55 What is API?
  56. 56 HTTP basics (GET)
  57. 57 Fetch API usage
  58. 58 Handling responses (JSON)
  59. 59 Error handling
  60. 60 Lesson 20 — Advanced JS Concepts
  61. 61 OOP basics: classes, constructor
  62. 62 Event loop (simplified)
  63. 63 JavaScript runtime overview
  64. 64 Intro to NPM
  65. 65 Modules (import/export)
  1. 1 Lesson 21 — React Introduction
  2. 2 What is React?
  3. 3 SPA concept
  4. 4 Setup (Vite / CRA)
  5. 5 Project structure
  6. 6 Lesson 22 — JSX & Components
  7. 7 JSX syntax
  8. 8 Creating components
  9. 9 Functional components
  10. 10 Rendering UI
  11. 11 Lesson 23 — Props
  12. 12 Passing data between components
  13. 13 Props drilling basics
  14. 14 Reusable components
  15. 15 Lesson 24 — State & Events
  16. 16 useState hook
  17. 17 Updating state
  18. 18 Event handling (onClick, onChange)
  19. 19 Lesson 25 — Rendering Logic
  20. 20 Conditional rendering
  21. 21 Lists & keys
  22. 22 Dynamic UI
  23. 23 Lesson 26 — useEffect & API
  24. 24 useEffect basics
  25. 25 Side effects
  26. 26 API call inside React
  27. 27 Loading & error states
  28. 28 Lesson 27 — React Router
  29. 29 SPA routing
  30. 30 Route, Link, Navigate
  31. 31 Dynamic routes
  32. 32 Lesson 28 — Forms in React
  33. 33 Controlled components
  34. 34 Handling input state
  35. 35 Form submission
  36. 36 Lesson 29 — Advanced Hooks
  37. 37 useRef
  38. 38 useMemo
  39. 39 useCallback
  40. 40 Performance basics
  41. 41 Lesson 30 — Custom Hooks
  42. 42 What are custom hooks?
  43. 43 Creating reusable logic
  44. 44 Code organization
  45. 45 Lesson 31 — Context API
  46. 46 Global state problem
  47. 47 Context creation
  48. 48 useContext usage
  49. 49 Lesson 32 — Redux Toolkit
  50. 50 Why Redux?
  51. 51 Store & slices
  52. 52 Actions & reducers
  53. 53 Lesson 33 — Redux Advanced
  54. 54 useDispatch, useSelector
  55. 55 Async logic (thunk)
  56. 56 Best practices
  57. 57 Lesson 34 — React Query
  58. 58 Data fetching vs state management
  59. 59 useQuery basics
  60. 60 Caching & refetching
  61. 61 useMutation intro
  62. 62 Lesson 35 — Performance Optimization
  63. 63 React.memo
  64. 64 Lazy loading
  65. 65 Code splitting
  66. 66 Avoiding re-renders
  67. 67 Lesson 36 — Architecture & Best Practices
  68. 68 Folder structure
  69. 69 Clean code principles
  70. 70 Reusability
  71. 71 Scalability mindset
  1. 1 Lesson 37 — AI Tools
  2. 2 ChatGPT for developers
  3. 3 GitHub Copilot usage
  4. 4 Prompt basics
  5. 5 Real coding examples
  6. 6 Lesson 38 — AI Workflow
  7. 7 Prompt engineering
  8. 8 Code generation
  9. 9 Debugging with AI
  10. 10 Refactoring code
  1. 1 Lesson 39 — Project Planning
  2. 2 Choosing project idea
  3. 3 Architecture planning
  4. 4 API integration planning
  5. 5 Task breakdown
  6. 6 Lesson 40 — Finalization & Deploy
  7. 7 Project completion
  8. 8 Debugging & optimization
  9. 9 Deployment (Vercel / Netlify)
  10. 10 Presentation & demo

Instructors

Ilyas Aghakishiyev

Ilyas Aghakishiyev

Frontend Developer

Azərbaycan Respublikasının Mərkəzi Bankı

 Ilyas Aghakishiyev

Ilyas Aghakishiyev

Frontend Developer

Azərbaycan Respublikasının Mərkəzi Bankı