Beginner guide
Web glossary
"What's a header?" "What's an API?" We explain web terms with visuals and examples.
Categories
Site Structure
Header
/ˈhɛdər/
The topmost navigation area of a website. It typically contains the logo, menu, and search bar.
Example
The part at the top of this site with the 'AIGP' logo and menu.
Footer
/ˈfʊtər/
The bottommost information area of a website. It usually contains copyright notices, links, and contact information.
Example
The section at the very bottom of the page that says '© AIGP'.
Sidebar
/ˈsaɪdˌbɑːr/
A supplementary area positioned alongside the main content. It might contain category lists or filters.
Example
The menu section on the left side of an admin panel.
Breadcrumb
/ˈbrɛdˌkrʌm/
A hierarchical display that shows the current page's location within the website, such as HOME > Category > Article Title.
Example
HOME / Prompts / AOS.js Fade-in
Hamburger Menu
/ˈhæmˌbɜːrɡər ˈmɛnjuː/
An icon with three horizontal lines (≡). Tapping it opens a menu, commonly used on mobile screens.
Example
The three horizontal lines that appear in the top right corner when viewing a site on a smartphone.
Global Navigation
GLOH-buhl nav-ih-GAY-shun
The main menu that appears consistently across all pages of a website, containing links to key sections like Home, About, Products, and Contact. It's usually located in the header or sidebar and helps users quickly navigate to important areas of the site.
Example
The menu bar at the top of a company website that always shows 'Home', 'About Us', 'Services', 'Careers', and 'Contact' is the global navigation.
Main Content Area
MAYN KON-tent AIR-ee-uh
The central section of a web page where the primary information of that page (like an article, product description, or images) is displayed. It's surrounded by the header, footer, and sidebars, and contains the core content that users come to the page to see.
Example
On a blog post page, the wide central section displaying the article title, body text, and images is the main content area.
Local Navigation
LOH-kuhl nav-ih-GAY-shun
A menu or set of links that appears only within a specific section or page, providing detailed navigation related to that particular area. It exists below the global navigation and helps users move deeper within the current category or topic.
Example
On an online store's 'Computers' category page, the sub-menu showing 'Laptops', 'Desktops', and 'Accessories' is the local navigation.
Hero Section
HEER-oh SEK-shun
A large, visually striking area placed at the very top of a web page, right below the header. It contains eye-catching imagery or video, a headline, and a primary call-to-action (CTA) button, designed to make a strong first impression and immediately communicate the site's purpose.
Example
On a company's landing page, the area with a beautiful background image, a large headline in the center saying 'Building the Future with Innovative Technology', and a 'Learn More' button below it is the hero section.
Design & Layout
Responsive Design
/rɪˈspɒnsɪv dɪˈzaɪn/
A design approach where the website layout automatically adjusts to different screen sizes, such as PCs, tablets, and smartphones.
Example
When you view this site on a PC and a smartphone, you'll notice the number of card columns changes.
Grid Layout
/ɡrɪd ˈleɪaʊt/
A layout method that arranges elements in a grid (rows and columns). Often used for displaying lists of cards.
Example
The section on the homepage where article cards are arranged in four columns.
Aspect Ratio
/ˈæspɛkt ˈreɪʃiˌoʊ/
The ratio of an image or video's width to its height. 16:9 is widescreen, 4:3 is standard, and 9:16 is vertical (for smartphone videos).
Example
YouTube typically uses 16:9, while Instagram Stories often use 9:16.
Margin / Padding
/ˈmɑːrdʒɪn / ˈpædɪŋ/
Margin refers to the space outside an element, while padding refers to the space inside an element.
Example
The gap around a card (margin) and the space between text and the border within a card (padding).
Flexbox (Flexible Box Layout)
flekss-box
A CSS layout model that helps arrange items in a single row or column, and distribute space among them efficiently. It simplifies the creation of complex layouts, commonly used for navigation bars or lists of cards.
Example
You use Flexbox in a website's header to align the logo and navigation links horizontally and automatically adjust the spacing between them.
Viewport
vyoo-pohrt
Refers to the visible area of a web page on a device's screen that the user is currently viewing. The size of the viewport varies significantly between different devices like desktops, tablets, and smartphones.
Example
When you view a website on your smartphone, the area of the screen where the browser displays the content is the viewport. Websites adjust their display to fit this viewport.
Z-index
zee-in-deks
A CSS property that controls the stacking order of elements on a web page. Elements with a higher Z-index value will appear on top of elements with lower values. It's used for elements like pop-up windows or dropdown menus.
Example
To make a pop-up advertisement appear above the website's main content, you would set a high Z-index value for the advertisement, ensuring it's stacked in front of other elements.
Breakpoints
brayk-points
In responsive design, breakpoints are specific screen widths (viewports) where a website's layout or style changes. They allow the website to adapt and provide an optimized display for different device sizes.
Example
To display a navigation bar vertically on mobile devices and horizontally on tablets or desktops, you would set a specific screen width (e.g., 768px) as a breakpoint.
Animation & Motion
Fade In / Fade Out
/feɪd ɪn / feɪd aʊt/
An animation where an element slowly appears (fade in) or disappears (fade out).
Example
The effect where article cards gently appear as you scroll down the page.
Slider / Carousel
/ˈslaɪdər / ˌkærəˈsɛl/
A UI component where images or content slide horizontally to switch. Swiper is a popular library for this.
Example
The main image section on shopping websites that automatically rotates.
Parallax
/ˈpærəˌlæks/
An effect where background and foreground elements move at different speeds when scrolling, creating a sense of depth.
Example
A website where the background image moves slowly as you scroll.
Hover Effect
/ˈhɒvər ɪˈfɛkt/
A change that occurs when a mouse cursor is placed over an element, such as a color change or enlargement.
Example
The effect where a button's color deepens when you hover your cursor over it.
Transition
/trænˈzɪʃən/
An animation that smoothly carries out a state change. For example, a color changing 'gently' rather than 'instantly'.
Example
The smooth sliding motion when a menu opens.
Keyframe Animation
/ˈkiːfreɪm ˌænɪˈmeɪʃən/
A method in CSS to define the intermediate states of an animation. By specifying key points (keyframes) at different stages, you can create complex sequences of motion, color changes, or other transformations. It allows for precise control over an element's properties over time.
Example
Defining an animation that makes an element move from left to right, simultaneously changing its color from red to blue, by setting specific styles at 0%, 50%, and 100% of the animation's duration.
Easing Function / Timing Function
/ˈiːzɪŋ ˌfʌŋkʃən/ or /ˈtaɪmɪŋ ˌfʌŋʃən/
A function that defines the acceleration curve of an animation, controlling how its speed changes over time. It makes animations feel more natural by simulating real-world physics, such as starting slow and speeding up or vice versa. Common examples include `linear`, `ease-in`, `ease-out`, and `ease-in-out`.
Example
Animating a button to smoothly slide upwards and then gently settle into place after being clicked, using an `ease-out` timing function to give it a natural deceleration.
CSS Transform
/siː ɛs ɛs trænsˈfɔːrm/
A CSS property that allows you to modify the shape and position of an element in 2D or 3D space. It includes functions like `translate` (move), `scale` (resize), `rotate` (turn), and `skew` (tilt), forming the foundation for many web animations. These functions can be combined to create complex effects.
Example
Rotating an icon by 45 degrees using `rotate(45deg)` or making an image 1.2 times larger with `scale(1.2)` when a user interacts with it, adding visual feedback.
Technical Terms
API
/ˌeɪ piː ˈaɪ/
An interface that allows different software applications to communicate and exchange information. It's a mechanism where, for example, 'accessing this URL provides data'.
Example
AIGP uses a REST API to retrieve blog data from WordPress.
CSS
/ˌsiː ɛs ˈɛs/
A language used to specify the appearance of web pages (colors, sizes, layout, animations).
Example
Making text red, rounding button corners, or adjusting spacing.
JavaScript
/ˈdʒævəˌskrɪpt/
A programming language used to add interactivity and dynamic behavior to web pages, enabling actions like 'something happens when you click a button'.
Example
The action of a menu opening when you click a button.
CDN
/ˌsiː diː ˈɛn/
A system that distributes files across servers worldwide and delivers them from the server closest to the user.
Example
Loading Swiper code from a CDN instead of hosting it on your own server.
npm / Package
/ˌɛn piː ˈɛm / ˈpækɪdʒ/
A system for downloading and using programs (libraries) created by others in your own project.
Example
Adding slider functionality with `npm install swiper`.
SEO & Marketing
SEO
es-ee-oh
Optimizing your website to rank higher in search results on engines like Google. This involves adjusting titles, headings, internal links, and more.
Example
Making your site appear on the first page when someone searches for 'Swiper slider'.
MEO
em-ee-oh
Strategies to rank higher in Google Maps search results. Crucial for physical businesses. Focuses on optimizing your Google Business Profile.
Example
Improving the ranking of a local coffee shop in Google Maps when someone searches for 'cafe near me'.
AIO
ay-eye-oh
Optimizing your website to be cited or referenced by AI search engines like ChatGPT and Perplexity. Also known as AI Overview optimization.
Example
Having your website's information cited in Google Search's AI Overview feature.
LLMO
el-el-em-oh
A method to optimize content so that Large Language Models (LLMs) like ChatGPT, Gemini, and Claude reference or cite your content when generating answers.
Example
Your article being cited when someone asks ChatGPT 'What are the best CSS libraries?'
GEO
jee-ee-oh
Optimizing your information to be included in the generated results of AI search engines (like SGE, Perplexity). Structured data and E-E-A-T are key.
Example
Your explanatory article appearing as a source when a technical question is asked on Perplexity.
OGP
oh-jee-pee
Settings for the title, image, and description displayed when a link is shared on social media. Stands for Open Graph Protocol.
Example
The thumbnail image that appears when you send a URL in a messaging app like WhatsApp.
JSON-LD
jay-son-el-dee
A special JSON format used to tell search engines what your page content is about, such as 'This is an article' or 'These are step-by-step instructions'. It's the source of rich results.
Example
The star ratings or step-by-step instructions that appear in Google search results are thanks to JSON-LD.
Affiliate
uh-fil-ee-ate
A system where you introduce products or services on your website, and receive a commission when someone makes a purchase or signs up through your link.
Example
If someone signs up for a recommended tool via your link, you, as the referrer, receive a commission.
Programming Languages
HTML
aych-tee-em-el
The language used to create the 'skeleton' of web pages. It defines the structure of headings, paragraphs, images, links, and more. It's the foundation of all websites.
Example
Written like `<h1>Title</h1><p>Body</p>`.
PHP
pee-aych-pee
A server-side programming language. It's the core of WordPress and interacts with databases to generate dynamic web pages.
Example
WordPress themes and plugins are written in PHP.
TypeScript
type-script
A language that adds 'types' to JavaScript. By pre-defining the kind of values variables can hold, it helps prevent bugs. Essential for large-scale development.
Example
Writing `const age: number = 25;` will cause an error if you try to assign a string, telling you immediately.
Python
py-thon
The most widely used language for AI, machine learning, and data analysis. Its syntax is simple and easy to read. Django/Flask are popular for web development.
Example
ChatGPT and Stable Diffusion are built with Python.
SQL
es-kyoo-el
A specialized language for instructing databases, such as 'give me this data' or 'save this'.
Example
`SELECT * FROM users WHERE age > 20;` retrieves a list of users older than 20.
Frameworks & Libraries
React
ree-akt
A UI-building library developed by Meta (formerly Facebook). It creates pages by combining components, which are like building blocks. Currently the most popular.
Example
Used by Instagram, Netflix, and Airbnb. This AIGP site is also React-based.
Next.js
nekst-jay-es
A full-fledged web framework built on React. It integrates server-side rendering, static site generation, and API routes.
Example
This AIGP site is built with Next.js 16.
Vue.js
vyoo-jay-es
A UI framework with a low learning curve. It's intuitive, based on HTML templates, and popular among many web development teams.
Example
Often chosen for quickly building internal tools and admin panels.
Tailwind CSS
tayl-wind see-es-es
A CSS framework that applies styles by combining utility class names. It allows for rapid UI development without needing separate design files.
Example
`class="text-lg font-bold text-blue-600"` results in large, bold, blue text.
jQuery
jay-kwair-ee
A JavaScript library that once held an overwhelming market share. It simplified DOM manipulation. Nowadays, development is shifting towards React/Vue and similar frameworks.
Example
`$('.menu').slideToggle();` creates a slide-in/out animation for a menu.
Node.js
nohd-jay-es
A runtime environment that allows JavaScript to run on the server side. Its strength is being able to write both front-end and back-end code in the same language.
Example
Commands like `npm install` and the Next.js development server run on Node.js.
Servers & Infrastructure
Shared Hosting
ren-tal ser-ver
A shared server service that lets you publish websites for a few dollars a month. Often includes easy WordPress installation. Ideal for beginners.
Example
Providers like HostGator, Bluehost, or SiteGround.
VPS
vee-pee-es
A service that virtually divides a single physical server, allowing you to use it like a dedicated server. Offers high flexibility with root access.
Example
This AIGP Next.js site runs on Docker on an Xserver VPS.
AWS
ay-dub-yoo-es
Amazon's massive suite of cloud services, the world's largest. Includes over 200 services like EC2 (servers), S3 (storage), and Lambda (serverless functions).
Example
Used by major global companies like Netflix, Nintendo, and NASA.
Docker
dok-er
Virtualization technology that packages applications into 'containers', allowing them to run consistently across any environment.
Example
`docker compose up` starts your development environment with a single command.
Vercel
ver-sel
A hosting service provided by the creators of Next.js. It automatically deploys your website when you push to Git.
Example
With GitHub integration, code updates are reflected on the production site in seconds.
Cloudflare
kloud-flair
A service offering free CDN, DNS, DDoS protection, and SSL certificates. Also provides site hosting with Cloudflare Pages.
Example
Just putting it in front of your site can significantly speed it up and enhance security.
SSL / HTTPS
es-es-el
A mechanism to encrypt communication between a website and a browser. Sites starting with `https://` are SSL-enabled. Also impacts SEO.
Example
The padlock icon in your browser's address bar is proof of SSL/HTTPS secure communication.
nginx
en-jin-eks
A high-performance web server and reverse proxy. It can handle a large number of concurrent accesses. Popular as a successor to Apache.
Example
Placing nginx in front of Next.js on a VPS to handle SSL processing and caching.
AI・Generative AI
LLM (Large Language Model)
el-el-em
A vast AI model trained on enormous amounts of text data. Used for a wide range of tasks including text generation, summarization, translation, and code generation.
Example
ChatGPT (GPT-4), Claude, Gemini, DeepSeek, etc.
Prompt
promt
Instructions or questions given to an AI. The quality of the AI's output can vary significantly depending on how the prompt is written.
Example
A prompt could be 'Create an infinite loop slider using Swiper.'
RAG (Retrieval Augmented Generation)
rag
A technology that allows an AI to search external databases before generating a response, incorporating the latest information. It helps mitigate hallucinations.
Example
An internal chatbot that searches company documents before answering questions.
Fine-tuning
fine-too-ning
The process of re-training an existing AI model with additional data to specialize it for a specific purpose.
Example
Customizing a general GPT model to become a specialized AI strong in medical terminology.
Stable Diffusion
stay-bl diff-yoo-zhun
An open-source AI that generates images from text. It can run on local PCs and allows for free customization of models.
Example
Inputting 'dragon and girl' automatically generates an illustration.
Token
toh-kun
The smallest unit an AI processes when handling text. API costs are determined by the number of tokens.
Example
DeepSeek is remarkably cheap at $0.14 per 1 million tokens.
CMS・Website Creation Tools
WordPress
werd-press
An open-source CMS with approximately 43% global market share, primarily developed by Automattic. Its functionality can be freely extended with plugins and themes, suitable for blogs, corporate sites, and e-commerce.
Example
Used by the White House, SONY Music, BBC News, and many more.
Wix
wiks
A no-code website builder from Israel, operated by Wix (NASDAQ listed). Allows intuitive design with drag-and-drop functionality, includes hosting. A free plan is available.
Example
Popular for personal portfolios and small business websites.
Jimdo
jim-doh
A website creation service from Germany. Features an 'AI Builder' that automatically generates websites.
Example
Often used for small personal sites or local businesses that need quick setup.
Studio
stoo-dee-oh
A no-code web design tool from Japan, operated by STUDIO Inc. Offers high design flexibility, extensive font support, and includes collaborative editing and CMS functions.
Example
Commonly used by startups and designers for portfolios, particularly in Japan.
Shopify
shop-i-fye
A Canadian-born, world-leading e-commerce platform that integrates payment, inventory, and shipping management. Allows easy creation of online stores with a monthly subscription.
Example
Used by Nike, Supreme, and many D2C brands globally.
Squarespace
skwair-speys
A US-based website builder known for its beautiful templates, operated by Squarespace Inc. (NYSE listed). Offers a rich selection of designs for photographers and creatives.
Example
Popular for portfolios, restaurants, and wedding websites.
Webflow
web-floh
A visual web development tool for designers. Enables the creation of professional responsive websites without writing code. CSS controls can be fine-tuned via a GUI.
Example
Chosen by designers who want to create 'pro-quality sites without code.'
Peraichi
peh-ra-ee-chee
A Japanese landing page (LP) creation tool, operated by Peraichi Inc. Allows users to easily create a single-page website by selecting a template and inputting text and images.
Example
Used for event announcements, campaign LPs, or simple online business cards.
Adobe・Creative Tools
Adobe
uh-doh-bee
A suite of creative software provided by US-based Adobe Inc. (NASDAQ: ADBE). Industry standard for photo, video, design, and web production. Offered via the monthly Creative Cloud subscription.
Example
Almost all design and video production companies use Adobe products.
Photoshop
foh-toh-shop
The industry-standard software for photo editing and image manipulation. Widely used by professional photographers and web designers for retouching, compositing, and color correction. Also features AI capabilities like 'Generative Fill.'
Example
Removing backgrounds from product photos, enhancing skin, creating banner images.
Illustrator
il-uh-stray-ter
The industry standard for creating vector graphics. Used to produce logos, icons, illustrations, and flyers that can be scaled without loss of quality. An essential tool for print design.
Example
Creating company logos, business cards, posters, and packaging designs.
XD / Figma Integration
eks-dee / fig-ma
Adobe XD was a UI/UX design tool, but new sales ended in 2023. Adobe is now transitioning to integration with Figma (after an attempted acquisition failed).
Example
It was previously used for creating wireframes and prototypes for web and app interfaces.
Premiere Pro
pree-meer proh
Professional video editing software used for editing films, TV programs, and YouTube videos. Allows for advanced visual expression when integrated with After Effects.
Example
Editing high-quality YouTube videos, corporate promotional videos, and movie trailers.
After Effects
af-ter eh-fekts
The go-to software for motion graphics and VFX. Used to create text animations, effect compositions, and special visual effects.
Example
Creating title animations, explosion effects, and infographic videos.
Lightroom
lyt-room
Software specialized in managing and batch-editing large volumes of photos. Excels at RAW development, color correction, and applying presets. The mobile version is free.
Example
Batch-correcting 100 travel photos to unify their color tones.
InDesign
in-duh-zyn
DTP software specialized in multi-page print layouts for books, magazines, and catalogs. The standard tool in the publishing and printing industry.
Example
Creating layouts for a 100-page product catalog or magazine.
Design・Image Editing Tools
Figma
fig-mah
A browser-based UI/UX design tool operated by Figma Inc. Its greatest strength is real-time collaborative editing. Rapidly gaining market share in web design.
Example
Teams simultaneously designing and reviewing a website.
Canva
kan-vah
An online design tool operated by Australian company Canva Inc. Offers a wealth of templates, allowing even design beginners to easily create social media images and presentation materials.
Example
Creating Instagram posts, presentation slides, or business cards using templates.
Affinity
uh-fin-i-tee
A suite of perpetual-license creative software developed by UK-based Serif, now acquired by Canva. Its three main products are Photo (photo editing), Designer (vector), and Publisher (DTP). Noted as an Adobe alternative.
Example
Used by professionals seeking an alternative to Adobe's subscription model.
GIMP
gimp
A free, open-source image editing software that offers functionalities similar to Photoshop. Available for Windows/Mac/Linux.
Example
A choice for those who want to do serious image editing without spending money.
Sketch
sketch
A UI design tool exclusively for Mac, developed by Sketch B.V. (Netherlands). Was the standard for UI design before Figma emerged. Lightweight and fast performance.
Example
Used by macOS users to design app UIs.
Inkscape
ink-skayp
A free, open-source vector graphics editor. Can be used as an alternative to Illustrator. Natively supports the SVG format.
Example
Used when you want to create SVG data for logos or icons for free.
Browsers and Search Engines
Browser
BROW-zer
A software application used to view websites. It interprets HTML code and displays the content on your screen. It's different from a search engine (a browser is for viewing, a search engine is for finding content).
Example
Chrome, Safari, Edge, and Firefox are browsers. Google Search is a search engine.
Google Chrome
GOO-gl KROHM
A web browser developed by Google, holding approximately 65% of the global market share. It features fast performance thanks to its V8 engine and offers a wide range of extensions. Its default search engine is Google Search.
Example
Available on Windows, Mac, and smartphones. It has powerful developer tools.
Safari
suh-FAH-ree
A web browser developed by Apple. It comes pre-installed on iPhones, iPads, and Macs, making it the default browser for Apple users. It utilizes the WebKit engine.
Example
The default browser on iPhone. Known for its low battery consumption.
Microsoft Edge
MY-kroh-soft EJ
Developed by Microsoft based on Chromium. It comes pre-installed on Windows 10 and 11. A key feature is its integration with Bing AI (Copilot). It is the successor to Internet Explorer.
Example
The browser that comes pre-installed with Windows. The Copilot button allows instant AI interaction.
Firefox
FY-er-fox
An open-source web browser developed by the Mozilla Foundation. It offers strong privacy protection features and uses its own Gecko engine.
Example
Popular among users who prioritize anti-tracking features and web developers.
Google Search
GOO-gl SERCH
The world's largest search engine, operated by Google, with approximately 92% market share. Its crawlers traverse the web to build an index. It also includes new features like AI Overviews.
Example
You can search from google.com or the address bar in Chrome.
Bing
BING
A search engine operated by Microsoft. It integrates Copilot (formerly Bing Chat) and pioneered AI search features. It is the default search engine for Microsoft Edge.
Example
When you search in the Edge browser or through Copilot, Bing is used.
Yahoo! Search
YAH-hoo SERCH
Operated by LINE Yahoo! in Japan. The core search engine technology is powered by Google. It's characterized by its integration with news and Q&A services, holding a high market share in Japan.
Example
Searching from the Yahoo! JAPAN homepage. It remains popular with older users.
Difference between a Browser and a Search Engine
DIF-er-ens bi-TWEEN uh BROW-zer and uh SERCH EN-jin
A browser is an application for 'viewing' websites. A search engine is a service for 'finding' websites. Chrome is a browser, and Google Search is a search engine. They are distinct but often confused.
Example
You can use Google Search within the Chrome browser, or Yahoo! Search within the Safari browser. The combination is flexible.
Now that you know the terms, try them out!
Our prompt library lets you preview and copy the technologies you just learned about.
Browse prompts →