Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
W3.CSS Curriculum: 5 Chapters, 75 Lessons — pelatihan.org
Home
/
Catalog
/
W3.CSS
/
Curriculum
Curriculum
W3.CSS Curriculum
Learn W3.CSS online with 75 structured lessons, code examples, and 375 quiz questions.
75 lessons
5 chapters
375 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
W3.CSS
54 lessons
01
W3.CSS HOME
W3.CSS is a free, lightweight, mobile-first CSS framework that helps you build consistent page views without writing too much CSS from scratch. Almost all of the styles are…
02
W3.CSS Intro
This introductory page explains the philosophy: fast, light, and easy to learn because it relies solely on class in HTML. You'll learn how to install W3.CSS through a stylesheet…
03
W3.CSS Containers
Containers are the primary packaging that allows internal spacing so that text does not stick to the edges of the screen. It provides w3-containers for padded boxes, w3-content…
04
W3.CSS Panels
Panels are padded containers used to group content such as notes, summaries, or short messages. It provides a class w3 panel that provides direct padding, and the panel can be…
05
W3.CSS Borders
Border provides a boundary line around the element, and provides a class to add, direct, and color the line. In addition to the line, you also set the round angle with the class…
06
W3.CSS Cards
A card is a container card with shadows used to wrap images, text, and buttons in a single visual unit. It provides a class w3-card that immediately adds box-shadow, so that the…
07
W3.CSS Padding
Padding is the distance between the contents of the element and the tape, so that the content does not feel pressurized. It provides class w3-padding with various values such as…
08
W3.CSS Margins
The margin sets the distance outside the element so that the components do not stick together. W3.CSS provides w3-margin for the entire distance and w3-margin-top,…
09
W3.CSS Display
The display class controls whether an element appears as a block, inline, or even hidden at all. It provides w3-block, w3-inline, w3-inline-block, w3-show, w3-hide, as well as…
10
W3.CSS Buttons
The button in W3.CSS is created by adding a class w3-button to an element such as <a> or <button>, and then given a color such as w3-blue or w3-red. The size, shape, and effect…
11
W3.CSS Responsive
The responsive page explains how W3.CSS adjust the layout to the screen size using several breakpoints: s for small screens, m for medium, and l for large. You use the breakpoint…
12
W3.CSS Flexbox
Flexbox is a CSS layout model for arranging items in one direction, both rows and columns, with automatic space sharing. With W3.CSS you activate it via the w3-flex class on the…
13
W3.CSS Flex Helpers
A flex helper is a small set of settings that perfect the flexbox, such as item alignment, space division, and line packing. With the helper you don't have to write CSS…
14
W3.CSS Grid
CSS Grid is a two-dimensional layout system that organizes content in rows and columns at once. You define how many columns are through grid-template-columns, and then each child…
15
W3.CSS Grid Helpers
Grid helper makes it easy to place items in a specific position without manually counting rows and columns. You can use area names with grid-template-area, stretch a few columns…
16
W3.CSS Rows
A line is a horizontal container that holds several columns to align in a single line. On the W3.CSS you use w3-row, then you put the w3-col element in it. There's also…
17
W3.CSS Cells
Cells are a table-based alternative layout that is suitable for comparing adjacent content with the same automatic height. W3.CSS provides w3-cell-row as a row and w3-cell as a…
18
W3.CSS 12-Columns
The 12-column system divides the width of the row into twelve equal-sized sections so that any combination of layouts is easy to arrange. In W3.CSS you write w3-col with a…
19
W3.CSS Page Content
This section discusses how to arrange the content of a page for easy reading: containers with limited width, responsive images, and a neat hierarchy of headings and paragraphs.…
20
W3.CSS Colors
It provides a ready-to-use color class for background, text, and hover states, so you don't have to memorize hex codes. For example w3-red for background, w3-text-red for text,…
21
W3.CSS Defaults
Each page containing W3.CSS automatically acquires an inbuilt style: the font size, distance, text color, and behavior of the basic elements are already set in such a way that…
22
W3.CSS Fonts
Font settings determine the ease of reading greater than any decor. W3.CSS uses a built-in sans-serif font family, and you're free to replace it with CSS or load web fonts from…
23
W3.CSS Text
The text modules discuss the layout, decoration, transformation, and spacing that make the writing blocks more neat. You can set everything up through CSS properties like text…
24
W3.CSS Dark Mode
Dark mode replaces light color schemes with darker colors that are more comfortable for the eyes, especially in minimally illuminated rooms. You can follow the system preferences…
25
W3.CSS Variables
CSS variables or custom property allows you to store values like color and distance in a name that can be used repeatedly. The value is defined by a mark -- and then called using…
26
W3.CSS RTL
RTL is an abbreviation of right-to-left, the reading direction used in Arabic, Hebrew, and Farsi. By changing the dir attribute to rtl, the direction-dependent elements such as…
27
W3.CSS Notes
Notes are short blocks of information that are highlighted so that the reader does not miss them, such as tips, prerequisites, or important reminders. Structurally the notes can…
28
W3.CSS Quotes
Quotation elements such as blockquote and q are used to display the words of others or quotes from sources appropriately. To stand out, quotations are usually given a line on the…
29
W3.CSS Alerts
A warning is a short message that informs the user of a situation, such as a stored data, invalid form, or a disconnected connection. It provides a class w3-alert and its color…
30
W3.CSS Tables
Tables are used for linear data such as user lists, price reports, or schedules. W3.CSS provides a class w3-table as the basis and a w3-table-all that directly gives a line to…
31
W3.CSS Lists
A list is used to gather points, steps, or sets of items that do not form a paragraph. HTML provides ul for a non-ordered list and ol for a sequential list, both containing…
32
W3.CSS Bars
The bar is used for two things: displaying progress such as file downloads, and organizing a row of items in a row using the w3-bar. A simple progress bar is made of a flat…
33
W3.CSS Dropdowns
Dropdown is a hidden menu that appears when a user directs a cursor or presses a button. It provides w3-dropdown as a wrapper, w3-dropdown-content for menu content, as well as…
34
W3.CSS Accordions
Accordion is a set of panels that can be opened and closed so that only the required content appears. The plot is simple: the title is a button that changes the hidden state on…
35
W3.CSS Navigation
Good navigation allows visitors to find their destination in seconds. W3.CSS generally compiles menus using the nav element containing the w3-bar with the item in the form of a…
36
W3.CSS Code Reuse
Reuse or reuse means writing a piece once and then using it multiple times, whether it's a CSS class, a theme variable, or a markup piece. This principle reduces duplication so…
37
W3.CSS Sidebar
A sidebar is a panel on the side of a page that usually stores navigation, filters, or concise information. It provides a class w3-sidebar that can be combined with a…
38
W3.CSS Tabs
Tabs display multiple panels in the same space, alternating on the user-pressed title. The title bar is generally made of a w3-bar containing the key items, while the active…
39
W3.CSS Images
It provides a simple utility class for images to appear neat and responsive across screen sizes. Its main class, .w3-image, makes the image fill the width of the container so…
40
W3.CSS Inputs
W3.CSS provides a class to embellish form elements such as text input, textarea, select, and buttons. Simply add .w3-input to <input> or <textarea> to make it consistent with…
41
W3.CSS Round
The Round page discusses how to round the angle of the element to make it look softer and more modern. W3.CSS provides a class .w3-round with a larger radius variant, as well as…
42
W3.CSS Badges
A badge is a small label that displays a number or a concise status, such as the number of messages notified. W3.CSS provides a class of .w3-badge attached to <span> within a…
43
W3.CSS Tags
Tags are small labels for keywords or content categories, such as article topics. Unlike badges that focus on numbers, .w3-tag is more often inserted in paragraphs or lists.…
44
W3.CSS Animations
W3.CSS provides ready-to-use animation classes such as .w3-animate-top, .w3-animate-left, and .w3-animate-zoom. Animation runs when an element is displayed, for example when a…
45
W3.CSS Effects
Page Effects collects a variety of visual effects that can be added without changing the HTML structure, such as hovered oscillations and card shadows. Most of the effects use…
46
W3.CSS Pagination
Pagination breaks down long lists into several pages so that users can easily search for content. In W3.CSS this pattern is built from .w3-bar as a wrap and .w3-bar-item…
47
W3.CSS Progress Bars
The progress bar shows completion of a task such as uploading or scoring. The pattern is simple: a container is lightly laid, and the colored content bar is set to a style width.…
48
W3.CSS Slideshow
Slideshow displays a set of images or text alternately in a single frame. The key is .w3-display-container as an absolute position container, and then each slide is stored as an…
49
W3.CSS Modal
The capital is a dialog window that floats above the page and demands the attention of the user. The structure is composed of .w3-modal as the outer layer and .w3-modal-content…
50
W3.CSS Tooltips
A tooltip is a small description box that appears when a user applies a cursor to an element. W3.CSS implements it with the .w3-tooltip class on the packaging, whereas its…
51
W3.CSS Code
The Code page discusses how to display snippets of program code on a web page for easy reading. W3.CSS provides a class .w3-code to embellish the block code, combined with the…
52
W3.CSS Filters
CSS filters change the visual appearance of an image or element, such as removing color or adding blur. The property filter accepts functions such as grayscale(), blur(),…
53
W3.CSS Material
The material style mimics physical sheets stacked with shadows as an indicator of altitude. It supports it through a card class such as P1 with a shadow hover effect. Combine…
54
W3.CSS Case
The Case page discusses the arrangement of capital and capital letters in the text. CSS provides text-transform properties with uppercase, lowercase, and capitalize values to…
02
W3.CSS Colors
6 lessons
01
W3.CSS Color Classes
W3.CSS presents ready-to-use color classes such as .w3-red, .w3-blue, and .w3-green for the background element. With different prefixes you can set the color text, the background…
02
W3.CSS Color Fashion
Color determines the impression of a fashion site, from elegant to casual. Neutral palette such as black, white, gray, and nude are often used as the basis, then one accent color…
03
W3.CSS Color Libraries
A color library is a set of ready-to-use palettes that can be used directly or inspired. The library itself provides a set of color classes, while the external library offers…
04
W3.CSS Color Schemes
A color scheme is a combination of colors used together to make a page feel whole. Light and dark schemes have different comfort considerations, while the 60-30-10 rule helps…
05
W3.CSS Color Themes
The theme is a unified color system that can be applied simultaneously to many components, including light and dark variants. The most practical approach is to declare colors as…
06
W3.CSS Color Generator
Color generators help create palette in seconds based on rules of harmony such as complementary and analogue. The result is ready-to-use hex, RGB, or HSL code that can be…
03
Web Building
9 lessons
01
Web Intro
The web browser explains how the page ends up on the user's screen. The browser sends HTTP requests to the server, the server responds with HTML, CSS, and JavaScript, and the…
02
Web HTML
HTML is a markup language that composes the structure of a web page. An element consists of an opening tag, a content tag, and a closing tag, complete with attributes such as…
03
Web CSS
CSS sets the page's appearance from colors, letters, distances, to layout. CSS code is written with a pair of selectors and a declaration block containing the property and its…
04
Web JavaScript
JavaScript makes the page interactive: it responds to clicks, validates content, and updates the view without reloading. You work with variables, functions, and DOMs selected…
05
Web Layout
The web layout arranges content in orderly order across different screen sizes. W3.CSS uses the row and column pattern: .w3-row as row and .w3-col with a responsive width class…
06
Web Band
The Band Project combines basic lessons into a complete band site. This page uses a big picture as the opening, horizontal navigation, then the about section, tour schedule, and…
07
Web Catering
Catering Project teaches you to create catering service pages that convince customers. It contains a list of packages and prices, a food gallery, testimonials, and a booking…
08
Web Restaurant
The Restaurant Project builds a restaurant yard or pizza place that excites the taste. The focus is on the grouped menus, location and opening hours information, and the…
09
Web Architect
The Architect Project is an architectural firm portfolio that relies on strong visuals and clean typography. This page compiles project galleries, design philosophies, and case…
04
W3.CSS Examples
6 lessons
01
W3.CSS Kitchen Sink
Kitchen Sink is a demo page that features almost all of the class in one place. The term comes from the phrase everything but the kitchen sink, meaning everything goes with it.…
02
W3.CSS Examples
Examples page contains a collection of small example code that demonstrates one feature directly. The most effective way to learn is to run an example, change it a little bit,…
03
W3.CSS Demos
The Demos page provides W3.CSS components that can be directly tried interactively. You can see the visual results of a class, open the Developer Tools, and then modify the…
04
W3.CSS Templates
Templates are complete page frames such as portfolios, agencies, or customized restaurants. Templates accelerate the start of a project because the structure of the header,…
05
W3.CSS Fonts
W3.CSS uses Google Fonts to make the page consistently and attractively lettered. So, add a Google Fonts stylesheet link in <head>, and then specify the font families in CSS and…
06
W3.CSS Icons
The icon adds visual cues that speed up the understanding of the interface. It generally uses the Awesome Font which is loaded via a CDN, and then the icon is called with a class…