Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
Intro to HTML & CSS Curriculum: 7 Chapters, 38 Lessons — pelatihan.org
Home
/
Catalog
/
Intro to HTML & CSS
/
Curriculum
Curriculum
Intro to HTML & CSS Curriculum
Learn Intro to HTML & CSS online with 38 structured lessons, code examples, and 190 quiz questions.
38 lessons
7 chapters
190 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
HTML & CSS Tutorial
5 lessons
01
HOME
The HOME section of the HTML & CSS tutorial is the starting point of the learning path that introduces the basic structure of a web page and how to give it a look. From here…
02
Introduction
The introduction of HTML & CSS explains that the web is built of two layers: HTML as the structure and meaning of content, and CSS as the display layer. This separation makes the…
03
Environment Setup
This material discusses the preparation of work environments for learning HTML & CSS: text editors, web browsers, and development aids. The good news is, the main thing is that…
04
First Web Page
Here you're putting together the first web page: a file containing a doctype, HTML elements with head and body sections, and simple text elements. The results can be viewed…
05
Workflow & Tools
This course discusses the workflow of web development: writing code, saving, viewing results in a browser, repairing, and then repeating. You're also introduced to supporting…
02
HTML & CSS Foundations
8 lessons
01
Essentials
This core section summarizes the basic concepts of HTML: the elements, attributes, and specific characters that need to be escaped. You'll understand that each tag has a meaning,…
02
Document Structure
This lesson is about the HTML document framework: the head section that contains metadata and the body section that contains visible content. You're also introduced to semantic…
03
Text Content
This article discusses the elements of text content composition: headings, paragraphs, emphasis, quotes, and block codes. Each element carries its own meaning, not just a look.…
04
Lists & Tables
This material discusses two common data structures: lists (ordered and unordered) and tables. A list is suitable for a collection of items, whereas a table for data is row and…
05
Links & Navigation
Links are the heart of the web. This lesson discusses the anchor element, the href attribute, the absolute versus relative link, as well as the nav element for navigation. You…
06
Images & Media
This topic deals with image and media insertion: img elements with alt attributes, picture elements for adaptive images, as well as video and audio. You also learn the importance…
07
Forms & Validation
A form connects the user to the application. This material covers form, input, label, various types of input, as well as browser-based validation such as required, pattern, and…
08
Reusable Components
This lesson introduces the concept of reusable components: buttons, cards, navigation, and other parts of the page are created once and then used repeatedly. This approach…
03
HTML & CSS Styling Core
6 lessons
01
Styling Essentials
This material discusses the basics of CSS writing: three styles of installation (inline, internal, external) with each advantages, as well as the basic syntax of selectors,…
02
Selectors & Specificity
The selector determines which elements receive the style, whereas the specificity determines which rules win when in conflict. This lesson includes element selectors, classes,…
03
Cascade & Inheritance
Cascade is a CSS way of resolving conflict between rules based on order, source, specificity, and !important. Meanwhile, inheritance makes some property (such as color) inherited…
04
Typography
This topic discusses the arrangement of letters in CSS: size, thickness, distance, and font family. You also learn to pick the right units like brakes and px to make typography…
05
Colors & Backgrounds
This material discusses how to define colors and backgrounds in CSS: hex notation, rgb/rgba, hsl, as well as background properties for colors, images, and gradations. You also…
06
Box Model
Each HTML element is a box of content, padding, border, and margin. This lesson explains the order of the layers and the box-sizing properties that change the way width is…
04
HTML & CSS Layout
7 lessons
01
Layout Fundamentals
This topic discusses normal flow and display as the foundation of layout: how elements flow from top to bottom, the differences in blocks and inlines, and the collapse margin.…
02
Positioning & Z-Index
This lesson discusses the control of the position of the elements: static, relative, absolute, fixed, and sticky, as well as offset properties such as top and left. You also…
03
Flexbox
Flexbox is a one-dimensional layout model that facilitates the spread, alignment, and alignment of spacing between items in a single row or column. You'll study container…
04
CSS Grid
CSS Grid is a two-dimensional layout model that arranges rows and columns simultaneously. You'll study grid-template-columns, units of fr, gaps, and placement of items into a…
05
Layout Patterns
After understanding the flex and grid, the material summarizes the general layout patterns: the holy grail layout, the cards, the sidebar, and the simple responsive layout. You…
06
Responsive Design
Responsive design makes pages look good on mobile phones, tablets, and desktops. This material discusses meta viewports, media queries, and the mobile-first approach. With this…
07
Responsive Components
Once the responsive principle is understood, the material applies it to the actual components: the navigation bar, the card, the table, and the page container. You learn to pick…
05
HTML & CSS Enhancements
6 lessons
01
Custom Properties
Custom properties (CSS variables) allow you to define a value once and then use it multiple times through the var() function. Its main advantage: changing one declaration updates…
02
Calc & Functions
This lesson discusses modern CSS functions such as calc(), min(), max(), and clamp() that calculate values in declarations. With this function, you can mix different units and…
03
Transitions
Transitions make changes in CSS values smoothly occur at a given time, for example during status hover or class addition. You study the transition properties along with duration,…
04
Transforms
Transforms shift, rotate, magnify, and tilt elements visually without changing the original layout. This material discusses the functions of translate, rotate, scale, skew, and…
05
Animations
CSS animation allows for gradual changes through the @keyframes block that run repeatedly according to configuration. Unlike transitions, animations can run automatically without…
06
Effects & Filters
This topic discusses additional visual effects: filters on the elements, backdrop-filters for opaque glass effects, opacity for transparency, as well as box-shadow for shadows.…
06
HTML & CSS Quality
5 lessons
01
Accessibility
Accessibility ensures that the page is accessible to everyone, including screen reader users and keyboard users. This material covers alt text, heading structure, color contrast,…
02
Design Systems
Design systems are a collection of components, patterns, and guidelines that make the interface consistent across the product. This lesson discusses design tokens (color,…
03
Performance
Page speed affects user experience and search rankings. This material discusses how to optimize CSS, images, and content loading. With practices like compression, lazy loading,…
04
Debugging & Testing
Debugging is a must-have skill: find the cause of the wrong look and then fix it. This material discusses the use of Developer Tools, common causes of CSS style not being…
05
Tooling & Automation
Modern development aids speed up and improve code quality: preprocessors such as Sass, linters such as Stylelint, bundlers such as Vite, as well as autoprefixers. This material…
07
HTML & CSS Practice & Exams
1 lessons
01
Landing Page Project
The closing project summarizes the whole material: building landing pages from planning, HTML structure, styling, to responsive and performance checking. You learn to organize…