Frontend Development with HTML and CSS
Expert-defined terms from the Professional Certificate in Python Web Development course at Greenwich School of Business and Finance. Free to read, free to share, paired with a professional course.
Frontend Development #
Frontend development refers to the practice of creating the user interface and user experience of a website or web application. It involves using HTML, CSS, and JavaScript to design and build the visual elements that users interact with.
HTML (HyperText Markup Language) #
HTML is the standard markup language used to create the structure of web pages. It consists of a series of elements, such as tags and attributes, that define the content and layout of a webpage.
CSS (Cascading Style Sheets) #
CSS is a style sheet language used to control the presentation of HTML elements on a webpage. It allows developers to customize the appearance of text, images, and other elements on a website.
Web Development #
Web development encompasses all the tasks involved in creating a website or web application. This includes frontend development, backend development, and server-side scripting.
User Interface (UI) #
The user interface is the visual elements of a website or web application that users interact with. This includes buttons, menus, forms, and other interactive components.
User Experience (UX) #
User experience refers to the overall experience a user has when interacting with a website or web application. It includes factors such as usability, accessibility, and efficiency.
Responsive Design #
Responsive design is a design approach that ensures a website or web application looks and functions well on different devices and screen sizes. This includes desktops, laptops, tablets, and smartphones.
Grid System #
A grid system is a layout structure used in frontend development to organize content on a webpage. It consists of rows and columns that help developers align elements and create a visually appealing design.
Flexbox #
Flexbox is a CSS layout model that allows developers to design flexible and responsive layouts. It simplifies the process of aligning and distributing elements within a container.
Bootstrap #
Bootstrap is a popular front-end framework for building responsive websites and web applications. It provides pre-designed components, such as buttons, forms, and navigation bars, that developers can use to create a consistent design.
JavaScript #
JavaScript is a programming language used to add interactivity and dynamic behavior to websites. It is commonly used to create animations, validate forms, and interact with the browser.
DOM (Document Object Model) #
The DOM is a programming interface that represents the structure of a webpage as a tree of objects. It allows developers to manipulate the content, structure, and style of a webpage using JavaScript.
API (Application Programming Interface) #
An API is a set of rules and protocols that allows different software applications to communicate with each other. In web development, APIs are used to access data and functionality from external services.
HTTP (Hypertext Transfer Protocol) #
HTTP is the protocol used to transfer data over the web. It defines how messages are formatted and transmitted between a client (such as a web browser) and a server.
HTTPS (Hypertext Transfer Protocol Secure) #
HTTPS is a secure version of HTTP that encrypts data transmitted between a client and a server. It provides a secure connection and helps protect sensitive information.
SEO (Search Engine Optimization) #
SEO is the practice of optimizing a website to improve its visibility in search engine results. This includes using relevant keywords, creating high-quality content, and building backlinks.
Web Accessibility #
Web accessibility refers to the practice of designing and developing websites that are usable by people with disabilities. This includes making content perceivable, operable, and understandable for all users.
Progressive Web App (PWA) #
A PWA is a type of web application that uses modern web technologies to provide a native app-like experience. PWAs are fast, reliable, and engaging, and they work offline.
Single Page Application (SPA) #
An SPA is a web application that loads a single HTML page and dynamically updates the content as the user interacts with the application. This provides a seamless and responsive user experience.
Version Control #
Version control is a system that tracks changes to files and directories over time. It allows developers to collaborate on projects, track revisions, and revert to previous versions if needed.
Git #
Git is a distributed version control system used by developers to manage source code and track changes to files. It allows multiple developers to work on the same project simultaneously.
Github #
Github is a web-based platform for hosting and sharing Git repositories. It provides tools for collaboration, code review, and project management, making it easier for developers to work together.
Command Line Interface (CLI) #
A CLI is a text-based interface used to interact with a computer or software program. Developers use the command line to run scripts, execute commands, and navigate the file system.
Package Manager #
A package manager is a tool used to install, update, and manage software dependencies in a project. It simplifies the process of adding libraries and packages to a project.
Frontend Framework #
A frontend framework is a collection of pre-designed components, styles, and functionalities that developers can use to build websites and web applications. Examples include Bootstrap, Foundation, and Materialize.
Wireframe #
A wireframe is a visual representation of a webpage or application that shows the layout, structure, and content hierarchy. It helps designers and developers plan the user interface and user experience.
Prototype #
A prototype is a preliminary version of a website or web application that demonstrates the basic functionality and design. It is used to gather feedback and test ideas before moving to the development phase.
Mockup #
A mockup is a static design representation of a webpage or application that shows the visual elements and layout. It helps stakeholders visualize the final product before development begins.
Viewport #
The viewport is the visible area of a webpage within the browser window. It determines how content is displayed and scaled on different devices and screen sizes.
Meta Tags #
Meta tags are HTML elements that provide metadata about a webpage. They include information such as the page title, description, keywords, and character set.
Float #
Float is a CSS property that allows an element to be positioned to the left or right of its container. It is commonly used to create layouts with multiple columns.
Positioning #
Positioning is a CSS property that determines how an element is positioned within its container. It includes properties such as static, relative, absolute, and fixed.
Display #
Display is a CSS property that defines how an element is displayed on a webpage. It includes values such as block, inline, inline-block, and none.
Box Model #
The box model is a concept in CSS that defines how the padding, border, and margin of an element affect its size and layout. It consists of content, padding, border, and margin.
Media Queries #
Media queries are CSS rules that allow developers to apply styles based on characteristics of the device, such as screen size, resolution, and orientation. They are used to create responsive designs.
Viewport Units #
Viewport units are CSS units that represent a percentage of the viewport dimensions. They include vw (viewport width), vh (viewport height), vmin (minimum of vw and vh), and vmax (maximum of vw and vh).
Flex Container #
A flex container is an element that uses the flexbox layout model to organize its children in rows or columns. It includes properties such as display: flex and flex-direction.
Flex Item #
A flex item is a child element of a flex container that can be flexibly sized and positioned within the container. It includes properties such as flex-grow, flex-shrink, and flex-basis.
Grid Container #
A grid container is an element that uses the CSS Grid layout model to create a grid-based layout. It includes properties such as display: grid and grid-template-columns.
Grid Item #
A grid item is a child element of a grid container that is positioned within the grid layout. It includes properties such as grid-column and grid-row.
CSS Variables #
CSS variables are custom properties that can be defined and reused throughout a stylesheet. They provide a way to store and update values, such as colors and font sizes, in a centralized location.
Animation #
Animation is a technique used to add movement and transition effects to elements on a webpage. It can be created using CSS properties, such as transform, transition, and keyframes.
Transitions #
Transitions are CSS properties that control the smooth change of property values over a specified duration. They are used to create gradual effects, such as fading or sliding elements.
Transform #
Transform is a CSS property that allows developers to modify the appearance and position of an element. It includes functions such as translate, rotate, scale, and skew.
Vendor Prefixes #
Vendor prefixes are prefixes added to CSS properties to ensure compatibility with different browsers. They are used to implement experimental or proprietary features that are not yet standardized.
Web Font #
A web font is a font file that is downloaded and rendered by a web browser to display text on a webpage. It allows developers to use custom fonts that may not be available on all devices.
Responsive Images #
Responsive images are images that are optimized for different devices and screen sizes. They can be resized, cropped, or compressed to ensure fast loading times and a good user experience.
Accessibility #
Accessibility refers to the practice of designing websites and web applications that are usable by people with disabilities. This includes providing alternative text for images, using semantic HTML, and ensuring keyboard navigation.
SEO Best Practices #
SEO best practices are techniques used to improve the visibility of a website in search engine results. This includes optimizing meta tags, creating high-quality content, and building backlinks.
Debugging #
Debugging is the process of identifying and fixing errors in a website or web application. Developers use tools such as browser developer tools and code editors to diagnose and resolve issues.
Performance Optimization #
Performance optimization is the process of improving the speed and efficiency of a website. This includes minimizing file sizes, reducing HTTP requests, and caching resources.
Code Quality #
Code quality refers to the readability, maintainability, and efficiency of the code in a website or web application. It includes following best practices, writing clean code, and using consistent formatting.
Code Review #
Code review is the process of examining and evaluating code changes made by developers. It helps ensure code quality, identify bugs and issues, and share knowledge among team members.
Deployment #
Deployment is the process of making a website or web application available to users. It involves transferring files to a server, configuring settings, and testing the live version of the site.
Continuous Integration (CI) #
Continuous Integration is a development practice that involves automating the process of integrating code changes into a shared repository. It helps catch errors early, improve code quality, and streamline the development workflow.
Continuous Deployment (CD) #
Continuous Deployment is a development practice that involves automatically deploying code changes to a production environment. It helps reduce manual errors, increase deployment frequency, and deliver updates faster.
Responsive Web Design #
Responsive web design is an approach to web development that ensures a website looks and functions well on different devices and screen sizes. It involves using flexible layouts, media queries, and fluid grids.
Mobile #
First Design: Mobile-first design is a design approach that prioritizes designing for smaller screens, such as smartphones, before scaling up to larger screens. It helps create a better user experience for mobile users.
Fluid Layout #
A fluid layout is a design approach that uses percentages instead of fixed units to size elements on a webpage. This allows the layout to adapt and resize based on the screen size and device.
Grid Layout #
Grid layout is a design technique that uses a grid system to organize and align elements on a webpage. It provides a structured approach to creating responsive and visually appealing designs.
Accessibility Features #
Accessibility features are design elements and functionalities that make a website usable by people with disabilities. This includes features such as alt text for images, keyboard navigation, and screen reader compatibility.
Form Design #
Form design is the process of creating user-friendly and visually appealing forms on a website. This includes organizing fields logically, providing clear labels, and offering helpful feedback.
Modal Window #
A modal window is a dialog box that appears on top of the main content of a webpage. It is used to display important information, prompt users for input, or confirm actions.
CSS Reset #
A CSS reset is a set of CSS rules that removes default browser styling and ensures a consistent starting point for styling elements. It helps developers create a more predictable layout across different browsers.
Normalize.css #
Normalize.css is a CSS file that normalizes the default styles of HTML elements across different browsers. It ensures consistent rendering and behavior of elements, making it easier to style websites.
Frontend Performance #
Frontend performance refers to the speed and efficiency of a website's frontend code. It includes optimizing images, reducing HTTP requests, and minifying files to improve loading times.
Web Fonts #
Web fonts are custom fonts that are downloaded and rendered by a web browser to display text on a webpage. They allow developers to use a wide range of fonts that may not be available on all devices.
Web Accessibility Standards #
Web accessibility standards are guidelines and best practices for designing websites that are usable by people with disabilities. This includes following WCAG (Web Content Accessibility Guidelines) and ARIA (Accessible Rich Internet Applications) standards.
Code Optimization #
Code optimization is the process of improving the efficiency and performance of a website's code. This includes minimizing file sizes, reducing redundant code, and optimizing images.
Build Tools #
Build tools are software programs used to automate repetitive tasks in the development workflow. This includes tasks such as compiling code, optimizing assets, and running tests.
CSS Preprocessors #
CSS preprocessors are tools that extend the functionality of CSS by adding features such as variables, mixins, and functions. Examples include Sass, Less, and Stylus.
Responsive Design Frameworks #
Responsive design frameworks are collections of pre-designed components and styles that help developers create responsive websites. Examples include Bootstrap, Foundation, and Materialize.
Frontend Development Tools #
Frontend development tools are software programs used by developers to build, test, and optimize websites. This includes code editors, browser developer tools, and task runners.
Browser Developer Tools #
Browser developer tools are built-in tools that allow developers to inspect and debug websites in a web browser. This includes features such as the Elements panel, Console, and Network tab.
Code Editors #
Code editors are software programs used by developers to write and edit code. They provide features such as syntax highlighting, auto-completion, and code formatting to improve productivity.
Version Control Systems #
Version control systems are software tools used to track changes to files and directories over time. They allow developers to collaborate on projects, track revisions, and revert to previous versions.
Linting #
Linting is the process of analyzing code for potential errors, bugs, and stylistic issues. Linters are tools that help developers identify and fix problems in their code.
Task Runners #
Task runners are tools that automate repetitive tasks in the development workflow. This includes tasks such as compiling code, optimizing assets, and running tests.
Frontend Development Environment #
A frontend development environment is a setup that includes all the tools and resources needed to build websites. This includes code editors, browsers, developer tools, and task runners.
Responsive Design Principles #
Responsive design principles are guidelines for creating websites that work well on different devices and screen sizes. This includes using flexible layouts, media queries, and fluid grids.
Mobile #
First Approach: A mobile-first approach is a design strategy that prioritizes designing for smaller screens, such as smartphones, before scaling up to larger screens. It helps ensure a good user experience for mobile users.
Accessibility Guidelines #
Accessibility guidelines are recommendations for designing websites that are usable by people with disabilities. This includes following WCAG (Web Content Accessibility Guidelines) and ARIA (Accessible Rich Internet Applications) standards.
Frontend Development Best Practices #
Frontend development best practices are techniques and strategies for building high-quality websites. This includes following coding standards, optimizing performance, and testing across different devices.
Responsive Images Techniques #
Responsive images techniques are methods for optimizing images on a website for different devices and screen sizes. This includes using the srcset attribute, sizes attribute, and picture element.
Browser Compatibility #
Browser compatibility refers to the ability of a website to function correctly across different web browsers. This includes testing and optimizing the website for popular browsers such as Chrome, Firefox, and Safari.
Frontend Security #
Frontend security refers to the practice of protecting a website from common security threats. This includes preventing cross-site scripting (XSS) attacks, data breaches, and other vulnerabilities.
Responsive Typography #
Responsive typography is the practice of designing text to be readable and aesthetically pleasing on different devices and screen sizes. This includes using relative units, adjusting line heights, and choosing appropriate font sizes.
Frontend Performance Optimization #
Frontend performance optimization is the process of improving the speed and efficiency of a website's frontend code. This includes reducing file sizes, minimizing HTTP requests, and caching resources.
Responsive Design Patterns #
Responsive design patterns are reusable design solutions for creating flexible and adaptive layouts on a website. This includes patterns such as the Holy Grail layout, off-canvas navigation, and responsive tables.
Frontend Testing #
Frontend testing is the process of evaluating and validating the functionality and performance of a website's frontend code. This includes manual testing, automated testing, and cross-browser testing.
Progressive Enhancement #
Progressive enhancement is a design approach that starts with a basic version of a website and adds layers of functionality and design enhancements based on the capabilities of the user's device.
Graceful Degradation #
Graceful degradation is a design approach that starts