Brief Introduction
The Frontend Development Miniclass is a training program designed for IT students to learn the fundamentals of user interface development for Web and Mobile platforms, following industry standards. This program utilizes professional tools such as VS Code, Web Browsers, and Flutter SDK, commonly used by frontend developers in real-world projects.
Throughout the training, you will immediately apply the theories you learn into hands-on practice, preparing you to step into a professional environment. You will start from building website structures, designing responsive mobile application interfaces, and creating interactive pages powered by programming logic. All topics are covered progressively without skipping essential concepts.
Don’t worry if you’ve never coded before. This miniclass is specially designed for beginners. Our Frontend Team will guide you step by step, ensuring you learn at a comfortable pace—relaxed, pressure-free, yet still gaining valuable and practical skills for your future career.
You will also learn how professional developers work. Beyond writing code, you’ll be introduced to project management using Git and other modern development tools. This way, you’ll gain not only technical skills but also an understanding of how to work professionally, neatly, and in a structured workflow.
So, what are you waiting for? Join the Frontend Development Miniclass, get your VS Code ready, and let’s turn lines of code into cool and dynamic application interfaces!
Learning Timeline
Session 1: Basic Foundation & Installation
Focus: Building the most basic foundation on both platforms
- Mobile: Basic Dart Language (Variables, Data Types) and Flutter Installation
- Web: HTML Structure (DOCTYPE, head, body) and Basic Tags
Session 2: Advanced Structure & Logic
Focus: Web focuses on advanced structure, Mobile focuses on functional logic
- Mobile: Loops (for, while) and basic function usage in Dart
- Web: Forms, Tables, Semantic Elements, and Basic CSS (Selectors, Box Model)
Session 3: Layout & Data Structures
Focus: Web begins styling, Mobile begins structuring data
- Mobile: Introduction to Classes in Dart and Collections (List, Set, Map)
- Web: Modern layouts using Flexbox, Grid, and Media Queries
Session 4: UI Framework & JavaScript Basics
Focus: Web organizes layout, Mobile enters the UI framework
- Mobile: Basic Widgets (Scaffold, AppBar, Container) and basic styling
- Web: Introduction to JavaScript (var, let, const, data types, functions)
Session 5: Manipulation & Assets
Focus: Interaction logic and asset management
- Mobile: Importing images and fonts, Row, Column, and ScrollView layouts
- Web: DOM Selectors and element manipulation (innerHTML, classList)
Session 6: Dynamic Pages
Focus: Making the UI dynamic and introducing navigation
- Mobile: Stateful Widget, setState, and fetching JSON using Dio (GitHub API)
- Web: Event Listeners, Local Storage, and Array Methods (map, sort)