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.
Search Bar
sərch bahr
An input field on a website that allows users to find specific information or content. Users type keywords into it, and relevant results from the site are displayed. It helps visitors efficiently navigate content on many websites, often located at the top or in a sidebar.
Example
The box at the top of an e-commerce site where you type in a product name you're looking for, or an input field on a news site to find a specific article.
Call to Action (CTA)
kawl too ak-shən (see-tee-ay)
An element on a website designed to prompt visitors to take a specific action, such as making a purchase, signing up, or learning more. It's usually presented as a prominent button or link, designed to grab the user's attention. CTAs are crucial for achieving a website's goals.
Example
A button that says 'Buy Now,' 'Sign Up for Free,' or 'Learn More,' or a link to 'Contact Us.'
Pagination
paj-uh-ney-shən
A navigation system that divides a large amount of content into multiple pages, allowing users to move between them. It typically appears as a set of numbers or links like '1, 2, 3... Next'. This helps organize and present content without overwhelming the user with too much information at once.
Example
The numbered links at the bottom of a blog post listing page or a search results page, showing 'Previous', '1', '2', '3', 'Next'.
Section
SEK-shun
A distinct, thematic grouping of content within a webpage. It helps organize related information under a common heading or purpose. Sections make a page more structured and easier for users to scan and understand.
Example
On a product page, the 'Features,' 'Specifications,' and 'Reviews' areas would each be considered different sections.
Card
KAHRD
A rectangular UI element that groups a concise piece of related information, often including an image, title, description, and sometimes a button. Cards are used to display multiple content items efficiently and make them easy to scan. They are often clickable to reveal more details.
Example
On a streaming service homepage, each movie or TV show thumbnail with its title and a brief description is presented as a card.
Accordion
uh-KOR-dee-uhn
A UI element that allows users to expand or collapse content sections with a click. It's commonly used to save space and organize large amounts of information, especially in FAQ sections or detailed settings. Users can reveal only the information they need at the moment.
Example
On a 'Frequently Asked Questions' page, clicking on a question title makes its answer appear, and clicking it again hides the answer. This interactive element is an accordion.
Form
FAWRM
A collection of input fields and controls that allows users to submit information to a website. It typically includes text boxes, dropdowns, radio buttons, and a submit button. Forms are essential for user interaction, such as signing up, logging in, or making a purchase.
Example
When you sign up for a new account, the page where you enter your username, email, password, and click 'Register' is a form.
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.
White Space
white space
White space is the empty area between design elements. It improves readability and helps draw attention to important content. Proper spacing creates balance and gives a polished, professional look.
Example
Adding enough space between a news headline and its body text makes the article easier to read.
Hero Section
hero section
The hero section is the large area at the top of a webpage that features a prominent image, video, or headline. Its purpose is to grab the visitor's attention and immediately communicate the site's value or purpose. It often includes a primary call-to-action (CTA) button.
Example
On a company homepage, the area with a stunning landscape photo in the background and a large 'Start Free Trial' button in the center is the hero section.
Card Layout
card layout
A card layout is a design technique where information is organized into small, self-contained boxes called cards. Each card typically contains an image, title, and brief description. This creates a highly scannable and organized appearance, ideal for displaying items like products or blog posts.
Example
On an e-commerce product listing page, each product's photo, name, price, and rating are neatly contained within its own card, arranged in a grid.
Footer
footer
The footer is the area at the very bottom of a webpage. It typically contains supplementary information like site maps, contact details, copyright notices, and links to social media. It is often consistent across all pages and serves as a secondary navigation aid.
Example
At the very bottom of a corporate website, you'll find the footer, which groups together links to the company profile, contact page, privacy policy, social media icons, and the copyright notice.
Header
(HED-er)
The top section of a webpage, typically containing the site's logo, navigation menu, and sometimes a search bar. It's designed to provide quick access to the site's branding and primary functions.
Example
When you open a website, the very top part showing the company logo and menu buttons is the header.
Sidebar
(SYDE-bar)
A vertical section positioned next to the main content of a webpage, typically on the left or right side. It's often used to display supplementary content like navigation links, advertisements, related information, or search filters.
Example
In an online store, the list of product categories or filtering options often displayed vertically on the left side of the page is a sidebar.
Container
(kuhn-TAY-ner)
In web layout, a container is a conceptual "box" used to group and organize related content or elements. It helps control the appearance of content by limiting its width, centering it, or applying padding, making the layout more readable and structured.
Example
On many websites, the main content is centered with white space on either side. The invisible box holding this centered content is a container.
Sticky Element
(STIK-ee EL-uh-ment)
An element that remains fixed in a specific position on the screen (e.g., at the top) even when the user scrolls down the page. This is commonly used to keep important information, like a navigation menu, constantly accessible.
Example
On a news website, if the navigation bar at the top of the page stays visible as you scroll down, that's a sticky element.
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.
Animation Library
an-uh-MAY-shun LIE-brer-ee
A collection of code that makes it easier to implement animations. Instead of creating animations from scratch, you can use pre-built functions to save time and achieve more complex movements. Popular examples include GSAP and Anime.js.
Example
I used an animation library to add a smooth spinning animation to the website's loading screen.
Scroll Trigger Animation
SKROHL TRIG-er an-uh-MAY-shun
A mechanism that starts an animation when the user scrolls to a specific position on the page. For example, an element might fade in or rotate when it reaches the center of the screen. This creates an interactive, motion-rich experience that responds to scrolling.
Example
On my portfolio site, I set up a scroll trigger animation where project images slide in as you scroll.
SVG Animation
S-V-G an-uh-MAY-shun
The technique of adding motion to images or shapes in SVG (Scalable Vector Graphics) format. It leverages the properties of vector graphics to create smooth movements like drawing lines, morphing shapes, or changing colors. It's well-suited for animating logos, icons, and illustrations.
Example
I implemented an SVG animation so that the company logo draws itself with lines when the page loads.
Particle Animation
PAR-ti-kul an-uh-MAY-shun
An animation where many small elements (particles) move like snow, sparks, or bubbles. Each individual particle has a simple movement, but together they create complex and attractive visual effects. It's often used for backgrounds or special effects.
Example
I added a particle animation to the background of the website's hero section, where particles twinkle and move like a starry sky.
Lottie Animation
LOT-ee AN-i-may-shun
A lightweight, high-quality animation format for web and mobile apps, created from Adobe After Effects vector animations. It uses JSON files to easily integrate complex animations.
Example
Used when you see a cute character animating on a website or a fancy effect appearing when you tap a button in an app.
Web Animations API (WAAPI)
web AN-i-may-shuns A-P-I (WAA-pee)
A native browser API that allows you to animate web elements using JavaScript. It provides a powerful way to control complex animation sequences and dynamic behaviors that might be challenging with CSS animations alone.
Example
Used when you need to orchestrate multiple elements animating together based on user interaction, or dynamically change the speed and direction of an animation programmatically.
Spring Animation
spring AN-i-may-shun
An animation style that mimics the natural movement of a physical spring. Elements don't just stop at their destination but might overshoot slightly and then settle, creating a more organic and smooth feel.
Example
Used when a button slightly compresses and then bounces back to its original size after being clicked, or when list items appear with a subtle "springy" bounce.
Motion Path Animation
MO-shun path AN-i-may-shun
An animation technique where an element moves along a predefined path. This allows for movement along complex curves or shapes, not just straight lines, creating more dynamic and expressive animations.
Example
Used when an icon follows a specific route on a map, or a website logo appears by tracing a wavy, curved path across the screen.
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`.
HTTP/HTTPS
H.T.T.P. / H.T.T.P.S.
The communication protocol used by web browsers and web servers to exchange information. HTTPS is a secure version of HTTP, adding encryption to ensure data safety during transmission. When a website address starts with `https://`, it means a secure connection is being used.
Example
When you enter your credit card details on an online shopping site, checking that the address bar starts with `https://` confirms your information is being sent securely.
Frontend
FRUNT-end
Refers to the part of a website or application that users directly interact with. It includes all the visual elements displayed on the screen, such as the layout, buttons, and forms. Technologies like HTML, CSS, and JavaScript are primarily used to build the frontend.
Example
The text, images, layout you see when browsing a website, and all the buttons or menus you click, are part of that website's frontend.
Backend
BAK-end
Refers to the hidden part of a website or application that operates behind the scenes and is not directly visible to users. It handles data processing, database interactions, and executing server-side logic. Programming languages like Python, PHP, or Node.js are commonly used for the backend.
Example
When you add items to a shopping cart or log in on an online store, processes like checking product availability or authenticating your user credentials are handled by the backend.
Database
DAY-tuh-base
A system designed to store and manage information in an organized way. Most dynamic content on websites, such as user profiles, product lists, or blog posts, is stored in a database. This allows for quick retrieval and updating of necessary information.
Example
When you search for various products on an online store or check your order history, all that information is retrieved from the store's database.
DOM
dahm
The DOM (Document Object Model) is a programming interface for HTML documents. It represents the page structure as a tree of objects that can be manipulated with scripting languages like JavaScript.
Example
Using `document.querySelector('.menu')` in JavaScript accesses the DOM to find the first element with the class 'menu'.
JSON
jay-sawn
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write, and easy for machines to parse and generate.
Example
A user profile API might return JSON like `{"username": "alice", "role": "admin"}`.
Ajax
ay-jaks
Ajax (Asynchronous JavaScript and XML) is a technique for updating parts of a web page without reloading the whole page. It allows web applications to send and receive data asynchronously.
Example
When you type in a search box and suggestions appear without refreshing the page, that's Ajax at work.
Git
git
Git is a version control system that tracks changes in files over time. It enables multiple developers to work on the same project without overwriting each other's work.
Example
With Git, you can create branches to experiment with new features, then merge them back when ready.
URL
you-are-el
A URL (Uniform Resource Locator) is the address of a resource on the internet, such as a web page, image, or file. It tells the browser where to find something and how to access it.
Example
In the URL `https://example.com/products?id=5`, the part after `?` is a query parameter that filters results.
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.
Keyword Research
key-werd ree-serch
The process of finding and analyzing the actual search terms people enter into search engines. It helps optimize website content to attract relevant search traffic by understanding what users are looking for.
Example
For a coffee bean website, you might research keywords like "best coffee beans," "how to brew coffee at home," or "organic coffee."
Backlink
bak-link
A link from one website to another website. Search engines view backlinks as "votes" for your content, and the more high-quality backlinks you have, the more trustworthy and authoritative your site appears, which can improve search rankings.
Example
If a well-known news site links to your blog post as a source, that's a valuable backlink for your site.
Meta Description
met-uh dis-krip-shun
A short summary of a web page's content that appears under the title (link) in search engine results. It's a crucial factor in convincing users to click, and a concise, compelling description can significantly improve click-through rates.
Example
The 2-3 sentence description shown just below the website's title in a Google search result is the meta description.
SERP (Search Engine Results Page)
surp (serch en-jin ree-zults payj)
The page displayed by a search engine after a user enters a query. It includes various forms of results like organic search listings, paid advertisements, and rich snippets. The goal of SEO is to achieve a high ranking on the SERP.
Example
When you type a query into Google and see a list of blue-linked titles and descriptions, that entire screen is a SERP.
CRO (Conversion Rate Optimization)
see-ar-oh (kun-ver-zhun rayt op-tuh-muh-ZAY-shun)
The process of increasing the percentage of website visitors who complete a desired goal, such as making a purchase, filling out a form, or signing up for a newsletter. This is achieved through user experience improvements and A/B testing.
Example
An e-commerce site redesigning its product page layout or changing the color of its "Buy Now" button to encourage more visitors to make a purchase is an example of CRO.
Content Marketing
/ˈkɒntɛnt ˈmɑːrkɪtɪŋ/
A strategic marketing approach focused on creating and distributing valuable, relevant, and consistent content to attract and retain a clearly defined audience — and, ultimately, to drive profitable customer action. It helps build trust and authority with your audience by providing useful information rather than direct sales pitches.
Example
A software company publishes a blog series about '10 Tips for Remote Work Productivity' to attract professionals, even though it doesn't directly sell their software in those posts.
Call to Action (CTA)
/kɔːl tə ˈækʃən/
An instruction to the audience designed to provoke an immediate response, usually using an imperative verb. It's a crucial element in marketing and web design to guide users toward a desired action, such as making a purchase, signing up for a newsletter, or downloading content.
Example
A prominent 'Buy Now' button on an e-commerce product page, a 'Sign Up for Free' link on a software trial page, or a 'Download Ebook' banner on a blog post.
Landing Page
/ˈlændɪŋ peɪdʒ/
A standalone web page, created specifically for a marketing or advertising campaign. It's where a visitor 'lands' after clicking on a link in an email, or ads from Google, YouTube, Facebook, Instagram, or similar places. Unlike regular web pages, landing pages are designed with a single goal: conversion.
Example
When you click on a 'Free Trial' ad for a software, the page you arrive at, dedicated solely to getting you to sign up for that trial, is a landing page. It typically has minimal navigation to keep you focused.
Organic Traffic
/ɔːrˈɡænɪk ˈtræfɪk/
Visitors who come to your website from search engine results without you paying for an advertisement. It is a key goal of SEO, indicating that your content ranks well naturally for relevant queries. This traffic is earned through effective optimization and high-quality content.
Example
A user searches 'how to make sourdough bread' on Google, clicks on a recipe blog that appears in the natural search results (not an ad), and visits that website. This visit contributes to the blog's organic traffic.
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.
JavaScript
JAV-uh-skript
A programming language used to add interactivity and dynamic behavior to web pages. It runs directly in web browsers and is essential for front-end development. Today it's also used for server-side programming and mobile app development.
Example
Used to make menus open/close when clicking buttons, validate form inputs, or dynamically update page content without reloading.
Go
GOH
A simple and fast programming language developed by Google. It excels at concurrency (running multiple tasks simultaneously) and is commonly used for backend development like web servers and cloud services. As a compiled language, it offers fast execution and easy dependency management.
Example
Well-suited for web API servers that need to handle many user requests simultaneously, or for systems using microservices architecture.
Rust
RUHST
A systems programming language that combines safety and speed. It guarantees memory safety while offering C++-level performance. Used in situations requiring high reliability, such as browser rendering engines, operating systems, and embedded systems.
Example
Adopted for major components of the Firefox web browser, blockchain technology, and high-performance WebAssembly development.
Kotlin
KOT-lin
A modern, concise programming language known as the officially recommended language for Android app development. It's fully compatible with Java while offering safer and more readable syntax. Also supports server-side development and web front-end.
Example
Widely used in Android smartphone app development, and adopted by major companies like Google, Uber, and Netflix for their apps.
CSS
See-Es-Es
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. It defines how elements should be displayed on screen, paper, or in other media, allowing designers to control the look and feel of web pages.
Example
You use CSS to change the background color of a webpage, set the font size of headings, or arrange elements into a multi-column layout.
Java
Jah-vuh
Java is a high-level, class-based, object-oriented programming language designed to have as few implementation dependencies as possible. It's widely used for building robust, scalable applications, including enterprise-level backend systems, Android mobile apps, and large data processing.
Example
Many large-scale web applications, such as those used by banks or social media platforms, use Java for their server-side logic. It's also the primary language for developing native Android applications.
Ruby
Roo-bee
Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write, and is widely known for its popular web framework, Ruby on Rails.
Example
You can use Ruby, especially with its Rails framework, to quickly build web applications like blogging platforms, e-commerce sites, or social networking services.
C#
See-Sharp
C# (pronounced "C-sharp") is a modern, object-oriented programming language developed by Microsoft. It's widely used for building Windows desktop applications, games with the Unity engine, and powerful web applications and APIs using the ASP.NET Core framework.
Example
You would use C# to create desktop applications for Windows, develop games in Unity, or build robust backend services and websites with ASP.NET Core.
C++
See-plus-plus
C++ is a high-performance, general-purpose programming language that extends the C language. It's used in various fields like system development, game development, and embedded systems. C++ supports object-oriented programming.
Example
C++ is often used to create the core engines of video games that require high performance, or parts of operating systems.
Swift
Swift
Swift is a modern, fast programming language developed by Apple. It's primarily used for developing applications for Apple products like iOS, macOS, watchOS, and tvOS. It's known for its safety features and readable syntax.
Example
When you develop a new app for iPhone or iPad, Swift is almost always the language you will use.
C
See
C is a highly influential, general-purpose programming language developed for system programming. It's commonly used to create foundational software like operating systems, embedded systems, and compilers. Its close interaction with hardware allows for very fast execution.
Example
A large portion of the Linux operating system kernel is written in C, contributing to its speed and efficiency.
R
Arr
R is a programming language and software environment specifically designed for statistical computing and graphics. It's widely used by data scientists and researchers to build complex statistical models and visualize data. It boasts a rich ecosystem of libraries.
Example
R is used to analyze the results of a large survey and visualize trends with graphs, helping researchers draw conclusions.
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.
Angular
ANG-gyoo-lar
Angular is a front-end framework developed by Google, ideal for building large-scale web applications. It's based on TypeScript and provides features like two-way data binding and dependency injection.
Example
Angular is commonly used when developing enterprise dashboards or complex SPAs (Single Page Applications).
Lodash
LOW-dash
Lodash is a JavaScript utility library that provides helpful functions for working with arrays, objects, strings, and more. It improves code readability and reduces repetitive tasks.
Example
You can use Lodash functions to easily remove duplicates from an array or create deep copies of objects.
Express
ex-PRESS
Express is a lightweight web application framework that runs on Node.js, simplifying server-side development. It provides routing and middleware mechanisms and is widely used for building REST APIs.
Example
You can use Express to build APIs for managing user registrations or product information.
Svelte
SVELT
Svelte is a modern front-end framework that takes a new approach by generating efficient code at compile time without using a virtual DOM. Developers write declarative code to create applications with minimal runtime overhead.
Example
Developing lightweight web apps with interactive forms and animations using Svelte results in better performance.
Component
kuhm-POH-nuhnt
A reusable, self-contained piece of UI that manages its own structure, style, and behavior. Components make code modular and easier to maintain.
Example
A button, a navigation bar, or a product card in a web app.
Single Page Application (SPA)
SING-guhl peyj ap-li-KAY-shun
A web app that loads a single HTML page and dynamically updates content without reloading. This provides a smooth, app-like experience.
Example
Gmail or Google Maps, where clicking links doesn't reload the whole page.
State Management
stayt MAN-ij-muhnt
A way to centralize and control the data (state) that flows through an application. It helps keep your UI consistent and predictable.
Example
Using Redux or Zustand to manage user login status across multiple components.
MVC (Model-View-Controller)
em-vee-see
A design pattern that splits an app into three parts: Model (data), View (UI), and Controller (logic). This separation makes code easier to manage.
Example
Ruby on Rails and Angular use MVC to organize their code.
Server-Side Rendering (SSR)
SUR-ver syde REN-der-ing
A technique where the server generates the full HTML for a page and sends it to the client. This improves initial load time and search engine optimization.
Example
Next.js and Nuxt.js support SSR out of the box.
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.
CDN (Content Delivery Network)
See-dee-en (Kon-tent De-li-very Net-work)
A distributed network of servers designed to deliver website content (like images, videos, and CSS files) to users quickly. It improves page load speeds and reduces the load on the main server by serving content from the server geographically closest to the user.
Example
An e-commerce site uses a CDN to store product images and videos. When a customer in Europe visits the site, the images are loaded from a nearby European server, making the site feel much faster than if they came from a server in the US.
DNS (Domain Name System)
Dee-en-es (Do-mayn Naym Sis-tem)
A system that translates human-readable domain names (e.g., example.com) into computer-readable IP addresses (e.g., 192.0.2.1). This allows users to access websites using easy-to-remember names instead of numerical addresses. It acts like the internet's "phonebook."
Example
When you type "amazon.com" into your web browser, DNS translates that domain name into the IP address of Amazon's servers, allowing your browser to connect to the correct server and display the website.
Load Balancer
Lohd Ba-lan-ser
A device or software that evenly distributes web traffic or network requests across multiple servers. This prevents any single server from becoming overloaded and improves the availability and responsiveness of web applications.
Example
During a flash sale, an e-commerce website might experience a massive surge in traffic. A load balancer ensures that these requests are distributed among several web servers, preventing any one server from crashing and allowing customers to continue shopping smoothly.
Kubernetes (K8s)
Koo-ber-net-ees (Kay-ayts)
An open-source system for automating the deployment, scaling, and management of containerized applications. It efficiently orchestrates containers across a cluster of machines (nodes), providing high availability and elasticity for applications.
Example
A development team uses Kubernetes to manage a complex application composed of many microservices. Kubernetes automatically handles where each microservice container runs, restarts failed containers, and scales services up or down based on demand, ensuring the application is always running smoothly.
Database
DAY-tuh-base
A database is an organized collection of data, stored and accessed electronically. It's used by websites and applications to persistently store user data, product information, or settings. It allows for efficient retrieval and management of information.
Example
An online store keeps all customer account details, order history, and product inventory status stored in a database.
Serverless Computing
SER-ver-less kom-PYOO-ting
Serverless computing is a cloud execution model where developers can build and run applications without managing servers. The cloud provider dynamically manages server provisioning and scaling. Code is executed in response to events, and you only pay for the compute resources consumed.
Example
When a user uploads a file, a small piece of code (like an AWS Lambda function) runs automatically to process that file without you needing to manage the underlying server.
API (Application Programming Interface)
AY-pee-eye
An API is a set of rules and protocols that allows different software applications to communicate with each other securely. It defines how one program can request specific services from another program and receive responses. This enables various services and applications to work together seamlessly.
Example
A weather app uses a weather service's API to fetch the latest weather data and display it to the user.
Firewall
FEYE-er-wawl
A firewall is a network security system that monitors and controls incoming and outgoing network traffic based on predetermined security rules. Its primary purpose is to protect a server or network from unauthorized access and malicious attacks. It acts as a barrier between a trusted internal network and untrusted external networks.
Example
Your home Wi-Fi router usually has a firewall that prevents suspicious connections from the internet from directly reaching your computer.
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.
Generative AI
juh-NEHR-uh-tiv AYE-eye
A type of artificial intelligence that can create new content, such as text, images, audio, or video, in a human-like manner. It learns from existing data and then generates original outputs by mimicking its patterns and styles.
Example
An AI that can create unique images from a text prompt or write summaries and poems is an example of generative AI.
Model
MOD-uhl
In the context of AI and machine learning, a model refers to the trained algorithm or system itself. It's like the "brain" that has learned patterns from data and can then make predictions or generate outputs on new data.
Example
The entire AI system that has been trained to identify whether a specific image contains a cat or a dog, or the AI system that generates images from text, is referred to as a model.
Training Data
TRAY-ning DAH-tuh
The information used to teach an AI model patterns and rules. The more and higher quality this data is, the better the model will perform.
Example
To train an AI to identify cats, thousands of images of cats labeled "this is a cat" would be needed as training data.
Inference
IN-fer-ens
The process where a trained AI model takes new, unseen data and uses it to make predictions, judgments, or generate content. This is when the model "thinks" or "acts."
Example
When you type a question into a chatbot and get a response, or when a facial recognition system identifies a person in a photo, the AI model is performing inference.
Hallucination
hal-loo-sin-AY-shun
When a generative AI model produces information that is false, nonsensical, or not grounded in its training data. The AI presents these fabrications with high confidence, making it crucial for users to verify its outputs.
Example
Asking an AI, "Who invented the light bulb?", and it confidently replies, "Nikola Tesla invented the light bulb in 1920," when the correct answer is Thomas Edison in 1879.
Embeddings
em-BED-dings
A way to convert words, phrases, or other data into a numerical vector (a list of numbers) that AI models can understand and process. This transformation allows AI to grasp relationships and similarities between different pieces of information.
Example
The words "dog" and "puppy" might be converted into numerical vectors that are very close to each other in a multi-dimensional space, indicating their strong semantic similarity to the AI.
Temperature
TEM-pr-uh-cher
A parameter in generative AI models that controls the randomness or creativity of the output. Higher temperature values result in more diverse, surprising, and sometimes erratic responses, while lower values make the output more focused, consistent, and predictable.
Example
When generating a creative story, you might set a high temperature to encourage imaginative and unique plotlines. For factual question-answering, a low temperature ensures more direct and accurate responses.
Guardrails
GARD-rayls
Safety mechanisms and rules put in place to prevent generative AI from producing inappropriate, inaccurate, or harmful content. They ensure that the AI's outputs remain within ethical boundaries and align with intended use.
Example
An AI assistant for healthcare might have guardrails set to prevent it from giving medical diagnoses or prescribing medication, instead directing users to consult a human doctor for such critical advice.
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.
Headless CMS
HED-less C-M-S
A content management system where the content repository (the "body") is decoupled from the presentation layer (the "head"). It allows you to create and manage content once and then deliver it to any frontend, like a website, mobile app, or IoT device. This offers great flexibility for developers to use their preferred frontend technologies.
Example
If you want to display the same blog posts on both your smartphone app and your website, a Headless CMS lets you manage the content in one place and distribute it to both.
No-Code Development
NOH-koad dev-EL-op-ment
A methodology for creating applications or websites using visual interfaces and drag-and-drop features, without writing any programming code. It empowers individuals with little to no technical knowledge to build their ideas into functional products. This approach often leads to faster development cycles and reduced costs.
Example
Building your own online store or portfolio website using a platform like Wix or Webflow, entirely through visual editors and without writing any code, is an example of no-code development.
Template
TEM-plit
A pre-designed layout or structure for a website or document. It provides a starting point, allowing users to efficiently create pages without designing everything from scratch. Templates often come with placeholder content and a specific aesthetic that can be customized.
Example
When starting a new blog on WordPress, you might choose a "business" or "portfolio" template, then customize its colors and images to fit your content.
Drupal
DROO-puhl
A powerful, open-source content management system (CMS). It is highly flexible and often used for building complex, large-scale websites and web applications with advanced features. Drupal is known for its strong security, scalability, and modularity.
Example
Large government websites, university portals, and major media sites often use Drupal. You can extend its functionality flexibly by adding various modules to meet specific needs.
Content Management System (CMS)
KONT-ent MAN-ij-ment SIS-tum
A software application used to create, edit, and manage digital content for websites. It allows users to build and maintain websites without needing deep programming knowledge.
Example
WordPress is a popular CMS widely used for blogs, business websites, and more, making content updates straightforward.
Page Builder
PAYJ BIL-der
A tool that allows users to visually create and customize the layout and design of web pages. It typically uses a drag-and-drop interface, enabling page construction without writing code.
Example
Using a page builder within your CMS, you can easily arrange image galleries, text blocks, and forms to create a custom-designed landing page.
Theme
THEEM
A collection of templates and stylesheets that define the overall appearance, design, and layout of a website. It allows you to change the visual presentation of your site without altering its content.
Example
If you want to refresh your blog's look, you can install and activate a new theme to instantly change its colors, fonts, and page structure.
Plugin
PLUG-in
A piece of software that adds specific features or functionality to an existing CMS or website. It allows you to extend the capabilities of your system without altering its core code.
Example
Installing an SEO plugin can help optimize your website for search engines, making it more likely to rank higher in search results.
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.
Creative Cloud
/kriˈeɪtɪv klaʊd/
Adobe's subscription service for its creative applications. It provides access to a suite of software like Photoshop, Illustrator, and Premiere Pro, along with cloud storage and services. It helps creatives manage their projects and assets across different devices.
Example
You subscribe to Adobe Creative Cloud to download and use Photoshop and Illustrator on your computer, and to save your design files online.
Layer
/ˈleɪər/
Layers are like transparent sheets stacked on top of each other in a design program. Each layer can hold different elements, such as text, images, or shapes, allowing you to edit them independently without affecting other parts of your design. This makes complex designs much easier to manage and modify.
Example
In Photoshop, you might put a background image on one layer, a photo of a person on another layer above it, and text on a top layer, so you can move or change the text without altering the photo or background.
Vector Graphics
/ˈvɛktər ˈɡræfɪks/
Vector graphics are images created using mathematical equations to define lines, curves, and shapes, rather than individual pixels. This means they can be scaled up or down to any size without losing quality or becoming pixelated, making them ideal for logos and illustrations.
Example
A company logo created in Illustrator is a vector graphic, ensuring it looks sharp and clear whether printed on a business card or displayed on a giant billboard.
Workspace
/ˈwɜːrkˌspeɪs/
A workspace in creative software refers to the arrangement of panels, tools, and windows on your screen. You can customize your workspace to suit your specific tasks, such as photo editing, video editing, or web design, making your workflow more efficient.
Example
In Premiere Pro, you might switch from an "Editing" workspace, which emphasizes your timeline and preview, to a "Color" workspace, which highlights color correction tools.
Raster Graphics (or Bitmap Image)
/ˈræstər ˈɡræfɪks/ (or /ˈbɪtˌmæp ˈɪmɪdʒ/)
An image format composed of a grid of individual dots called pixels. When enlarged, raster images can appear pixelated or blurry because the pixels are stretched. They are best suited for photographs and complex, detailed images.
Example
A photo taken with your smartphone or a photo manipulation created in Photoshop are typical examples of raster graphics.
Mask
/mæsk/
A tool used to hide or reveal parts of an image or layer without permanently deleting them. It allows you to control the visibility of specific areas, making parts transparent or visible. This is crucial for non-destructive editing in design.
Example
You would use a mask if you want to remove the background from a photo to show only the person, or to cut an image into a specific shape.
Artboard
/ˈɑːrtbɔːrd/
A configurable canvas or workspace within a design file where you create your designs. You can have multiple artboards in a single document, allowing you to design different pages of a website or various screens of a mobile app simultaneously. This greatly enhances workflow efficiency.
Example
You would manage the homepage and a sub-page of a website, or the login screen and profile screen of a mobile app, as separate artboards within one single file.
Gradient
/ˈɡreɪdiənt/
A visual effect that smoothly blends two or more colors into one another. It creates a gradual transition between colors, which can be used to convey depth, dimension, or a soft aesthetic. Gradients are widely used in various design elements like website backgrounds, logos, and illustrations.
Example
You might create a background that smoothly transitions from blue to purple, or from black to transparent, or use it to add a sense of depth to a button.
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.
Adobe Photoshop
uh-DOH-bee FOH-toh-shop
Adobe Photoshop is a professional image editing software widely used for photo editing and digital art creation. It features layers, filters, selection tools, and many other functions, making it suitable for everything from photo retouching to complex graphic design.
Example
Photoshop is commonly used to remove unwanted objects from photos, change backgrounds, or adjust color tones.
Adobe Illustrator
uh-DOH-bee ILL-uh-stray-tor
Adobe Illustrator is a professional design tool for creating and editing vector graphics. It is ideal for designing logos, icons, illustrations, and print materials, as graphics remain sharp and clear at any size without losing quality.
Example
Illustrator is often used to design company logos or create layouts for printed materials like business cards and brochures.
Procreate
PRO-cre-ate
Procreate is a powerful digital painting and illustration app for iPad. With an intuitive interface, extensive brush library, and layer support, it is ideal for artists and designers to create professional-quality work on a mobile device.
Example
Procreate is used to casually draw illustrations or create digital sketches on an iPad with an Apple Pencil, whether on a train or in a café.
Figma Mirror
FIG-muh MIRR-or
Figma Mirror is the official app that allows you to preview designs created in Figma in real time on a smartphone or tablet. It helps test and gather feedback on UI/UX designs by checking how they look and behave on actual devices.
Example
After designing a mobile app screen in Figma, you can use Figma Mirror to test tap and scroll interactions on your own iPhone while making adjustments.
Adobe XD
(uh-DOH-bee ex-dee)
A vector-based design tool by Adobe, specifically for UI/UX design and prototyping. It allows designers to create wireframes, design mockups, and interactive prototypes. It helps visualize the user experience for websites and mobile apps.
Example
You use Adobe XD to design the screen flow for a new mobile app, creating a prototype that shows animations when buttons are tapped.
Miro
(MEE-roh)
An online collaborative whiteboard platform designed for team collaboration. It's used for brainstorming, ideation, creating wireframes, visualizing user flows, and many other design processes. Teams can edit and interact in real-time.
Example
Your team uses Miro to brainstorm ideas for a new section of a website, organizing thoughts with sticky notes and diagrams on a shared board.
Zeplin
(ZEP-lin)
A collaboration tool that streamlines the design handoff process between designers and developers. It takes designs from tools like Figma or Sketch and automatically generates specifications (CSS code, assets, spacing information) needed for development. It helps bridge the gap between design and implementation.
Example
After a designer finishes a webpage layout, they upload it to Zeplin, allowing developers to easily inspect design specs, download assets, and get CSS snippets for implementation.
Webflow
(WEB-flow)
A no-code/low-code platform that allows users to design, build, and launch responsive websites without writing code. Designers can directly create visually stunning sites with a visual interface, adding interactions and animations. It blurs the lines between design and development.
Example
A marketing team needs to launch a new landing page quickly, so a designer uses Webflow to build and publish the site directly, without needing a developer to write code.
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.
URL Bar (Address Bar)
YOO-AR-EL bar / uh-DRESS bar
A rectangular input field at the top of the browser window where you type or see the web address (URL) of a site. It lets you go directly to any webpage.
Example
Typing 'https://www.example.com' and pressing Enter takes you to that website.
Bookmark (Favorite)
BOOK-mark / FAY-vuh-rit
A feature that saves a link to a website you visit often, so you can quickly return to it later. Some browsers call them 'favorites'.
Example
If you bookmark your favorite news site, you can open it with just one click without typing the URL every time.
Incognito Mode (Private Browsing)
in-KOG-ni-toh mode / PRY-vut BROW-zing
A special browsing mode that doesn't save your history, cookies, or other data on the device. It's useful on shared computers, but it doesn't make you completely anonymous.
Example
Using Incognito Mode at a public library prevents the next person from seeing your search history.
Homepage (Start Page)
HOHM-payj / start payj
The first web page you see when you open your browser or click the home button. You can set it to a site you visit often for quick access.
Example
If you check the news every morning, set your homepage to a news site so it loads immediately when you open your browser.
Autocomplete (Predictive Text)
AW-toh-kum-PLEET / pree-DIK-tiv tekst
A feature that automatically suggests possible completions as you type in the URL bar or search box, based on your history or common terms. It saves time and typing.
Example
Typing 'you' might bring up suggestions like 'YouTube' or 'Yahoo!' so you can select one and go there quickly.
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 →