Web glossary

Example

The part at the top of this site with the 'AIGP' logo and menu.

Example

The section at the very bottom of the page that says '© AIGP'.

Example

The menu section on the left side of an admin panel.

Example

HOME / Prompts / AOS.js Fade-in

Example

The three horizontal lines that appear in the top right corner when viewing a site on a smartphone.

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.

Example

On a blog post page, the wide central section displaying the article title, body text, and images is the main content area.

Example

On an online store's 'Computers' category page, the sub-menu showing 'Laptops', 'Desktops', and 'Accessories' is the local navigation.

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.

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.

Example

A button that says 'Buy Now,' 'Sign Up for Free,' or 'Learn More,' or a link to 'Contact Us.'

Example

The numbered links at the bottom of a blog post listing page or a search results page, showing 'Previous', '1', '2', '3', 'Next'.

Example

On a product page, the 'Features,' 'Specifications,' and 'Reviews' areas would each be considered different sections.

Example

On a streaming service homepage, each movie or TV show thumbnail with its title and a brief description is presented as a card.

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.

Example

When you sign up for a new account, the page where you enter your username, email, password, and click 'Register' is a form.

Example

When you see a website where the main content is centered with space on both sides, that content is often inside a container element.

Example

On a blog site, each individual blog post, including its title, author, body text, and publication date, would typically be marked up as an article element.

Example

When you click a "Login" button and a small box appears in the center of the screen, or when you click an image to view it larger and the background darkens, those are examples of a modal window.

Example

CSS frameworks like Bootstrap provide a grid system that divides the content area into 12 virtual columns, allowing designers to easily position elements within these columns.

Example

The set of links like "Home," "Services," and "Contact Us" often found at the top of a website is an example of navigation.

Example

The rotating display of new products or sale items on an online store's homepage is a carousel.

Example

On a company's website, a "Sitemap" page listing all major pages and their hierarchical relationship is a user-friendly sitemap.

Example

On an e-commerce site, when you hover over "Categories" in the global navigation, a list of subcategories like "Apparel" and "Electronics" appearing below it is a dropdown menu.

Example

On a news website's homepage, "Latest Articles" might be a large heading (H1 or H2). Below it, the title of each individual article would be a smaller heading (H3).

Example

In a blog post, three sentences describing a product's features are grouped together, forming a single paragraph.

Example

At the end of a blog post, you might see "Read more here," which, when clicked, takes you to the product's official page. This is a link.

Example

On a product description page, the "Features" section might show three bullet points, each describing a distinct feature. This is an unordered list.

Example

Within a blog post, a prominent green box appears with the text "Limited Time Offer!" to draw attention to a special promotion code for readers. This is a callout box.

Example

When you view this site on a PC and a smartphone, you'll notice the number of card columns changes.

Example

The section on the homepage where article cards are arranged in four columns.

Example

YouTube typically uses 16:9, while Instagram Stories often use 9:16.

Example

The gap around a card (margin) and the space between text and the border within a card (padding).

Example

You use Flexbox in a website's header to align the logo and navigation links horizontally and automatically adjust the spacing between them.

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.

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.

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.

Example

Adding enough space between a news headline and its body text makes the article easier to read.

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.

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.

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.

Example

When you open a website, the very top part showing the company logo and menu buttons is the header.

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.

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.

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.

Example

The row of links like "Home," "Products," "Categories," and "Cart" found at the top of an online store's website.

Example

The large image slideshow on an e-commerce homepage that showcases new products or sales promotions one after another.

Example

The small window that appears with a dimmed background and a form in the center when you click a "Sign Up" button on a website.

Example

The panel that slides out from the left side of the screen, revealing a list of links, when you tap the "hamburger menu" icon on a website viewed on a smartphone.

Example

On a website, displaying the main title in a large, bold font, a subtitle in a slightly smaller font, and body text in an even smaller font creates a visual hierarchy. Making an important button stand out with a bright color is another example.

Example

When you open a website's homepage, the hero section, company logo, main navigation menu, and a prominent call-to-action button that appear at the top of the screen are all "above the fold" content.

