Save
Busy. Please wait.
Log in with Clever
or
show password
Forgot Password?
Don't have an account?  Sign up 
Sign up using Clever
or
Username is available taken
show password


Make sure to remember your password. If you forget it there is no way for StudyStack to send you a reset link. You would need to create a new account. Your email address is only used to allow you to reset your password. See our Privacy Policy and Terms of Service.

Already a StudyStack user? Log In

Reset Password
Enter the associated with your account, and we'll email you a link to reset your password.
focusNode
Didn't know it?
click below
 
Knew it?
click below
Don't Know
Remaining cards (0)
Know
0:00
edit
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

  Normal Size     Small Size show me how

CSS - Week 4

WTWD 210 - CSS

TermDefinitionExample
Bootstrap An open-source framework for building responsive, mobile-first web apps. It provides CSS & JavaScript tools for layouts, forms, buttons, navigation, etc. Features a 12-column grid system, pre-designed components, and responsive utility classes. <link href=" rel="stylesheet">
Container A responsive fixed-width or fluid-width container that centers the content and provides padding. <div class="container">
Grid System A responsive mobile-first grid system that scales up to 12 columns as the device or viewport size increases. <div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div>
Row A horizontal group of columns in the Bootstrap grid system. Rows must be placed within a .container or .container-fluid for proper alignment and padding. <div class="row">
Column The building blocks of the Bootstrap grid system. Columns are defined by classes like .col- .col-sm- .col-md- .col-lg- and .col-xl- to span a certain number of grid columns. <div class="col">
Jumbotron A lightweight flexible component for showcasing hero unit style content. <div class="jumbotron">
Navbar A responsive navigation header that includes support for branding navigation and more. <nav class="navbar">
Button A component for triggering actions or submitting forms. Buttons come in various styles like primary secondary success danger etc. <button type="button" class="btn btn-primary">Primary</button>
Card A flexible content container that includes options for headers footers content images and more. <div class="card">
Modal A dialog box or popup window that is displayed on top of the current page. <div class="modal">
Form Components for creating responsive forms with various input elements validation states and layouts. <div class="form-group form-check"> <input type="checkbox" class="form-control form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div>
Responsive Design An approach to web design that makes web pages render well on a variety of devices and window or screen sizes. It ensures that the content adapts smoothly and provides an optimal viewing experience across different devices. Using flexible grids flexible images and media queries to create a responsive layout.
Mobile-First Design A design strategy that starts with designing for mobile devices first and then progressively enhances the design for larger screens. This approach ensures a better experience on smaller screens and builds up from there. Writing base styles for mobile devices first and then adding media queries for larger screens.
Responsive Typography The practice of adjusting font sizes line heights and spacing to ensure text is readable and aesthetically pleasing on all devices. Using relative units and media queries for responsive typography.
Responsive Units Units like percentages (%) viewport width (vw) viewport height (vh) and relative units (em rem) that adapt to different screen sizes and resolutions. % vw vh em rem: width: 50vw; height: 50vh; border-radius: 25%; font-size: 2rem;
CSS Frameworks Pre-prepared libraries that make it easier to develop responsive web designs by providing pre-styled components and grid systems. Examples include Bootstrap Foundation and Bulma.
Viewport The user's visible area of a web page. It varies with the device (e.g. phone tablet desktop) and determines how content is displayed on different screen sizes. Setting the viewport meta tag for responsive web design. <meta name="viewport" content="width=device-width initial-scale=1.0">
Fluid Grid A grid system that uses relative units like percentages instead of fixed units like pixels to layout elements. It allows the grid to resize fluidly based on the viewport size. Creating a fluid grid with percentage-based widths. .container {width: 100%;}
Flexible Images Images that scale with the size of their container to prevent overflow and maintain the design's responsiveness. Using max-width to make images flexible. img { max-width: 100%; height: auto; }
Media Queries A CSS technique used to apply styles based on the result of one or more conditions such as screen width height resolution orientation and more. Media queries are fundamental to responsive design. @media
Breakpoint Specific points in a responsive design where the layout changes to accommodate different screen sizes. Breakpoints are defined using media queries. /* Tablet */ @media (min-width: 768px) { body { font-size: 18px; } } /* Desktop */ @media (min-width: 1024px) { body { font-size: 20px; } }
Orientation Refers to the mode in which a device is being held or viewed. The two primary orientations are portrait (vertical) and landscape (horizontal). Media queries can be used to apply styles based on the orientation of the device. @media (orientation: portrait) { ... } @media (orientation: landscape) { ... }
Resolution Refers to the number of pixels displayed on the screen. Higher resolution means more pixels which generally translates to clearer and more detailed images. Resolution can be defined in terms of pixels per inch (ppi) or dots per inch (dpi). @media (min-resolution: 300dpi) { ... }
Keyframes Defines intermediate steps in a CSS animation by specifying styles at certain points. Keyframes enable smooth transitions between states over a duration. The @keyframes rule creates animations by setting these intermediate "frames. @keyframes
Animation Name Specifies the name of the @keyframes animation. animation-name: example;
Animation Duration Specifies the length of time an animation should take to complete one cycle. animation-duration: 4s;
Animation Timing Function Specifies the speed curve of the animation. Common values include linear, ease, ease-in, ease-out, and ease-in-out. animation-timing-function: ease-in-out;
Animation Delay Specifies the amount of time to wait before starting the animation. The delay can be specified in seconds (s) or milliseconds (ms). animation-delay: 2s;
Animation Iteration Count Specifies the number of times an animation should be played. It can be a specific number or infinite for endless animations. animation-iteration-count: 3;
Animation Direction Specifies whether the animation should play forward, backward, or alternate between forward and backward cycles. Possible values are normal, reverse, alternate, and alternate-reverse. animation-direction: alternate;
Animation Fill Mode Defines styles before/after animation. Values: none, forwards, backwards, both. none: Default, no styles before/after. forwards: Keeps final keyframe styles after. backwards: Uses initial keyframe styles before. both: Applies forwards/backwards rules. animation-fill-mode: forwards;
Created by: ProfJordan
Popular Computers sets

 

 



Voices

Use these flashcards to help memorize information. Look at the large card and try to recall what is on the other side. Then click the card to flip it. If you knew the answer, click the green Know box. Otherwise, click the red Don't know box.

When you've placed seven or more cards in the Don't know box, click "retry" to try those cards again.

If you've accidentally put the card in the wrong box, just click on the card to take it out of the box.

You can also use your keyboard to move the cards as follows:

If you are logged in to your account, this website will remember which cards you know and don't know so that they are in the same box the next time you log in.

When you need a break, try one of the other activities listed below the flashcards like Matching, Snowman, or Hungry Bug. Although it may feel like you're playing a game, your brain is still making more connections with the information to help you out.

To see how well you know the information, try the Quiz or Test activity.

Pass complete!
"Know" box contains:
Time elapsed:
Retries:
restart all cards