Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
How To Curriculum: 13 Chapters, 328 Lessons — pelatihan.org
Home
/
Catalog
/
How To
/
Curriculum
Curriculum
How To Curriculum
Learn How To online with 328 structured lessons, code examples, and 1640 quiz questions.
328 lessons
13 chapters
1640 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
HOW TO
1 lessons
01
HowTo Home
This introductory lesson introduces a practical 'How To' guide to front-end web development. This module provides ready-to-use snippets to design common interface components such…
02
Menus
55 lessons
01
Icon Bar
This lesson reviews how to create an icon bar using HTML and CSS. The Bar Icon presents a concise list of horizontal or vertical navigation icons, often used as a shortcut menu…
02
Menu Icon
This lesson reviews the creation of a hamburger menu icon with pure animation with CSS. This component is the default de-facto button trigger for navigation menus on mobile…
03
Accordion
This lesson reviews the creation of the Accordion components (open-close folding panels) using HTML, CSS, and JavaScript. Accordion is very effective at saving screen space on…
04
Tabs
This lesson reviews the interactive creation of Tabbed Content navigation using HTML, CSS, and JavaScript. Tab navigation allows developers to group multiple pieces of content…
05
Vertical Tabs
This lesson reviews the design of Vertical Tabs. Unlike conventional tabs that line horizontally above, vertical tabs place the menu bar on the left and the content panel on the…
06
Tab Headers
This lesson reviews variations of Tab Headers where the background colors of the tab navigation bar and content panel are thematically synchronized. Each tab can display a…
07
Full Page Tabs
This lesson reviews the creation of a full-page tab. This component transforms the entire screen view into a single canvas of full content when the tab button is selected, ideal…
08
Hover Tabs
This lesson reviews the creation of Hover Tabs where the tab content automatically changes by simply moving the mouse cursor (hover/mouseover) to the tab button without requiring…
09
Top Navigation
This lesson reviews the creation of the standard Top Navigation Bar using HTML and CSS. Topnav is one of the most essential components of a website that hosts links to main pages…
10
Responsive Topnav
This lesson reviews the making of the Responsive Topnav. On the desktop screen, the menu appears in a horizontal plane. When the screen narrows down, the menu folds into a single…
11
Split Navigation
This lesson reviews the creation of a Split Navigation Bar. In this layout, the main menu links are positioned on the left while the user action links such as the Login,…
12
Navbar with Icons
This lesson reviews the addition of visual icons to the text on the Navbar with Icons. Combining graphical icons with text labels speeds up menu identification by users and…
13
Search Menu
This lesson reviews the creation of a Navigation Menu with a Search Menu Filter using JavaScript. This feature allows users to type keywords in the search input box and the list…
14
Search Bar
This lesson reviews the creation of a responsive Search Bar that is placed inside the navigation bar using pure HTML and CSS. This design combines search text input and submit…
15
Fixed Sidebar
This lesson reviews the making of Fixed Sidebar. This sidebar component is permanently attached to the left side of the screen at a 100% viewpoint height so that it remains…
16
Side Navigation
This lesson reviews the creation of an Interactive Side Navigation (Sidenav) that can be opened and closed using JavaScript sliding animation. When the menu button is clicked,…
17
Responsive Sidebar
This lesson reviews the making of a Responsive Sidebar. This component appears as a vertical fixed side bar on a wide desktop screen, and automatically switches to a stacked…
18
Fullscreen Navigation
This lesson reviews the creation of Fullscreen Overlay Navigation. When the menu button is activated, a transparent or solid menu curtain layer stretches 100% to cover the entire…
19
Off-Canvas Menu
This lesson reviews the creation of the Off-Canvas Menu (Off-Canvas Sidebar Push Content). Unlike a regular overlay that just overlaps the content, an off-canvas menu elegantly…
20
Hover Sidenav Buttons
This lesson reviews the making of the Floating Side Buttons (Hover Sidenav Buttons). The set of navigation buttons is partially hidden beyond the boundary of the left edge of the…
21
Sidebar with Icons
This lesson reviews the making of sidebars with icons. The design features a slender vertical navigation bar where each menu item is represented by a symbolic icon on the left…
22
Horizontal Scroll Menu
This lesson reviews the creation of the Horizontal Scroll Menu. This component is very popular in mobile apps and news sites where navigation category lists can be moved sideways…
23
Vertical Menu
This lesson reviews the creation of Vertical Menus using pure HTML and CSS. This component assembles a row of navigation buttons stacked from top to bottom in an elegant box…
24
Bottom Navigation
This lesson reviews the making of the Bottom Navigation Bar. This component is permanently locked at the bottom of the screen using CSS position: fixed, making it the most…
25
Responsive Bottom Nav
This lesson reviews the making of the Responsive Bottom Navigation. This component displays a menu bar at the bottom of the screen when opened on a mobile device with the option…
26
Bottom Border Nav Links
This lesson reviews the effect of the bottom boundary on navigation links. This minimalist and modern design does not use the full background block color when hovered, but…
27
Right Aligned Menu Links
This lesson reviews the technique of setting the Right Average Links on the Upper Navigation Bar (Right Aligned Menu Links). Placing a specific link such as the Login/Register…
28
Centered Menu Link
This lesson reviews the creation of a Navigation Menu with a Centered Menu Link (Centered Menu Link / Centered Navbar). This pattern is often used to place the brand logo or main…
29
Equal Width Menu Links
This lesson reviews the creation of a Navigation Bar with Perfect Average Menu Links. The entire menu button divides the total width of the navigation bar evenly and…
30
Fixed Menu
This lesson reviews the making of the Fixed Menu / Fixed Top Navbar. The navigation bar is locked at the top coordinates of the screen so that it does not shift as the user…
31
Slide Down Bar on Scroll
This lesson reviews the making of Slide Down Bar on Scroll. This component is hidden by default when the user is at the top of the page, and it slides smoothly down from the top…
32
Hide Navbar on Scroll
This lesson reviews the making of the Hidden Navigation Bar on Scroll. This smart pattern maximizes the viewing area of the content when reading: the automatic navigation bar is…
33
Shrink Navbar on Scroll
This lesson reviews the creation of the Shrink Navbar on Scroll. When at the top of the page, the navbar appears wide with a large logo and a wide padding. As users begin to…
34
Sticky Navbar
This lesson reviews the creation of Sticky Navbars using JavaScript and CSS. The navbar was originally under the hero header banner, and then as the user scrolled the page until…
35
Navbar on Image
This lesson reviews the creation of a Transparent Navigation Bar on the Background Image (Navbar on Image / Hero Navbar). This stunning visual design pattern places a navigation…
36
Hover Dropdowns
This lesson reviews the creation of a Hover Dropdown Menu using pure HTML and CSS without the need for JavaScript. This menu automatically pops up a list box of options when the…
37
Click Dropdowns
This lesson reviews the creation of a Click Dropdown Menu using JavaScript. Unlike the mouse-sensitive hover menu, a new dropdown click will open when the button is pressed and…
38
Cascading Dropdown
This lesson reviews the creation of the Cascading Dropdown (Depending Dropdown) Menu. The option on the second dropdown (e.g. City) changes dynamically based on the value the…
39
Dropdown in Topnav
This lesson reviews the integration of the Dropdown menu in Topnav. This component combines horizontal standard links with a neatly layered sub-category menu under one integrated…
40
Dropdown in Sidenav
This lesson reviews the creation of the Dropdown in Sidenav Menu. This component allows nested menus to be grouped inside the sidebar, where clicking on the menu title will…
41
Resp Navbar Dropdown
This lesson reviews the creation of a Responsive Navigation Bar Full with a Dropdown Menu. It combines a desktop drop-down menu system with a fully folded burger menu when opened…
42
Subnavigation Menu
This lesson reviews the making of the Sub-Navigation Menu. This pattern presents secondary navigation bars that slide or appear just below the main navigation bar to accommodate…
43
Dropup
This lesson reviews the creation of the Drop-Up Menu. In contrast to conventional dropdowns that open down options, the drop-down menu opens an upward-directed list box of…
44
Mega Menu
This lesson reviews the creation of the Mega Menu. Mega menus are a tiered dropdown navigation panel that stretches across a full page with several category columns, promotional…
45
Mobile Menu
This lesson reviews the creation of a complete Mobile Navigation Menu. This pattern focuses on a purely smartphone navigation experience with an iconic burger menu button that…
46
Curtain Menu
This lesson reviews the creation of the Curtain Menu (Expanding Curtain Navigation). This menu opens a full-screen navigation layer with dramatic animation as if opening a stage…
47
Collapsed Sidebar
A sidebar that can be scratched is a navigation panel on the side of a page that can be hidden when not in use. This pattern keeps the content area wide, especially on small…
48
Collapsed Sidepanel
A side panel is a panel that slides from the side of the screen and covers some of the content, rather than shifting the page layout. Panels like this are great for extra menus,…
49
Pagination
Pagination divides the long list into several numbered pages to make the content easier to read and the pages less overweight. These components usually contain the previous…
50
Breadcrumbs
Breadcrumbs are navigational tracks that show the user's position in a site's hierarchy, for example Home > Products > Shoes. This component helps visitors return to their…
51
Button Group
The button group combines several related buttons into one smooth horizontal row. By removing the double distance and setting the angle only at the end of the group, the button…
52
Vertical Button Group
Vertical button groups stack related buttons from top to bottom, suitable for toolbars or narrow action menus. Each button usually fills the container width to make it look…
53
Sticky Social Bar
A sticky social bar is a row of social media icons that remain visible on the side of the screen as users scroll through a page. Because the position is fixed, the bar doesn't…
54
Pill Navigation
Pill navigation displays the menu link as a circular capsule that is in line with each other. This shape gives a modern impression and makes categories easy to scan. The active…
55
Responsive Header
A responsive header is the top of a page that adjusts the layout of logos, menus, and action buttons to the width of the screen. On the desktop, the elements are usually…
03
Images
41 lessons
01
Slideshow
The slideshow displays a single slide of several options and allows the user to move with the previous or next button. JavaScript keeps the slide index active, and then swaps the…
02
Slideshow Gallery
The slideshow gallery combines a large main image with a row of thumbnails below. When the thumbnail is clicked, the main image changes and the thumbnail is marked active. This…
03
Modal Images
The image capital magnifies the image above the dark layer when the thumbnail is clicked, without moving the page. Users can close the large view by clicking the cross button or…
04
Lightbox
A lightbox is an overlay display for viewing images or media in large sizes, often with buttons prev, next, and caption. Unlike regular capital, lightboxes are usually the focus…
05
Responsive Image Grid
The responsive image grid arranges many images in columns that adjust the screen width. CSS Grids with repeat(auto-fit, minmax(...)) can add or subtract columns automatically…
06
Image Grid
The image grid arranges several images in a row and column so that the gallery looks neat. The CSS Grid makes it easy to determine the number of columns, distance, and image…
07
Image Gallery
Image gallery displays a collection of photos in a responsive layout complete with caption. The gradient overlay at the bottom keeps the text readable without covering the entire…
08
Scrollable Image Gallery
Scrollable image gallery displays images in a single horizontal row that can be moved. overflow-x: auto only appears when the content exceeds the width of the container. Scroll…
09
Tab Gallery
The gallery tab divides the images into several categories that can be selected through the tab button. When the tab is clicked, the appropriate panel is displayed and the other…
10
Image Overlay Fade
Image overlay fade displays a layer of text above the image that appears slowly as the cursor is directed. The overlay is placed absolutely inside the image container, and then…
11
Image Overlay Slide
The image overlay slide pops up a text panel by sliding it from under the image. The panel starts outside the visible area using the transform, then moves to its original…
12
Image Overlay Zoom
Image overlay zoom combines image magnification with the emergence of information layers while hover. The image is magnified using a transform scale, while the overlay appears…
13
Image Overlay Title
Image overlay title adds a title bar at the bottom of the image so that the context of the photo is immediately visible. The headline is usually placed above a dark gradient to…
14
Image Overlay Icon
Image overlay icons display icons such as magnifying glass or links in the middle of the image while hovered. The icon is positioned absolutely and centered with a combination of…
15
Image Effects
Image effects leverage the CSS filter property to change the image's appearance without editing the original file. Effects such as grayscale, sepia, brightness, contrast, and…
16
Black and White Image
Black and white images are created with grayscale filters, so the photos appear colorless. This effect is often used to give a classical impression or highlight compositions. The…
17
Image Text
Image text places text directly above the image, usually as a title or call to action. The text is positioned absolutely in the center of the image container and given a dark…
18
Image Text Blocks
Image text blocks place a solid or semi-transparent text box over some of the images. This box provides clear reading space without having to cover the entire picture. The size,…
19
Transparent Image Text
Image text uses a text box with a semi-transparent background above the photo, often with a blurred glass effect. The alpha on the background color determines how big the image…
20
Full Page Image
Full page image makes an image a backdrop that meets the entire screen height. The image is set to a background-size: cover and a background-position: center to stay…
21
Form on Image
Form on image places the form above the background image, usually in the middle of the screen. The form panel is given a bright background to keep the input clear, while the…
22
Hero Image
A hero image is a large banner at the top of a page that contains the main message, a brief description, and an action button. The background image is usually combined with an…
23
Blur Background Image
Blur background image blurs the background image to make the text on top of it stand out. The blur effect should be applied to separate layers, rather than to text containers, so…
24
Change Bg on Scroll
Change background on scroll causes a header or element to change color as a page rolls past a certain boundary. JavaScript reads the scroll position, then adds or removes the CSS…
25
Side-by-Side Images
Side-by-side images display two images side by side for comparison or visual pairing. Flexbox with flex: 1 divides space evenly, while gaps keep distance. On a narrow screen,…
26
Rounded Images
Rounded images are created with border-radius to soften angles or form a circle. Rounded corners use pixel or percentage values, whereas the perfect circle requires the same…
27
Avatar Images
An avatar image is a small-sized profile picture that is usually shown in a circular shape. The width and height are made equal, and then the border radii are 50% rounded.
28
Responsive Images
Responsive image adjustment to the width of the container so that it does not overlap on a small screen. The basic max-width rule: 100% and height: auto already makes the image…
29
Center Images
Center images discuss several ways of centering images, both horizontally and vertically. For a block image, the left-right margin is a simple classical method. Flexboxes or…
30
Thumbnails
A thumbnail is a small version of an image that serves as a preview and can usually be clicked to open the larger version. The thin frame and padding make the thumbnail look neat…
31
Border Around Image
Border around image provides a frame around the image to reinforce the visual boundary. Border can be blended with padding and background so that it looks like a frame. Box…
32
Meet the Team
Meet the team is a page section that introduces team members through a card containing photos, names, roles, and contact links. The responsive grid layout makes the cards neatly…
33
Sticky Image
Sticky image keeps the image visible on the screen when the text next to it is flipped. This pattern is suitable for product pages or articles with supporting images.
34
Flip an Image
Flip an image inverted horizontally or vertically using CSS transformation. scaleX(-1) produced a left-right mirror, while scaleY(-1) flipped up-down. This effect is useful for…
35
Shake an Image
A shake image is a vibrational animation that focuses on a particular image or button. Animations are created with @keyframes that shift elements to the left and right…
36
Portfolio Gallery
The gallery's portfolio displays works in a neat card grid, complete with titles and categories. Each card is usually a link to the project details and has an overlay when…
37
Portfolio with Filtering
Portfolio with filtering adds a category button to display only specific projects. Each button stores a filter on the data-filter attribute, while each project stores its own…
38
Image Zoom
Image zoom allows users to view the details of an image by magnifying it while hovering or clicking. The basic effect is to use a transform scale inside a hidden overflow…
39
Image Magnifier Glass
Image magnifier glass is the effect of magnifying glass that magnifies the portion of the image when the cursor is moved over it. This effect is created by stacking a lens over…
40
Image Comparison Slider
The image comparison slider allows users to compare two images by swiping an adjuster to the left and right. One image is displayed full as the base, while the second image is…
41
Favicon
Favicon is a small icon that represents a site and appears in the browser tabs, bookmarks, and history tabs. This icon is inserted into the head element via the link tag with the…
04
Buttons
19 lessons
01
Alert Buttons
A warning button is a button with a flashy background color that is used to draw attention to an important action, such as deleting data or giving a warning. Color alone is not…
02
Outline Buttons
The outline button is a button with a transparent background and colored edge lines. This style is suitable for secondary action because it looks lighter than a full-featured…
03
Split Buttons
The split button combines one main action with an arrow menu that contains additional actions. The left side immediately executes the main command, while the right side opens a…
04
Animated Buttons
The animated button provides visual feedback when the user directs the cursor or presses a button. Animation can be a change in color, an arrow appearing, or a subtle stress…
05
Fading Buttons
A fading button is a button whose transparency level changes as the cursor approaches or moves away. These effects are created with the properties of opacity and transition, so…
06
Button on Image
An image button is a button placed on top of an image, usually in the middle or at the corner. So, the image and the button are wrapped in a relative positioned container, and…
07
Social Media Buttons
A social media button is a button-style link that leads to a profile or a sharing page on a social platform. The buttons typically combine icons, short text, and the platform's…
08
Read More Read Less
Read more read less is a pattern to hide some of the long text and display it when the user presses a button. Once opened, the button changes to read less to fold the content…
09
Loading Buttons
The loading button displays a process indicator, usually a spinner, while the action is running. The button is also temporarily disabled so that users do not send the same…
10
Download Buttons
A download button is a link that is given the button-style to download a file. The download attribute on the anchor asks the browser to save the file instead of opening it in the…
11
Pill Buttons
A pill button is a button with a completely rounded tip that resembles a capsule. This effect is achieved with very large border-radius, for example 999px. The pill button is…
12
Notification Button
A notification button is a button that comes with a small badge containing the number of notifications. The badge is placed stacked at the corner of the button using position:…
13
Icon Buttons
An icon button is a button that only displays an icon without any text visible. Since the meaning is not always clear, buttons like this must have a name accessible via the…
14
Next/prev Buttons
The Next/prev button is a pair of links to move to a previous or next page. They are usually placed on the left and right with the Flexbox to make it easy to find. The direction…
15
More Button in Nav
The More button inside the navigation hides additional links behind the More button so that the navigation bar remains compact. When you click the button, a dropdown menu appears…
16
Block Buttons
A block button is a button that fills the entire width of its container and stands alone in one row. This style is made with a display: block and width: 100%. Block buttons are…
17
Text Buttons
A text button is a button that appears like regular text without a background or border. This style is created by removing the background and the border, then adding color and…
18
Round Buttons
A round button is a circular button, usually containing an icon or very short text. This shape is made with a border-radius: 50% and the same width and height. Round buttons are…
19
Scroll To Top Button
Scroll to top button is a button that appears after a user scrolls far enough and brings them back to the top of the page. The key is usually fixed in the lower right corner.…
05
Forms
34 lessons
01
Login Form
A login form is a form for entering a username and password. The form is usually displayed in a centralized card with a clear label and a submit button. Login data should be sent…
02
Signup Form
A signup form is a registration form that collects data such as name, email, and password. The layout of two columns can shorten the form, but on a small screen the columns must…
03
Checkout Form
A checkout form is a form containing a billing address, delivery address, and payment method. Forms like this are usually divided into several sections with a fieldset to avoid…
04
Contact Form
Contact forms are forms to send a message to the owner of the site. Forms usually contain names, email addresses, subjects, and larger message areas. In order for the message to…
05
Social Login Form
Social login forms allow users to log in through accounts on other platforms such as Google or GitHub. The stream uses the OAuth protocol: the site directs the user to the…
06
Register Form
Register forms are account creation forms with username, email, and password. To maintain the quality of the data, the username column can use a certain character pattern and the…
07
Form with Icons
Form with icons adds icons to the input to give visual clues about the type of data requested. The icon is positioned absolutely within the relative wrapper, while the input is…
08
Newsletter
A newsletter form is a short form for registering an email address to a newsletter or newsletter. It usually consists of only one email input and one subscription button arranged…
09
Stacked Form
A stacked form is a form that places a label on top of each input and arranges all fields vertically. The layout is easy to scan, small screen friendly, and gives enough space…
10
Responsive Form
Responsive forms are forms that remain convenient to use on large or small screens. The way is to use flexible width, box-sizing, media query, and adequate font size. Forms also…
11
Popup Form
A popup form is a form that appears on top of a page in the capital layer. The background layer covers other content, while the form appears centralized so that the user's…
12
Inline Form
Inline forms place the input and the button in one horizontal line. This pattern is suitable for short forms such as search or newsletter subscriptions. On a narrow screen, the…
13
Clear Input Field
Clear input field is a small button to quickly empty the contents of an input. The button usually appears only when the input contains text, then deletes the value and returns…
14
Hide Number Arrows
Hide number arrows is a CSS technique for hiding small arrow buttons on type=number inputs. The arrow is a browser-built spinner that sometimes interferes with design. Once…
15
Copy Text to Clipboard
Copy text to clipboard is a feature for copying text to clipboard with one click. The modern navigator.clipboard.writeText API returns Promise so that its success or failure can…
16
Animated Search
An animated search is a search field that expands when focused or clicked. The effect is made by transitioning the width property, so the change in size feels subtle. This…
17
Search Button
A search button is a button that executes a search from an input. The input and the button are usually in the same form, so pressing Enter also sends a search. For keywords, the…
18
Fullscreen Search
Fullscreen search displays a large search field that covers the entire screen. This layer opens from the search button and closes with a cross button or Escape. As it acts as a…
19
Input Field in Navbar
The input field in the navbar places the search or other input column directly within the navigation bar. Flexbox helps to organize logos, links, inputs, and buttons in one neat…
20
Login Form in Navbar
Login form in navbar places the login form in the dropdown on the navigation bar. The login button opens a small panel containing email and password without leaving the page. A…
21
Custom Checkbox/Radio
Custom checkboxes and radios replace the display of the browser's built-in box or circle with its own design. The original input is kept so that the accessibility and behavior of…
22
Custom Select
Custom select makes the dropdown option have a look that suits the design of the site. The simplest way is to maintain the original select element, disable its sub-display with…
23
Toggle Switch
A toggle switch is an on/off control made of checkboxes and slider elements. The checkbox keeps the actual status, while the slider displays the position of the button and the…
24
Check Checkbox
Checkboxes are a pattern for displaying or hiding content based on the status of the checkbox. JavaScript reads the checked property and changes the look of other elements, such…
25
Detect Caps Lock
Detect Caps Lock is a feature to alert when a user is typing with Caps Lock active, especially on a password column. JavaScript checks the status of the button using the…
26
Trigger Button on Enter
This lesson discusses how to trigger the input button when the user presses the Enter button in the input column. This pattern makes searches or confirmations feel faster because…
27
Password Validation
This lesson shows you how to check the password strength on the client side before a form is sent. The examination usually includes minimum length, capital letters, lower case…
28
Toggle Password Visibility
This lesson discusses the key to display or hide the password you are typing. The implementation simply changes the type property on the input element between the password and…
29
Multiple Step Form
This lesson explains how to break long forms into several steps or wizards. Each step is displayed one by one, the user can move forward after the data on the active step is…
30
Autocomplete
This lesson discusses the list of automatic suggestions that appear when a user types in the search box. The list of suggestions is filtered from a data set based on the text…
31
Turn off autocomplete
This lesson describes the autocomplete attributes of form and input elements. The off value asks the browser not to display the previously typed fill suggestions, whereas a value…
32
Turn off spellcheck
This lesson discusses spellcheck attributes to set spell checks on column text. With spellcheck="false", the browser does not mark words that are considered misspelled, which are…
33
File Upload Button
This lesson discusses how to make a file upload button that can be customized. The original file input remains in use but is visually hidden, then the stylized label element acts…
34
Empty Input Validation
This lesson discusses how to make sure that the input column is not sent in an empty state. The checks can take advantage of the required attributes of the built-in HTML or be…
06
Filters
6 lessons
01
Filter List
This lesson shows you how to filter the list of items based on the text that the user typed. Each item is compared to a keyword, then the missing items are hidden. This technique…
02
Filter Table
This lesson discusses the filtering of table rows based on keywords entered. Each line is checked, usually by combining text from the entire cell and then searching for keywords…
03
Filter Elements
This lesson expands the concept of filters from a simple list to a set of elements like a card or a block of content. Each element is checked based on text or data attributes,…
04
Filter Dropdown
This lesson discusses a dropdown that comes with a search box to filter the options in it. This pattern is useful when a list of items is long, such as a list of countries or…
05
Sort List
This lesson explains how to sort items in alphabetical or numerical order. JavaScript can take the entire item, sort it with a comparator, and then rearrange the elements in the…
06
Sort Table
This lesson discusses how to sort the rows of a table when a user clicks on a column title. The line data is read, sorted by type of text or number, then rearranged in tbody.…
07
Tables
7 lessons
01
Zebra Striped Table
This lesson discusses zebra stripping, which is the alternating of different background colors on the table rows. This pattern improves the readability of long tables by helping…
02
Center Tables
This lesson discusses how to center a table in the middle of a page or container. Tables are block-level elements with a certain width, so horizontal centering is done by…
03
Full-width Table
This lesson discusses how to make tables fill the entire width of the container. With a width of 100%, the table will adjust to the space available, but the column can become too…
04
Nested Table
This lesson discusses a cluster table, a table that is placed inside the cells of another table. Nested tables are useful for displaying additional structured data within a…
05
Side-by-side Tables
This lesson discusses how to place two tables side by side. Modern approaches use flexbox or grid on the wrapping, whereas float is still found on old codes. On a narrow screen,…
06
Responsive Tables
This lesson discusses the strategy of displaying a wide table on a small screen. The simplest way is to give the wrapper a horizontal roll. For a more convenient experience,…
07
Comparison Table
This lesson discusses comparison tables to compare several product or package options. Columns usually represent options, whereas rows contain comparative features. A good design…
08
More
125 lessons
01
Fullscreen Video
This lesson discusses how to display videos in full-screen mode via a special button. The browser provides a Fullscreen API with the requestFullscreen method on the video element…
02
Modal Boxes
This lesson discusses capital, the layer of dialogue that appears at the top of the page to ask for attention or input. A good capital has an overlay, a title, a shutter button,…
03
Delete Modal
This lesson discusses the confirmation dialog before the user deletes the data. The capital displays the result of the action, the name of the item to be deleted, and the Cancel…
04
Timeline
This lesson discusses creating a vertical timeline to show events in sequence. The timeline is made with pseudo-elements, whereas each event has a point marker and a content…
05
Scroll Indicator
This lesson discusses the progression indicators that indicate how far a user scrolls a page. The indicator is usually a thin blade at the top that increases in width according…
06
Progress Bars
This lesson discusses making progress bars to show the percentage of completion of tasks. Progress can be displayed with an inbuilt progress or div element whose width is set to…
07
Skill Bar
This lesson discusses the skill bar, which is a bar that shows the level of mastery of a skill. The component consists of a label, a background track, and a filled section whose…
08
Range Sliders
This lesson discusses input range, a slider that allows users to select values within a specific range. The attributes min, max, step, and value set limits and increases in…
09
Color Picker
This lesson is about the browser's built-in color selector input. With type="color", the user can open the selected color palette and value available in hexadecimal format. The…
10
Email Field
This lesson discusses email input, which is a text column that uses the validation of the browser-built email format. Additional attributes such as multiple, required, and…
11
Tooltips
This lesson discusses the tooltip, a small help text that appears when a user directs a cursor or focuses on an element. Tooltips are usually created with pseudo-elements and…
12
Display Element Hover
This lesson discusses how to display hidden elements when a user directs a cursor to its parent container. The effect can be created with a selector:hover that targets the child…
13
Popups
This lesson discusses popups, small boxes that appear after a user presses a button or a specific element. Unlike full capital, popups usually do not block the entire page and…
14
Collapsible
This lesson discusses collapsible components that can be opened and closed to hide long content. The trigger button changes the status of the content and usually displays the…
15
Calendar
This lesson discusses how to create a monthly calendar display with CSS Grid and JavaScript. JavaScript counts the number of days in a month, determines the first day, and then…
16
HTML Includes
This lesson discusses how to include the same HTML snippet on multiple pages. HTML does not have built-in include directives like server languages, so the available options are…
17
To Do List
This lesson discusses making a simple list of tasks that can add, mark, and delete items. JavaScript creates new elements of input values, pastes events through event delegation,…
18
Loaders
This lesson discusses the loader, an animation that shows that a process is going on. Loaders are often created with CSS only using rotating borders or animated keyframes. In…
19
Badges
This lesson discusses badges, small labels that provide additional information such as the number of notifications, status, or category. Badges are usually inline elements with a…
20
Star Rating
This lesson discusses star ratings with CSS, typically using radio input and star-shaped labels. The radio approach makes ratings operable with a keyboard and only one score can…
21
User Rating
This lesson discusses the interactive rating components that allow users to rate by clicking on a star. JavaScript handles the selection of values, displays average ratings, and…
22
Overlay Effect
This lesson discusses the overlay, a transparent layer of text or buttons that appears on an image or card. The overlay is usually positioned absolutely to cover the container…
23
Contact Chips
This lesson discusses contact chips, which are small pieces of information that contain an avatar and a name that can be deleted. The chip is often used on the email recipient…
24
Cards
This lesson discusses the card, a box-shaped container of content that brings together images, titles, descriptions, and actions. The card is commonly used in blogs, product…
25
Flip Card
This lesson discusses flip cards, which rotate to show the backside when hovering or focusing. The three-dimensional effect is created with perspective on the container,…
26
Profile Card
A profile card is a concise component to display a person's identity, usually containing a photo, name, post, and action button. These cards are often used on team pages, user…
27
Product Card
The product card contains brief information about a product: picture, name, description, price, and buy button. These components become the basic blocks on a catalog page or…
28
Alerts
A warning is a short message that appears to inform the user of an event, such as a successful data storage or an error. JavaScript provides built-in blocking, but modern…
29
Callout
A callout is a highlight box used to draw attention to important information, such as tips, warnings, or additional notes. Usually the callout has a soft background color, thick…
30
Notes
Notes or notebooks are used to display additional information supporting the main text, such as technical details or reminders. It looks like a callout, but it's usually calmer…
31
Labels
A label or badge is a small marker containing short text to give a category, status, or description of an item. Because of its small size, labels should be legible and not…
32
Ribbon
A ribbon is a small ribbon that is affixed to the corner of a card or picture, usually to mark a new product, discount, or special status. The effect is created by placing the…
33
Tag Cloud
Cloud tags are a collection of keywords or labels of different sizes to indicate the level of interest or frequency. More popular topics usually appear larger, so visitors can…
34
Circles
Circles in CSS are made of square elements whose corners are completely curved with a border-radius: 50%. This form is often used for an avatar, status icon, or notification…
35
Style HR
The hr (horizontal rule) element marks the shift of a topic or the separation between parts. Its lower appearance is a curved thin line, but it can be transformed into a colored…
36
Coupon
A coupon is a ticketed promotional component that contains a discount code and a validity period. Its distinctive features are the broken lines as a boundary and small curves at…
37
List Group
A list group is a vertical list in which each row appears as a separate item with a border or background. This component is suitable for setting menus, message lists, or side…
38
List Group with Badges
The badge on the list group adds a number or status marker to the right of each item, for example the number of unread messages. Flex layout with justify-content: space-between…
39
List Without Bullets
Bullet-free lists are created by removing the built-in marker via the list-style: none, then resetting the margin and padding. Despite the changing appearance, the ul and li…
40
Responsive Text
Responsive text is adjusted to the screen width to be easy to read on mobile or desktop. The clamp() function allows setting the minimum size, viewport-based ideal size, and…
41
Cutout Text
Cutout text is the effect of text that appears to be hollow so that the image or gradient behind it is visible through the letters. This effect is created by background-clip:…
42
Glowing Text
Glowing text is a bright text effect created by several layers of colored text-shadows. The larger the blur radius and the more layers, the softer the pendants are produced. This…
43
Fixed Footer
Fixed footer is a bar that is always visible at the bottom of the viewport, even if the page is flipped. This effect is achieved by position: fixed, bottom: 0, and width 100%.…
44
Sticky Element
Sticky elements are elements that behave normally until they reach a certain point, then stick to the screen while the container is still visible. Position property: sticky…
45
Equal Height
Equal height means that several columns or cards have the same height even though their contents differ in length. Flexbox solves this automatically because align-items: stretch…
46
Clearfix
Clearfix is a technique for making a container hold onto a child's element that uses a float. Because the float removes the elements from the normal stream, the height of the…
47
Responsive Floats
Responsive floats arrange elements that float side by side on the screen, then piled up vertically on the small screen. The classic pattern uses float: left and width…
48
Snackbar
A snackbar is a short message that appears temporarily at the bottom of the screen, such as a confirmation of 'Link copied'. Usually, snack bars pop up after a user's action,…
49
Fullscreen Window
The fullscreen API allows a particular page or element to be displayed filling an entire screen without a browser interface. JavaScript calls requestFullscreen() to the element,…
50
Scroll Drawing
A scroll drawing or scroll progress indicator is a line filled as a page rolls, telling how far the user reads. The value is calculated from the roll position divided by the…
51
Smooth Scroll
Smooth scroll makes the movement to the page smoothly, rather than jumping straight. CSS provides scroll-behavior: smooth that applies to anchor links and scroll calling API. For…
52
Gradient Bg Scroll
A gradient background scroll is a gradient background that appears silent as the content above it is scrolling. These effects are usually created by background-attachments: fixed…
53
Sticky Header
Sticky header is a header that remains visible on the screen after the user scrolls past a certain boundary. JavaScript can monitor the scroll's position and then add a sticky…
54
Shrink Header on Scroll
Shrink header on scroll is a technique of shrinking header as the user scrolls down, so that the content space increases. JavaScript adds a class to the header when it passes the…
55
Pricing Table
The pricing table compares several price packages in an adjacent column, complete with a list of features and subscription buttons. Clear structure helps potential customers…
56
Parallax
Parallax is the effect of depth when the background moves slower than the content in front of it. The simplest CSS implementation uses background-attachments: fixed on the…
57
Aspect Ratio
The aspect ratio is the ratio of the width and height of an element, for example 16:9 for video or 1:1 for avatar. The CSS aspect-ratio property allows automatic high-calculation…
58
Responsive Iframes
A responsive frame is a video or map embed that is width-adjusting the screen without compromising the ratio. Since the iframe has inherently fixed dimensions, it needs to be…
59
Toggle Like/Dislike
A toggle like/dislike is a pattern of reactive buttons that can be active and inactive, usually accompanied by a calculator. JavaScript adds or removes active classes and updates…
60
Toggle Hide/Show
The toggle hide/show makes elements appear and disappear alternately when the button is clicked. The most direct way is to change the display property between none and block via…
61
Toggle Dark Mode
Dark mode is a dark theme that users can activate according to their preferences. Modern implementations use CSS variables for colors, then change their values when dark classes…
62
Toggle Text
Text toggle changes the text content of an element each time a button is clicked, for example from 'Show' to 'Hide'. The implementation is just reading the current value and then…
63
Toggle Class
Toggle class means adding a class if it doesn't exist and deleting it if it already exists. Method classList.toggle does both in one call so the code is more concise. This method…
64
Add Class
Add class is used to add one or more CSS classes to an element via JavaScript. The method maintains an existing class and ignores the class that has been added. This approach is…
65
Remove Class
Remove class removes one or more classes from the element without interfering with the other classes. The method is a modern method that is safe because it does not cause error…
66
Change Class
Change class means replacing one class with another class on the element, for example from 'info' to 'warning'. The Method deals with substitutions without touching other classes…
67
Active Class
Active class marks the element being selected, such as the navigation menu on an active page. JavaScript usually removes the active class from all items and adds it to the items…
68
Tree View
Tree view displays tiered data such as folders and files that can be opened or closed. Its HTML structure is a cluster list, while JavaScript handles clicks on the marker to…
69
Remove Decimals
Removing decimals means turning a fractional number into an integer, for example 12.75 to 12. JavaScript provides Math.trunc to cut the decimal point, Math.floor to round down,…
70
Remove Property
Deleting properties from JavaScript objects can be done with the delete operator, e.g. delete user.email. This operator deletes the property of the object itself, not the…
71
Offline Detection
Offline detection allows pages to notify users when a connection is disconnected. The browser provides navigator.onLine as well as online and offline events that JavaScript can…
72
Find Hidden Element
Determining whether a hidden element requires a review of some conditions, as the element can be hidden by display, visibility, hidden attributes, or by its parent. The property…
73
Redirect Webpage
This lesson discusses how to direct visitors to another page using JavaScript. Redirects are useful after logging in, after a form is sent, or when an old address has been moved.…
74
Format a Number
This lesson shows you how to display numbers in neat format in JavaScript. You can round the decimal with toFixed(), add the denominator of thousands, and format the currency…
75
Zoom Hover
The zoom effect when the hover makes the image or card feel more alive when the cursor approaches. Its main technique is to transform transform and give it transition so that the…
76
Flip Box
A flip box is a two-sided card that rotates 180 degrees when hovered or clicked. This effect is built with perspective on the container, transform-style: preserve-3d on the card,…
77
Center Vertically
Vertically centering elements can now be done with modern, compact CSS. Flexboxes with align-items: center and Grid with place-items: center are the most flexible options. For…
78
Center Button in DIV
The buttons can be centered inside the div in different ways depending on its layout. If the button is inline-block, text-align: center on parent is enough. For more complete…
79
Center a List
The <ul> list by default fills the parent width, so the text appears flat on the left even though it is short. To centralize the entire list block, convert the list to…
80
Transition on Hover
CSS transitions make style changes when the hover runs smoothly, not jumps out of nowhere. You define the animated properties, duration, rhythm, and delay on the base element,…
81
Arrows
Arrows in CSS can be created without images, for example by tricking a transparent border or spinning two borders on a box. The border approach is suitable for simple triangles,…
82
Shapes
CSS can form circles, triangles, ellipses, and polygons without image files. Circles use border-radius: 50%, triangles use transparent border, and free shapes are made with…
83
Download Link
The download attribute on the link asks the browser to download the file, not open it in a new tab. You can suggest the name of the downloaded file, but the browser still decides…
84
Full Height Element
The Full-screen element is often used for the hero section or landing page. Height: 100% only works if all parents have a clear height, so min-height: 100vh is more practical. On…
85
Browser Window
A browser window mockup is a CSS composition that mimics a browser window to beautify a screenshot or portfolio. It usually consists of a top bar containing three dots, an…
86
Custom Scrollbar
The scrollbar can be styled to fit the design of the site, especially in Chromium- and Safari-based browsers. WebKit provides pseudo-elements such as `::-webkit-scrollbar` and…
87
Hide Scrollbar
Hiding the scrollbar can make the view cleaner, but the content should remain scrollable. In WebKit, the::-webkit-scrollbar {display: none} hides the scrollbar, while Firefox…
88
Show/Force Scrollbar
Sometimes the scrollbar needs to be always visible so that the layout does not shift as the content increases. overflow-y: scroll forces the scrollbar to appear, whereas…
89
Device Look
A device look is a mockup of a device such as a phone, tablet, or laptop made with CSS. Frames, rounded angles, notches, and shadows help display screenshots of applications in…
90
Contenteditable Border
Contenteditable attributes make HTML elements easily editable by users. To make the edit area clear, give the border, padding, and focus style using:focus. You can also display a…
91
Placeholder Color
The color of the placeholder is set through a pseudo-element: the placeholder. You can change the color and opacity to fit the design, but the contrast should stay fairly against…
92
Disable Resizing of Textarea
The textarea can be changed by default by drawing the lower right corner. Resizing properties: none disables that ability, while resizing: vertical or horizontal limits the…
93
Disable Text Selection
The user-select property determines whether text can be selected by the user. The none value is useful for buttons, navigation labels, or interface elements so that clicks will…
94
Text Selection Color
The highlighted text color can be changed with a pseudo-element::selection. You usually set the color and background so that the highlights stay in contrast to the design. Not…
95
Bullet Color
The color of the bullet on the list can be set by using a pseudo-element::marker or by making a custom bullet using a::before.::marker is a modern simple way to change the color…
96
Vertical Line
Vertical lines are often used as a separator between columns, quotation marks, or accents on cards. The simplest way is to border-left or border-right on the container. For…
97
Dividers
Dividers or separators help break down the content into more easily scanned parts. The <hr> element is a semantic choice for topic displacement, and its appearance can be changed…
98
Text Divider
A text divider is a horizontal line in the middle of which there is text, such as 'or' on a form. Modern techniques use flexboxes: text becomes the middle item, while lines are…
99
Animate Icons
Icons can be animated to make the interaction feel more alive, such as rotating while hovering or tapping for notifications. Simple animation uses transitions, while repetitive…
100
Countdown Timer
The countdown timer counts the difference between the present time and the target date. JavaScript provides Date to take time, then the Interval set ups the view every second.…
101
Typewriter
The typewriter effect shows text one character after another so it feels like it's being typed. JavaScript takes the string cut with slice() and updates it using setTimeout or…
102
Coming Soon Page
A coming soon page tells visitors that the product or site has not yet been launched. Usually, this page uses a full-screen layout, clear headlines, and email forms to gather…
103
Chat Messages
Chat messages are a bubble-shaped display of conversation that is separated between the sender and the receiver. Flexbox makes it easier to arrange messages to the left or right,…
104
Popup Chat Window
A popup chat window is a small conversation panel that appears from the corner of a page when a chat button is clicked. The panel is usually fixed at the bottom right, then…
105
Split Screen
Split screen divides a page into two equal parts, such as a promotional panel and a form panel. Flexbox or Grid can make both sides aligned easily, and then the query media…
106
Testimonials
Testimonials feature user quotes along with names, roles, and photos to build trust. The grid with auto-fit allows the cards to be neatly arranged and adjusted to the width of…
107
Section Counter
The section counter displays statistics that increase from zero to the target value. JavaScript reads the values from the data attributes, and then animates the numbers using the…
108
Quotes Slideshow
The quotes slideshow displays one quote at a time, then changes periodically or by clicking a button. JavaScript stores a list of active citations and indexes, then updates the…
109
Closable List Items
Closable list items allows users to delete items from the list by pressing the close button. Each item has a button, then JavaScript searches for the nearest <li> element and…
110
Typical Device Breakpoints
Breakpoint is a specific screen width where the layout changes, for example from one column to two columns. The mobile-first approach uses min-width to make the basic style…
111
Draggable HTML Element
HTML elements can be made to be moved with an event pointer. When the pointer is pressed, record the starting position of the element and the pointer, then update the position of…
112
JS Media Queries
JavaScript can read the same query media as CSS via window.matchMedia(). The resulting object has matches properties to know if the query is active, as well as event change when…
113
Syntax Highlighter
Syntax highlighters give the code a color to make the structure and tokens easy to read. For simple pages, the code is displayed inside <pre><code> and the special character is…
114
JS Animations
JavaScript animation moves or changes elements little by little in many frames. requestAnimationFrame asks the browser to run a function before the next frame, so the movement is…
115
JS String Length
The length property gives the number of code units in a JavaScript string. For ordinary text, the result is equal to the number of characters, but emoji and characters outside…
116
JS Exponentiation
The operator ** subtracts numbers in JavaScript, replacing the longer Math.pow designation. This operation has associativity to the right, so 2 ** 3 ** 2 is counted as 2 ** (3 **…
117
JS Default Parameters
The default parameter provides a backup value when the function argument is not given or is worth undefined. The default value is written directly into the list of parameters and…
118
JS Random Number
Math.random() yields a random decimal number from 0 (inclusive) to less than 1. To get an integer in a certain range, multiply by the number of possible values and then round it…
119
JS Sort Numeric Array
Method sort() in JavaScript changes arrays and by default sort them by string, not numerical value. The result [10, 1, 2] can be [1, 10, 2] because '10' is considered smaller…
120
JS Spread Operator
The spread operator is a three-point (...) syntax in JavaScript that opens the contents of an array or object into separate parts. This operator is very useful for copying data,…
121
JS Scroll Into View
ScrollIntoView is a method on a DOM element that causes a browser to scroll through a page until the element is visible. You can set the roll behavior to smooth and determine the…
122
Get Current Date
JavaScript provides the Date object to take the current date and time. The month's value starts from 0 for January, so it often needs to be added one or mapped to the month's…
123
Get Current URL
The window.location object stores information about the address of the page being opened. From this object you can read the full URL, protocol, host name, path, query string, and…
124
Get Current Screen Size
The size of the browser window can be read through properties such as window.innerWidth and window.innerHeight, which indicate the viewport area available. For physical screen…
125
Get Iframe Elements
Iframe allows one page to display another document inside a small box. JavaScript can access iframe content via contentDocument or contentWindow, but only if the page comes from…
09
Website
20 lessons
01
Create a Website
Creating a website starts with goal planning, audience determination, and page structure. Then you create HTML files for content, CSS for display, and JavaScript when you need…
02
Make a Website
Creating a neat website is best done by following a clear workflow: identify the needs, make layout sketches, and then translate the sketches into HTML structures. Once the…
03
Make a Static Website
Static websites consist of HTML, CSS, and JavaScript files that are sent to the browser without server processing. Since it doesn't require a database or backend logic, static…
04
Host a Static Website
Static website hosting means placing a site file on a server that is publicly accessible. You can use a free service like GitHub Pages or a paid hosting provider, and then upload…
05
Make a Website (W3.CSS)
W3.CSS is a lightweight CSS framework that provides ready-to-use classes for layout, colors, cards, and buttons. By adding classes like w3-container and w3-row, pages can be…
06
Make a Website (BS3)
Bootstrap 3 is a popular front-end framework that provides a 12-column grid system, navbar components, buttons, and ready-made forms. Pages are built by wrapping content in…
07
Make a Website (BS4)
Bootstrap 4 brings a flexbox-based grid system that is more flexible than previous versions. Its utility class is complete for margins, padding, color, and alignment, so the…
08
Make a Website (BS5)
Bootstrap 5 is the latest version that completely abandoned jQuery and used modern JavaScript. The interactive component is controlled through the data-bs-* attribute so it's…
09
Create and View a Website
Once the HTML code is written, save the file with the .html extension and then open it through the browser to see the results. The edit, save, and refresh cycle is the fastest…
10
Create a Link Tree Website
A link tree is a simple page that contains a short profile and a list of important links in one place. This page is typically used in social media bio to make it easy for…
11
Create a Portfolio
A web portfolio shows your work, skills, and professional identity in one easy-to-share page. The structure generally consists of the introductory, about, project selection,…
12
Create a Resume
A web-based resume is a CV that is compiled with HTML and CSS so it is easy to share via links. Information is organized in a sequence: identity, summary, experience, education,…
13
Make a Restaurant Website
The restaurant's website needs to clearly display the atmosphere, menu, opening hours, location, and booking methods. Visitors often search for information through their mobile…
14
Make a Business Website
Business websites serve to explain the value they offer, build trust, and direct visitors to contact or buy. An effective page contains services, social proof, company…
15
Make a WebBook
A web book is a long piece of content that is organized into chapters and presented as a web page. The reader can move through the list of contents, the links to previous and…
16
Center Website
Focusing on the content of a website means placing the main block in the center of the viewing area without making it fully widespread. The most common way is to give the maximum…
17
Contact Section
The contact section on the website makes it easy for visitors to send messages or find other communication channels. A good form has a clear label, an appropriate input type, and…
18
About Page
A About page explains who you are, what you do, and why visitors should trust your business or work. This section usually contains short stories, missions, values, teams, and…
19
Big Header
A big header or hero header is a large area at the top of a page that immediately attracts attention. It usually contains a headline, a supporting sentence, and an action button…
20
Example Website
An example of a complete website shows how separate components are combined into a whole page. Header, navigation, hero, feature section, and footer are all arranged with a…
10
Grid
9 lessons
01
2 Column Layout
The layout of the two columns divides the content area into two adjacent sections, such as the main article and the sidebar. The easiest modern way is CSS Grid with…
02
3 Column Layout
The three-column layout divides content into three parallel sections, often used for listing features, services, or articles. The CSS Grid with repeat(3, 1fr) automatically makes…
03
4 Column Layout
The four-column layout is suitable for presenting a large number of services, features, or products in a concise manner. The CSS Grid with repeat(4, 1fr) divides the space into…
04
Expanding Grid
An expanding grid is a collection of grid cards that either enlarges when selected, touched, or focused. This effect gives room for additional detail without opening a new page.…
05
List Grid View
The list/grid view button allows the user to choose a more concise list view or a more visual grid view. JavaScript just adds or removes a class on the container, and then CSS…
06
Mixed Column Layout
The mixed column layout combines several column widths into a single page, for example the main content is wide with a narrow sidebar and then a full-width section below it. The…
07
Column Cards
Column cards are content cards arranged in several vertical columns, similar to a magazine layout. Multi-column CSS (column-count or columns) can automatically stream the card to…
08
Zig Zag Layout
Zigzag layout arranges the lines of content alternately: the image on the left and then the text on the right, then the text on the left and the image on the right. This pattern…
09
Blog Layout
Blog layouts arrange a list of posts to be easily scanned, usually with one flagship article and several other article cards. Each post should include article elements, headings,…
11
Google
4 lessons
01
Google Charts
Google Charts is a JavaScript library for creating interactive graphics in a browser, such as bar diagrams, lines, and pie. The data is set up in a two-dimensional table, then…
02
Google Fonts
Google Fonts is a service that provides free web fonts for use directly on a page. You insert a font style sheet link into the head section, and then call the font name on the…
03
Google Font Pairings
Font pairing is the art of combining two types of letters so that the look feels harmonious yet still has contrast. The pattern is generally head with character font and body…
04
Google Set up Analytics
Google Analytics helps site owners understand the number of visits, traffic sources, and visitor behavior. The installation is done by adding the gtag.js tag containing the…
12
Converters
4 lessons
01
Convert Weight
The weight converter converts values between kilograms, grams, pounds, and ounces through JavaScript. The conversion formula is applied after the input value is read as a number,…
02
Convert Temperature
The temperature converter changes the values between Celsius, Fahrenheit, and Kelvin using a standard formula. JavaScript reads the input values, determines the source and…
03
Convert Length
The length converter makes it easy to transfer values between meters, centimeters, kilometers, inches, feet, and miles. The most neat way is to convert all units to base units…
04
Convert Speed
The speed converter changes the value between kilometers per hour, meters per second, miles per hour, and knots. The key to the calculation is to equate the units of time and…
13
Blog
3 lessons
01
Get a Developer Job
Getting a developer job requires more than just coding skills. Portfolios showing real work, resumes tailored to vacancies, and professional networks help open up opportunities.…
02
Become a Front-End Dev.
Front-end developers build parts of the website that are viewed and used directly by users. The learning curve starts with HTML, CSS, and JavaScript, and then goes on to Git,…
03
Hire Developers
Recruiting a developer requires a clear definition of the role, an honest job description, and a relevant selection process. Appreciate the portfolio, problem solving skills, and…