Example

When you're viewing a product page on an online store, the navigation displayed at the top of the page, such as "Home > Electronics > Televisions > 4K TVs > This Product," is a breadcrumb trail.

Example

On a website's FAQ page, when you click a question to reveal its answer and then click again to hide it, that's an accordion. Typically, a plus sign or a downward arrow icon is placed next to the question.

Example

When you visit a news website and see gray rectangles and lines outlining where text and images will appear, before the actual article content fully loads.

Example

On a website for a hiking trail, as you scroll down, the text and photos move quickly while a background image of mountains moves slowly behind them, creating a sense of three-dimensional space.

Example

On a very short page like a login screen, the footer with copyright information or contact details remains visible at the bottom of the screen without needing to scroll, filling the empty space.

Example

On a landing page with full-screen sections, when you scroll, the page automatically adjusts its position so that each section perfectly fills the entire screen, rather than stopping halfway.

Example

The effect where article cards gently appear as you scroll down the page.

Example

The main image section on shopping websites that automatically rotates.

Example

A website where the background image moves slowly as you scroll.

Example

The effect where a button's color deepens when you hover your cursor over it.

Example

The smooth sliding motion when a menu opens.

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.

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.

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.

Example

I used an animation library to add a smooth spinning animation to the website's loading screen.

Example

On my portfolio site, I set up a scroll trigger animation where project images slide in as you scroll.

Example

I implemented an SVG animation so that the company logo draws itself with lines when the page loads.

Example

I added a particle animation to the background of the website's hero section, where particles twinkle and move like a starry sky.

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.

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.

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.

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.

Example

When opening a news article, you see gray boxes for text and images before the actual content appears.

Example

The heart popping animation when you click a 'Like' button, a checkmark appearing on successful form submission, or a phone's unlock animation.

Example

A circular button morphing into a rectangular input field after being clicked, or an icon seamlessly changing into a different functional icon.

Example

A series of cards fading in from the top, one after another, or list items sliding in sequentially from the side.

Example

A spinning circle or a sequence of blinking dots displayed in the center of a webpage while data is being fetched.

Example

Tapping a product image in a list view, and watching that specific image smoothly expand and transition into the main image on the product detail page.

Example

Tapping a button on a smartphone, and a circular wave of light expands from the tap point, then fades away.

Example

When you click a button, it briefly bounces up and then returns to its original position — that's a bounce animation.

Example

As you scroll, each word of the heading fades in from left to right, one after another — that's a text reveal animation.

Example

When a card quickly slides out of view during a transition, and you see a subtle blur along its movement — that's motion blur.

Example

On a website, when you scroll and the background mountain image moves slowly while the text in front moves faster — that's parallax scrolling.

Example

Hover over a product card and it flips over to show the back side with details or reviews — that's a flip card animation.

Example

AIGP uses a REST API to retrieve blog data from WordPress.

Example

Making text red, rounding button corners, or adjusting spacing.

Example

The action of a menu opening when you click a button.

Example

Loading Swiper code from a CDN instead of hosting it on your own server.

Example

Adding slider functionality with `npm install swiper`.

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.

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.

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.

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.

Example

Using `document.querySelector('.menu')` in JavaScript accesses the DOM to find the first element with the class 'menu'.

Example

A user profile API might return JSON like `{"username": "alice", "role": "admin"}`.

Example

When you type in a search box and suggestions appear without refreshing the page, that's Ajax at work.

Example

With Git, you can create branches to experiment with new features, then merge them back when ready.

Example

In the URL `https://example.com/products?id=5`, the part after `?` is a query parameter that filters results.

Example

React, Angular, and Vue.js are popular frontend frameworks. They help developers build interactive user interfaces quickly and consistently.

Example

Most modern news websites or online stores use responsive design. Content displayed broadly on a desktop will automatically rearrange to a single-column layout on a smartphone for easier reading.

Example

When you type a website address into your browser, your request goes to a web server, which then sends the website's files back to your browser for display. Apache and Nginx are common web server software examples.

Example

