JetBrains Academy Course Catalog
CoursesSkill paths
Subjects
AI Coding ToolsAI EngineeringAlgorithms and Data StructuresBackendCloud & DevOpsData ScienceDeep LearningDevOpsFrontendFull StackKotlin & AndroidMachine LearningMathML & MathSQL and DatabasesWeb Dev
Languages
C/C++GoHTML/CSSJavaJavaScriptKotlinPythonRustScala
In-IDE learningFreeiPelino

Front-End FunDev

Advanced

You'll take this course in your JetBrains IDE.
Just install JetBrains Toolbox 2.7+, and we'll handle the rest!

Advanced

About

Ready to transition from basic web design to professional frontend engineering? This intensive, project-based course bridges the gap between introductory coding and industry-standard development. Movingaway from passive video-watching, this curriculum is built around a 60/40 practical-to-theory ratio. You won't just learn concepts; you will write, refactor, and debug code directly inside aprofessional IDE (JetBrains WebStorm).Throughout this course, you will build a portfolio of interactive, scalable, and accessible web applications. You'll master the art of translating UI/UX designs into pixel-perfect interfaces usingadvanced CSS architectures, and breathe life into them using modern ES6+ JavaScript and Web APIs.

External author course

This course was created and is maintained by an independent author. JetBrains Academy only verifies that it works correctly and is safe to use. For any questions about the content, please contact the course author directly.

Content

  1. Theory: HTML5 Semantics
  2. Quiz: Why Semantic HTML?
  3. Task: Semantic HTML Refactor
  4. Theory: ARIA & Keyboard Navigation
  5. Quiz: Interactive Divs
  6. Task: Accessible Dropdown
  7. Theory: Responsive Images
  8. Capstone: Advanced HTML
  9. Task: Mobile Fallbacks
  10. Quiz: The Picture Tag
  1. Theory: Information Architecture
  2. Quiz: Information Architecture
  3. Information Architecture to DOM
  4. Capstone: Design to Code
  1. Theory: Flexbox (1D Layout)
  2. Quiz: Grid vs Flexbox
  3. Centering with Flexbox
  4. Theory: CSS Grid (2D Layout)
  5. The Holy Grail Layout (Grid)
  6. Theory: Responsive Media Queries
  7. Mobile-First CSS
  8. Capstone: Responsive Flexbox Gallery
  9. Capstone: Grid Photo Mosaic
  1. Theory: Variables & Nesting
  2. Quiz: CSS Preprocessors
  3. Variables & Nesting
  4. Capstone: Advanced Sass/SCSS
  1. Theory: Bootstrap Grid
  2. Quiz: The Bootstrap Grid
  3. Bootstrap 5 Grid
  4. Theory: Tailwind CSS (Utility-First)
  5. Quiz: Component vs Utility
  6. Task: The Tailwind Card
  7. Capstone: Implement Design with Bootstrap
  8. Capstone: Tailwind Profile
  1. Theory: The Frontend Swiss Army Knife
  2. Quiz: The Network Tab
  3. The Specificity Bug
  4. Capstone: Console Detective
  1. Theory: ES6+ Fundamentals
  2. Quiz: Variable Declaration
  3. Modernizing Legacy JS
  4. Capstone: Data Unpacking
  1. Theory: Arrow Functions
  2. Arrow Functions
  3. Theory: Array Methods
  4. Quiz: Higher-Order Methods
  5. Array Methods (Map, Filter, Reduce)
  6. Capstone: Advanced JavaScript Logic
  1. Theory: Legacy jQuery
  2. Legacy jQuery
  3. Theory: Modern Native APIs
  4. Quiz: Querying the DOM
  5. Modern Native APIs
  6. Capstone: Dynamic DOM Application
  1. Theory: Fetch API & Async/Await
  2. Quiz: The Await Keyword
  3. Fetch API & Async/Await
  4. Theory: POST Requests
  5. Quiz: Content-Type
  6. Task: Submit Data
  7. Capstone: Form Submission
  1. Theory: Local Storage API
  2. Quiz: Web Storage Limits
  3. Local Storage API
  4. Theory: Browser Cookies
  5. Quiz: Why Cookies?
  6. Parsing the Cookie Monster
  7. Theory: Session Storage
  8. Quiz: Ephemeral Data
  9. Capstone: Build a Web App (Async + Storage)
  1. Theory: Bundlers & Vite
  2. Quiz: The ES Module System
  3. Initializing Vite
  4. Capstone: The Module System

