Stage 2 of 5
Stage 2: Frontend Fundamentals
The core web languages in depth: semantic HTML, modern CSS layout, and practical JavaScript.
What this stage covers
21 hands-on lessons built around runnable examples. Every lesson is published as a full page below — read it, copy the code, do the assignment, then check the solution.
- Semantic HTML
- CSS layout
- Flexbox & Grid
- Responsive design
- DOM & events
- Async JavaScript
HTML
6 lessonsStructure content the way browsers, search engines and screen readers expect — from your first tags to semantic page layout.
About this subject
Learn HTML, the language that builds the skeleton of every web page, step by step from the very beginning.
About the Course
HTML (HyperText Markup Language) is the markup language that defines the structure and content of a web page.
This course covers everything from basic HTML syntax to semantic tags, with a hands-on, practice-first approach.
- Audience: Beginners in web development, anyone learning HTML for the first time
- Prerequisites: None (basic computer skills are enough)
- How you learn: Read the lesson README → run the example files → complete the assignment → check the answer
Learning Objectives
By the end of this course, you will be able to:
- Understand and write the basic structure of an HTML document
- Use core tags for text, links, and images correctly
- Build tables and forms (input forms)
- Design meaningful document structure using semantic HTML
- Create your own HTML files that work directly in the browser
Lesson List
| Lesson No. | Lesson Title | Key Tags / Concepts | Difficulty |
|---|---|---|---|
| Lesson 01 | HTML Basics | DOCTYPE, html, head, body, h1~h6, p, div, span, ul, ol, li | ⭐ |
| Lesson 02 | Text Elements | strong, em, blockquote, code, pre, br, hr, sup, sub | ⭐ |
| Lesson 03 | Links and Images | a, img, absolute path, relative path, figure, figcaption | ⭐⭐ |
| Lesson 04 | Tables | table, thead, tbody, tfoot, tr, th, td, colspan, rowspan | ⭐⭐ |
| Lesson 05 | Forms | form, input, select, textarea, button, label, fieldset | ⭐⭐⭐ |
| Lesson 06 | Semantic HTML | header, nav, main, section, article, aside, footer | ⭐⭐⭐ |
How Each Lesson Is Organized
lessonXX_topic-name/
├── README.md ← Concept explanation + code examples (start here)
├── examples/ ← Complete example files you can run right away
├── assignment/
│ └── assignment.md ← An assignment to try yourself (requirements + hints)
└── assignment-answer/ ← The assignment answer (try it yourself first, then check!)
Suggested Learning Order
Lesson 01 → Lesson 02 → Lesson 03 → Lesson 04 → Lesson 05 → Lesson 06
Because each lesson builds the foundation for the next, we recommend studying them in order.
Development Environment Setup
Required Tools
- Text editor: VS Code is recommended
- Web browser: One of Chrome, Firefox, or Edge
Recommended VS Code Extensions
- Live Server: The browser automatically refreshes every time you save an HTML file
- HTML CSS Support: Enhances HTML autocompletion
How to Open an HTML File
- Double-click an
.htmlfile in your file explorer to open it in the browser - If you opened it in VS Code, click the Go Live button of the
Live Serverextension
References
- MDN Web Docs - HTML : The most reliable HTML reference (Korean language supported)
- W3Schools HTML Tutorial : A great site for quick lookups with simple examples
- HTML Validator : A tool that checks whether the HTML you wrote is valid
If you have questions or something is unclear, ask anytime!
The best way to learn is to type the code yourself. Don't just read the examples — be sure to type them out!
HTML Basics
Document structure, meta tags, headings, paragraphs, lists and comments — the skeleton of every web page.
Text Elements
Emphasis, quotations, code and other inline elements that give written content meaning.
Links and Images
Anchor tags, image elements, alt text, and the difference between absolute and relative paths.
Tables
Rows, columns, headers, captions, colspan and rowspan for presenting structured data.
Forms
Inputs, selects, textareas and labels for collecting user input correctly.
Semantic HTML
header, nav, main, section, article, aside and footer for accessible, meaningful page structure.
CSS
7 lessonsMake pages look designed: selectors, the box model, Flexbox, Grid and responsive layout.
About this subject
Learn the core concepts of CSS (Cascading Style Sheets), which makes web pages beautiful, step by step.
Prerequisites
- HTML fundamentals (tags, attributes, document structure)
- How to use a text editor (VS Code recommended)
- Basics of browser developer tools
If you have not taken the HTML fundamentals lessons yet, please complete the lessons in the
../HTML/folder first.
Lesson List
| Lesson | Topic | Key Concepts |
|---|---|---|
| Lesson 01 | CSS Basics | Linking methods, selectors, specificity, inheritance |
| Lesson 02 | Color & Font | Color notation, Google Fonts, CSS variables |
| Lesson 03 | Box Model | content/padding/border/margin, box-sizing |
| Lesson 04 | Background & Borders | background, border-radius, box-shadow, transition |
| Lesson 05 | Flexbox | flex layout, justify-content, align-items |
| Lesson 06 | Grid | grid-template, fr units, grid-template-areas |
| Lesson 07 | Responsive Web | @media queries, mobile-first, breakpoints |
How to Study
- Read the
README.mdin each lesson folder to understand the concepts. - Open the files in the
examples/folder in a browser and check them yourself. - Modify the code and observe how the properties change.
- Read
assignments/assignment.mdand implement it yourself. - If you get stuck, refer to
assignments/solutions/.
Folder Structure
CSS/
├── README.md ← current file
├── lesson01_css_basics/
│ ├── README.md
│ ├── examples/ ← index.html + style.css
│ ├── assignments/ ← assignment.md
│ └── solutions/ ← index.html + style.css (with comments)
├── lesson02_color_font/
├── lesson03_box_model/
├── lesson04_background_borders/
├── lesson05_flexbox/
├── lesson06_grid/
└── lesson07_responsive/
References
- MDN CSS documentation (Korean)
- CSS-Tricks
- Google Fonts
- Can I Use — check browser compatibility
CSS Basics
How stylesheets connect to HTML, selectors, cascade and specificity.
Colors and Fonts
hex, rgb and named colors, Google Fonts, text styling and reusable CSS variables.
Box Model
margin, padding, border and box-sizing explained with visual examples.
Backgrounds and Borders
Background images, gradients, border-radius and box-shadow effects.
Flexbox
One-dimensional layout with justify-content, align-items, wrapping and gaps.
Grid
Two-dimensional layout with grid-template, fr units, spanning and named areas.
Responsive Design
Media queries, mobile-first thinking, and relative units that adapt to any screen.
JavaScript
8 lessonsAdd logic and interactivity: values, control flow, functions, data structures, the DOM and async code.
About this subject
Course Overview
This course systematically covers JavaScript, the core language of web development, from the basics through to practical application.
Starting with variables and types and continuing to asynchronous programming, it consists of 8 lessons in total.
Prerequisites
Please study the following before taking this course.
- HTML Basics: tag structure, semantic elements, form elements
- CSS Basics: selectors, box model, basic layout
- How to use a text editor (VS Code recommended)
- Basic use of browser developer tools (F12)
Lesson List
| Lesson | Title | Key Topics |
|---|---|---|
| Lesson 01 | Variables and Types | var/let/const, primitive types, typeof, type conversion, template literals |
| Lesson 02 | Control Statements | if/else, switch, for, while, break/continue |
| Lesson 03 | Functions | function declarations/expressions/arrow functions, scope, callbacks |
| Lesson 04 | Arrays | array methods, forEach/map/filter, spread operator |
| Lesson 05 | Objects | object literals, methods, this, destructuring, JSON |
| Lesson 06 | DOM Manipulation | querySelector, createElement, classList, dataset |
| Lesson 07 | Events | addEventListener, event object, bubbling, event delegation |
| Lesson 08 | Asynchronous | Promise, async/await, fetch API, error handling |
Study Method
- Read each lesson's
README.mdto understand the concepts. - Open
examples/index.htmldirectly in a browser and run it. - Open the developer tools (F12 → Console) to observe the behavior.
- Read
assignments/assignment.mdand try implementing it yourself. - If you get stuck, refer to
assignment-solutions/index.html.
Development Environment Setup
# Recommended: install VS Code and then install the extensions
- Live Server # Run HTML files on a local server
- Prettier # Automatic code formatting
- ESLint # Code error detection
References
- MDN Web Docs - JavaScript
- JavaScript.info
- Can I use — browser compatibility check
Variables and Types
let and const, primitive types, typeof and template literals.
Control Flow
if/else, switch, for and while to make decisions and repeat work.
Functions
Declarations, expressions, arrow functions, parameters and scope.
Arrays
map, filter, find and forEach — the methods used in everyday data work.
Objects
Object literals, properties, destructuring, spread syntax and JSON.
DOM Manipulation
querySelector, createElement and updating the page from JavaScript.
Events
addEventListener, the event object, form events and event delegation.
Asynchronous JavaScript
fetch, Promises and async/await for loading data from APIs.
The 5-stage series
64 lessons totalLearn this stage with a mentor
Work through these lessons on your own, or join a guided cohort at our Pitampura campus and online.