When a new website is launched, developers deploy the finished code and files to a web server. This makes the site accessible to anyone with an internet connection.

Example

When building a website, you start by writing HTML tags like `<html>`, `<head>`, and `<body>` to define the page's structure.

Example

When you type "example.com" into your web browser, the domain name points to the correct web server, allowing the page to load.

Example

When you add items to a shopping cart on an online store and then navigate to a different page, the items remain in your cart because a cookie is storing that information.

Example

The logo or common images of a website you visit frequently are stored in your browser's cache, allowing them to load instantly on subsequent visits and reducing overall loading time.

Example

When you try to visit a website and see "404 Not Found," that's an HTTP status code telling you the server couldn't find the requested page.

Example

If you want a pop-up to appear when a button is clicked, you would attach an "event listener" to that button that "listens" for a click and then runs the function to show the pop-up.

Example

When you click a "Like" button on a social media site, the "Like" count updates without the entire page reloading. This happens because asynchronous communication is used to update the data in the background.

Example

When a user tries to log into a website, a middleware function might first receive the request, check the user's authentication credentials, and only allow the request to proceed to the next step if they are valid.

Example

You are likely using a browser like Google Chrome, Mozilla Firefox, or Safari right now to view this page.

Example

A developer might open a terminal and type `npm install` to install necessary libraries for a project.

Example

When you view a website on a smartphone, the screen size of that phone acts as the viewport, and the content adjusts to fit within it.

Example

You might set an environment variable like `DATABASE_URL` or `API_KEY` so your application can access these values without hardcoding them, making your application more secure and configurable.

Example

When you log into a website by entering your email and password, you are going through an authentication process to prove your identity.

Example

Making your site appear on the first page when someone searches for 'Swiper slider'.

Example

Improving the ranking of a local coffee shop in Google Maps when someone searches for 'cafe near me'.

Example

Having your website's information cited in Google Search's AI Overview feature.

Example

Your article being cited when someone asks ChatGPT 'What are the best CSS libraries?'

Example

Your explanatory article appearing as a source when a technical question is asked on Perplexity.

Example

The thumbnail image that appears when you send a URL in a messaging app like WhatsApp.

Example

The star ratings or step-by-step instructions that appear in Google search results are thanks to JSON-LD.

Example

If someone signs up for a recommended tool via your link, you, as the referrer, receive a commission.

Example

For a coffee bean website, you might research keywords like "best coffee beans," "how to brew coffee at home," or "organic coffee."

Example

If a well-known news site links to your blog post as a source, that's a valuable backlink for your site.

Example

The 2-3 sentence description shown just below the website's title in a Google search result is the meta description.

Example

When you type a query into Google and see a list of blue-linked titles and descriptions, that entire screen is a SERP.

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.

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.

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.

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.

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.

Example

In HTML, you might write `<img src="cat.jpg" alt="Brown cat sleeping on a sofa">`.

Example

You'd place `<link rel="canonical" href="https://example.com/preferred-page/">` in the `<head>` section of your HTML.

Example

You'd typically place an `sitemap.xml` file in your site's root directory and submit it to Google Search Console.

Example

When searching for a recipe, you might see star ratings, cooking times, or even an image directly in the search results.

Example

A website administrator uses a `robots.txt` file to prevent search engines from indexing administrative login pages or incomplete development pages.

Example

If a website loads slowly or its layout shifts unexpectedly when a user tries to click a button, its Core Web Vitals scores will be poor, potentially affecting its search ranking.

Example

If your website appeared in search results 100 times and was clicked 5 times, your CTR would be 5%.

Example

To find out which button color (red or blue) generates more clicks, you would conduct an A/B test by showing each version to different segments of your audience.

Example

An example of a long-tail keyword is 'best vegan gluten-free restaurants in Brooklyn.' This specific query helps attract users with very particular needs, rather than just searching for 'restaurants'.

Example

If a user clicks on an ad, lands on your product page, and then immediately closes the browser without clicking on anything else on your site, that counts as a bounce. A high bounce rate on that page might mean the ad or page content needs optimization.

Example