Learn with the tools developers use every day

Real-world development environment (Python)
Project-based learning journey (Python)
Collaboration via Git (Python)
Focused learning (Python)

  • Real-world development environment

    Gain hands-on experience with the same tools and workflows you'll use in your career, reducing the learning curve when transitioning to real-world projects.

  • Project-based learning journey

    Our plugin is designed to guide you through real coding projects that you can showcase in your portfolio after completion.

  • Collaboration via Git

    Easily track changes and collaborate on projects using Git — an essential tool for developers in every field.

  • Focused learning

    Enjoy fewer distractions with assignments, coding, debugging, and version control all in one window

Student? Get JetBrains IDEs & hands-on courses — free for the full duration of your studies.

What do you need to start?

1

Install the free JetBrains Toolbox App

The JetBrains Toolbox App 2.7+ makes setting up your course effortless. Already have a compatible IDE? It will launch it. If not, the app will install the right IDE for your course.

Learn more about our licenses here.

JetBrains Toolbox App illustration
2

Confirm the course launch

Click Take course and then Allow to open the Toolbox App.

Select Always Allow to skip this confirmation in the future.

To return to the course later, find it in your IDE's recent projects.

Need more help? Check out our guide.

Course launch confirmation illustration
JetBrains Toolbox App illustration

The JetBrains Toolbox App 2.7+ makes setting up your course effortless. Already have a compatible IDE? It will launch it. If not, the app will install the right IDE for your course.

Learn more about our licenses here.

JetBrains Toolbox App illustration

Click Take course and then Allow to open the Toolbox App.

Select Always Allow to skip this confirmation in the future.

To return to the course later, find it in your IDE's recent projects.

Need more help? Check out our guide.

JetBrains Toolbox App illustration

FAQ and troubleshooting

Yes, you will need the JetBrains Toolbox App and a JetBrains IDE.

Just click this link to install the JetBrains Toolbox App. We've taken care of all the necessary settings, and the app will handle the rest of the setup for you.

The JetBrains Toolbox App checks which IDE is compatible with your course and whether it is installed on your computer. If you have the necessary IDE installed, the app will open it. If not, JetBrains Toolbox will initiate the installation, prioritizing free community editions.

Yes, the JetBrains Toolbox App is essential, even if you already have a JetBrains IDE. It automatically prepares your IDE for studying by installing the required plugins and updating the IDE if necessary.

Please make sure you have the latest version of the JetBrains Toolbox App. To update, open the app and click Update Toolbox App, or download the latest version here.

If you’re using a Chrome-based browser, please also allow Find devices on local networks in the popup that appears on the course page. When this permission is granted, the page will detect when the Toolbox App opens on your system and you’ll be able to open the course properly.

Yes! It's 100% free and works with both the free and paid versions of JetBrains IDEs.

If you're a student, apply for the Student Pack to get full access to JetBrains IDEs for the duration of your studies. If not, check if you qualify for a free non-commercial license.

The configuration process may vary depending on the IDE you are using for the course. For detailed instructions, please refer to the Troubleshooting guide.
Report BugLeave Feedback
License

Learn to code like a pro with JetBrains Academy

Explore catalog

The course requires the latest installed version of Toolbox application. If you don’t have it, you can download it here.

Privacy & SecurityTerms of UseTrademarksLegalGenuine Tools
© 2000—2026 JetBrains s.r.o. All rights reserved. Developed with drive and IntelliJ IDEA