In a blog post about 'healthy recipes,' adding links to other posts like 'protein-rich snacks' or 'vegan meal prep' within your own blog is an example of internal linking. This guides users to related content and helps search engines discover more of your site.

Example

For an e-commerce site, the funnel might be 'website visit' → 'product view' → 'add to cart' → 'checkout process' → 'purchase complete'. By analyzing how many users proceed through each stage, you can identify bottlenecks and improve the conversion rate.

Example

Written like `<h1>Title</h1><p>Body</p>`.

Example

WordPress themes and plugins are written in PHP.

Example

Writing `const age: number = 25;` will cause an error if you try to assign a string, telling you immediately.

Example

ChatGPT and Stable Diffusion are built with Python.

Example

`SELECT * FROM users WHERE age > 20;` retrieves a list of users older than 20.

Example

Used to make menus open/close when clicking buttons, validate form inputs, or dynamically update page content without reloading.

Example

Well-suited for web API servers that need to handle many user requests simultaneously, or for systems using microservices architecture.

Example

Adopted for major components of the Firefox web browser, blockchain technology, and high-performance WebAssembly development.

Example

Widely used in Android smartphone app development, and adopted by major companies like Google, Uber, and Netflix for their apps.

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.

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.

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.

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.

Example

C++ is often used to create the core engines of video games that require high performance, or parts of operating systems.

Example

When you develop a new app for iPhone or iPad, Swift is almost always the language you will use.

Example

A large portion of the Linux operating system kernel is written in C, contributing to its speed and efficiency.

Example

R is used to analyze the results of a large survey and visualize trends with graphs, helping researchers draw conclusions.

Example

Used to define UIs in a Flutter app or develop interactive parts of a website.

Example

Used to write data analysis logic in big data processing frameworks like Apache Spark, or to build high-performance web services.

Example

Used to create game logic in Roblox Studio or write custom scripts for applications like Adobe Photoshop Lightroom.

Example

A system administrator might use a Perl script to parse large log files, extract specific information, and generate reports automatically.

Example

You might write a Bash script to automatically compile your code, run tests, and deploy your application to a server with a single command.

Example

Parts of an operating system's kernel, device drivers, or programs for embedded systems where direct hardware manipulation and extreme optimization are required might be written in assembly.

Example

Engineers might use MATLAB to simulate a complex control system, analyze sensor data from an experiment, or develop image processing algorithms.

Example

Fortran is still widely used in supercomputing for tasks like weather forecasting, computational fluid dynamics, and finite element analysis.

Example

Early AI systems, such as expert systems and natural language processing applications, were often developed using Lisp due to its symbolic processing capabilities.

Example

Haskell is used in areas requiring high reliability and correctness, such as financial analysis, parsing, web servers (e.g., Yesod framework), and compiler construction.

Example

Used by Instagram, Netflix, and Airbnb. This AIGP site is also React-based.

Example

This AIGP site is built with Next.js 16.

Example

Often chosen for quickly building internal tools and admin panels.

Example

`class="text-lg font-bold text-blue-600"` results in large, bold, blue text.

Example

`$('.menu').slideToggle();` creates a slide-in/out animation for a menu.

Example

Commands like `npm install` and the Next.js development server run on Node.js.

Example

Angular is commonly used when developing enterprise dashboards or complex SPAs (Single Page Applications).

Example

You can use Lodash functions to easily remove duplicates from an array or create deep copies of objects.

Example

You can use Express to build APIs for managing user registrations or product information.

Example

Developing lightweight web apps with interactive forms and animations using Svelte results in better performance.

Example

A button, a navigation bar, or a product card in a web app.

Example

Gmail or Google Maps, where clicking links doesn't reload the whole page.

Example

Using Redux or Zustand to manage user login status across multiple components.

Example

Ruby on Rails and Angular use MVC to organize their code.

Example

Next.js and Nuxt.js support SSR out of the box.

Example

When building a large web application, you would use Webpack to combine all your separate JavaScript and CSS files into a single, optimized bundle for faster loading in production.

Example

If you write JavaScript using `async/await` or other new syntax, Babel will convert it into a form that older browsers, like Internet Explorer, can understand and execute.

Example

To make a button look professional and responsive, you can simply add Bootstrap classes like `btn` and `btn-primary` to your HTML button element, instead of writing custom CSS.

Example

When starting a new React project, using Vite with `npm create vite@latest` allows your development server to launch in seconds and reflect code changes almost instantly, making development much smoother.

Example

You might use Redux to store whether a user is logged in, the items in a shopping cart, or theme preferences, making this data accessible from any component.

Example

If you're building a content-heavy website like a blog or a news portal, Nuxt.js can help you create an SEO-friendly and fast-loading application with ease.

Example

You'd use NestJS to build the backend for a complex web application, such as an e-commerce platform's API or a real-time chat service, benefiting from its structured modules and dependency injection.

Example

If you want to quickly add a modern, consistent design to your web application, you can use MUI components like `Button`, `TextField`, or `AppBar` to create a professional look with minimal effort.

Example

For example, running `npm install react` in the terminal downloads the React library so you can use it in your project.

Example

For example, using React Router, visiting `/home` shows the home page, while `/about` shows the 'About Us' page.

Example

For example, in React, the `useEffect` hook lets you fetch data when the component first appears on screen.

Example

For example, managing shopping cart item counts or user login status in a Vuex store makes it easy to access and update from any page.

Example

For example, running `npx create-react-app my-app` in the terminal automatically creates a basic React project folder structure.

Example

Providers like HostGator, Bluehost, or SiteGround.

Example

This AIGP Next.js site runs on Docker on an Xserver VPS.

Example

Used by major global companies like Netflix, Nintendo, and NASA.

Example

`docker compose up` starts your development environment with a single command.

Example

With GitHub integration, code updates are reflected on the production site in seconds.

Example

Just putting it in front of your site can significantly speed it up and enhance security.

Example

The padlock icon in your browser's address bar is proof of SSL/HTTPS secure communication.

Example

Placing nginx in front of Next.js on a VPS to handle SSL processing and caching.

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.

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.

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.

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.

Example

An online store keeps all customer account details, order history, and product inventory status stored in a database.

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.

Example

A weather app uses a weather service's API to fetch the latest weather data and display it to the user.

Example

Your home Wi-Fi router usually has a firewall that prevents suspicious connections from the internet from directly reaching your computer.

Example

When you visit a website like Google, your browser translates "google.com" into Google's IP address (e.g., 142.250.199.46) to find and connect to its server.

Example

A developer uses SSH from their local computer to connect to a remote server, allowing them to securely edit files, run programs, or manage the server's configuration.

Example

Using services like AWS or Google Cloud Platform to host a website, store large amounts of data, or run complex applications without owning any physical servers is an example of cloud computing.

Example

When you add an item to your cart on an online store, the backend processes and stores this information on its server and database, managing inventory and preparing for the order.

Example

When you type "google.com" into your browser, a Google web server sends back the search engine's homepage to your computer. Common web server software includes Apache and Nginx.

Example

Linux (like Ubuntu or CentOS) is the most common OS used for web and database servers. Windows Server is another option.

Example

After developing a new feature for your blog, like a "publish post" button, you would deploy the new code to your production server so users can start using it.

Example

If a popular website suddenly gets a huge influx of visitors, a scalable server setup (e.g., distributing the load across multiple servers) can prevent the site from slowing down or crashing.

Example

On one powerful physical server, you could run a Linux VM for your web server and a Windows VM for your database server, both operating independently without interference.

Example

When users access a website, the reverse proxy receives the initial request and forwards it to the least busy web server, improving website response times and preventing server overload.

Example

When a developer pushes code to a repository, the CI/CD pipeline automatically builds the code, runs tests, and if successful, deploys it to the production server.

Example

Images and data from a frequently accessed webpage are stored on a cache server. The next time the same page is requested, the images are served from the cache server instead of the origin server, making the display faster.

Example

ChatGPT (GPT-4), Claude, Gemini, DeepSeek, etc.

Example

A prompt could be 'Create an infinite loop slider using Swiper.'

Example

An internal chatbot that searches company documents before answering questions.

Example

Customizing a general GPT model to become a specialized AI strong in medical terminology.

Example

Inputting 'dragon and girl' automatically generates an illustration.

Example

DeepSeek is remarkably cheap at $0.14 per 1 million tokens.

Example

An AI that can create unique images from a text prompt or write summaries and poems is an example of generative AI.

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.

Example

To train an AI to identify cats, thousands of images of cats labeled "this is a cat" would be needed as training data.

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.

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.

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.

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.

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.

Example

The ability of AI like ChatGPT to generate human-like text is largely due to the Transformer architecture.

Example

Improving a prompt from "draw a summer landscape" to "create an Impressionistic painting of a serene summer sunset over a lavender field in Provence with a small cottage" is an example of prompt engineering.

Example

Many AI systems that generate highly realistic images of non-existent human faces or realistic landscapes are built using GAN technology.

Example

RLHF played a crucial role in training models like ChatGPT to avoid generating harmful or inappropriate content and to produce more natural and helpful conversational responses.

Example

A service where you upload a photo and ask 'What is this?' in text, and the AI describes the image, is an example of a multimodal AI.

Example

Stable Diffusion and DALL-E are image generation AIs that use diffusion models to create beautiful images from text prompts.

Example

An AI that can learn to distinguish cats from dogs after seeing only 3 labeled photos (e.g., 'This is a cat, this is a dog') is an example of few-shot learning.

Example

A prompt like 'First write a summary of A, then use that summary to create a comparison with B' chains prompts together to generate a detailed report.

Example

In image generation AIs, features like 'smile' or 'hair color' correspond to specific directions in latent space, allowing you to edit images by moving along those directions.

Example

If you want to summarize a very long article, and it exceeds the context window, the model might miss crucial information because it can't "see" the entire text at once.

Example

When a user searches for "cat images," a vector database can quickly find visually similar images like "kittens" or "tigers" by comparing their embeddings.

Example

A model trained only to identify cat images that can correctly classify "dog images" when simply told to do so, without ever being shown dog images during training, demonstrates zero-shot learning.

Example

When integrating an AI chatbot into a website, a developer uses the AI model's API to send user messages to the AI and receive its responses.

Example

Used by the White House, SONY Music, BBC News, and many more.

Example

Popular for personal portfolios and small business websites.

Example

Often used for small personal sites or local businesses that need quick setup.

Example

Commonly used by startups and designers for portfolios, particularly in Japan.

Example

Used by Nike, Supreme, and many D2C brands globally.

Example

Popular for portfolios, restaurants, and wedding websites.

Example

Chosen by designers who want to create 'pro-quality sites without code.'

Example

Used for event announcements, campaign LPs, or simple online business cards.

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.

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.

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.

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.

Example

WordPress is a popular CMS widely used for blogs, business websites, and more, making content updates straightforward.

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.

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.

Example

Installing an SEO plugin can help optimize your website for search engines, making it more likely to rank higher in search results.

Example

WordPress's modern editor is an example of a block editor, where you add paragraphs, images, and buttons as individual blocks and arrange them freely to build a page.

Example

Many CMS platforms include built-in SEO features like editing page titles and meta descriptions, keyword analysis, and sitemap generation.

Example

In many site builders like Wix or Squarespace, you use a drag-and-drop editor to add images to a gallery or move a text block to the sidebar.

Example

If you want your website to be accessible at an address like "mycompany.com" instead of a generic one, that's a custom domain. Setting it up enhances your brand image.

Example

To get your blog online, you'll need to subscribe to a web hosting service that provides space for your website files.

Example

Before launching an e-commerce site, you must install an SSL Certificate to protect customer payment information and build trust.

Example

After logging into the WordPress admin panel, I can upload new images, publish a blog post, or update the website's security settings.

Example

When you write a new blog post in WordPress, you use its content editor to type text, add images, and format your headings before publishing.

Example

When writing a blog post, you click a "bold" button, and the text immediately appears bold in the editor, just as it will on your live website.

Example

Using an SSG like Hugo or Jekyll, you write your content in Markdown, and the SSG converts it into a set of plain HTML files that you can then upload to any web server to publish your website.

Example

In a blog, an "Administrator" might have full control, an "Editor" can write and publish posts, and a "Contributor" can write posts but needs an editor to publish them.

Example

Shopify and WooCommerce (a WordPress plugin) are examples of e-commerce platforms that provide everything from displaying products to processing sales, payments, and shipping.

Example

Almost all design and video production companies use Adobe products.

Example

Removing backgrounds from product photos, enhancing skin, creating banner images.

Example

Creating company logos, business cards, posters, and packaging designs.

Example

It was previously used for creating wireframes and prototypes for web and app interfaces.

Example

Editing high-quality YouTube videos, corporate promotional videos, and movie trailers.

Example

Creating title animations, explosion effects, and infographic videos.

Example

Batch-correcting 100 travel photos to unify their color tones.

Example

Creating layouts for a 100-page product catalog or magazine.

Example

You subscribe to Adobe Creative Cloud to download and use Photoshop and Illustrator on your computer, and to save your design files online.

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.

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.

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.

Example

A photo taken with your smartphone or a photo manipulation created in Photoshop are typical examples of raster graphics.

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.

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.

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.

Example

Using the Pen Tool to trace the exact outline of a product for a clean cutout in a catalog image.

Example

Selecting a harmonious color palette of earthy tones for a nature-themed brochure to evoke a calm and organic feeling.

Example

After finishing a video in Premiere Pro, 'exporting' it as an MP4 file so it can be uploaded to YouTube or shared with clients.

Example

Ensuring a photograph intended for a large billboard print has a high 'resolution' (e.g., 300 DPI) to prevent it from looking blurry or pixelated when enlarged.

Example

In Photoshop, you might use a 'Multiply' or 'Overlay' blending mode on a texture layer above a photo to change its mood or add depth.

Example

In After Effects, to make text move across the screen, you set a keyframe for its starting position and another for its ending position, and the software generates the animation in between.

Example

When creating a logo in Illustrator, you use the Pen Tool to place anchor points at corners and curve apexes of a shape, then adjust them to precisely define its form.

Example

After creating multiple icons in Illustrator, you can align them to a vertical center and distribute them with equal spacing to achieve a professional layout.

Example

Making a watermark on a photo slightly transparent (e.g., 30% opacity) so it doesn't completely obscure the main image beneath it.

Example

Placing a company logo into a design as a Smart Object means you can resize it multiple times or apply filters without losing its sharpness or original quality.

Example

In Premiere Pro, you drag and drop video clips, background music, and transition effects onto the timeline to assemble and sequence your video project.

Example

Adding an 'Exposure' adjustment layer to lighten multiple photos in a composite image, ensuring you can fine-tune the brightness for all of them without permanently changing each photo's original pixels.

Example

Teams simultaneously designing and reviewing a website.

Example

Creating Instagram posts, presentation slides, or business cards using templates.

Example

Used by professionals seeking an alternative to Adobe's subscription model.

Example

A choice for those who want to do serious image editing without spending money.

Example

Used by macOS users to design app UIs.

Example

Used when you want to create SVG data for logos or icons for free.

Example

Photoshop is commonly used to remove unwanted objects from photos, change backgrounds, or adjust color tones.

Example

Illustrator is often used to design company logos or create layouts for printed materials like business cards and brochures.

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é.

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.

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.

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.

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.

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.

Example

I downloaded Krita to start practicing digital illustration and tried out different brushes to create a watercolor effect.

Example

I used Clip Studio Paint to draw my new manga, and its perspective ruler feature helped me accurately draw backgrounds.

Example

I used CorelDRAW to design my new company logo, and its vector tools allowed me to create a crisp logo that scales perfectly.

Example

You use Blender to create a complex 3D logo or a 3D product model that will be displayed on a website.

Example

You design a detailed product catalog or an annual report in InDesign to be published as a downloadable PDF document on a website.

Example

You prototype complex interactions in Framer, such as how elements react when a user clicks a button or drags a slider, to accurately convey the desired behavior to the development team.

Example

When a team brainstorms new website layouts, they use Mural to place sticky notes and shapes, visually sharing and organizing their ideas.

Example

To test a new gesture-based navigation flow for an app, you create a detailed prototype using ProtoPie that feels as if you're interacting with the actual app on a smartphone.

Example

For a set of product photos for a new website, you use Lightroom to adjust exposure, standardize colors, and apply a consistent visual style across all images.

Example

A UI/UX designer uploads their static screen designs to InVision, then links them together to create a clickable prototype that users can test and provide comments on.

Example

Before starting development on a complex e-commerce site, a UX architect uses Axure RP to design detailed wireframes, define user flows, and create a functional prototype for stakeholder approval.

Example

An architect uses SketchUp to quickly model a new building concept, visualizing its structure and interior spaces in 3D, and then presenting these models to clients for feedback.

Example

A product designer wants to show how a new mobile app feature animates when a button is tapped. They use Principle to create a smooth transition effect and micro-interaction for the prototype.

Example

Chrome, Safari, Edge, and Firefox are browsers. Google Search is a search engine.

Example

Available on Windows, Mac, and smartphones. It has powerful developer tools.

Example

The default browser on iPhone. Known for its low battery consumption.

Example

The browser that comes pre-installed with Windows. The Copilot button allows instant AI interaction.

Example

Popular among users who prioritize anti-tracking features and web developers.

Example

You can search from google.com or the address bar in Chrome.

Example

When you search in the Edge browser or through Copilot, Bing is used.

Example

Searching from the Yahoo! JAPAN homepage. It remains popular with older users.

Example

You can use Google Search within the Chrome browser, or Yahoo! Search within the Safari browser. The combination is flexible.

Example

Typing 'https://www.example.com' and pressing Enter takes you to that website.

Example

If you bookmark your favorite news site, you can open it with just one click without typing the URL every time.

Example

Using Incognito Mode at a public library prevents the next person from seeing your search history.

Example

If you check the news every morning, set your homepage to a news site so it loads immediately when you open your browser.

Example

Typing 'you' might bring up suggestions like 'YouTube' or 'Yahoo!' so you can select one and go there quickly.

Example

When your favorite news site loads instantly, it's often because your browser has stored its images in the cache.

Example

When you add items to an online shopping cart and then navigate to a different page, cookies ensure your items are still there when you return to the cart.

Example

When you type "weather Tokyo" into Google and see the page with weather forecasts and links to related sites, that's the SERP.

Example

An "ad blocker" that automatically hides advertisements, or a tool that instantly translates website languages, are examples of browser extensions.

Example

When you type "best pizza recipes easy" into Google, "best pizza recipes easy" is your search query.

Example

When you're browsing and want to visit a new website without closing the current one, you click the "+" icon at the top of your browser to open a new tab.

Example

If you forgot the name of a recipe website you visited last week, you can open your browser history to find it again.

Example

When you open Google's website, you'll see a small, colorful "G" icon in the browser tab. This is Google's favicon.

Example

Google, Bing, and Yahoo! Search are popular examples of search engines used worldwide.

Example

Google regularly updates its search algorithm to continuously improve the quality of the search results it provides.

Example

When a search engine's crawler discovers a new website, it analyzes its content and adds that information to its index.

Example

If you set Chrome as your default browser on Windows, clicking a website URL in an email will automatically open it in Chrome.

Example

When you're reading a long news article and want to focus without distractions, activating "Reader Mode" in your browser will strip away ads and extraneous elements, leaving just the text and images of the article.

Example

If you're tired of annoying pop-up ads or video commercials, installing an "Ad Blocker" on your browser will automatically hide these ads, allowing you to browse websites more smoothly.

Example

If you search for "web development site:developer.mozilla.org", you're using a search operator to find information about "web development" specifically within the Mozilla Developer Network website.

Example

The ability to access the same open tabs or bookmarks on your smartphone or tablet that you had on your home PC is thanks to "Browser Sync," which keeps your browsing data consistent across all your devices.