Michael Agnew Test 2 Review Guide Javascript and CSS
View linked note
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/63
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
64 Terms
Inline style
Places CSS declaration inside an element’s style attribute.
Embedded stylesheet
Places CSS rules in an HTML document’s head using a <style> element.
External stylesheet
Places CSS rules in a separate file that is imported into an HTML document with a <link> element.
Inline Stylesheet
styles are defined directly within an HTML tag using the style attribute.
Embedded stylesheet
Called upon in HTML file in between <script> tags
External stylesheet
stored in a separate .css file, which is linked to the HTML file using the <link> element in the <head> section.
Cascade
conflicting styles are resolved based on their order and importance.
Specificity
CSS rule is applied by assigning a selector type (element, class, ID, inline).
Inheritance
the process by which certain properties are passed down from parent elements to child elements.
Write CSS to change the font color of all <h1> elements to purple.
h1 { color: purple; }
Write CSS to change the background color of all elements with the class .highlight to yellow.
.highlight {
background-color: yellow;
}
Write CSS to change the text color of the element with the ID #footer to white and the background color to black.
#footer { color: white; background-color: black; }
Write CSS to remove all margins and padding from all elements on the page.
* { margin: 0; padding: 0; }
What is the universal selector?
* asterisk is the universal selector
Multiple selectors
Using a comma , to separate selectors, matches all listed elements to apply the same styles.
Child selector
using greater than > character, matches any elements where the second element is a direct child of the first element.
Color property
changes the text color
background-color
roperty specifies the background color, background-color: LightSkyBlue;
background-image
property specifies a background image, background-image: url('clouds.png');
display property
controls the layout of the element on a webpage.
CSS variable
a custom CSS property that defines a value.
Float properties
used to position elements to the left or right of their container, allowing text and inline elements to wrap around them.
Clear properties
used to prevent elements from wrapping around floated elements. It is often applied to an element following a floated element
box model
defines the layout and structure of an element as a rectangular box consisting of four areas: content, padding, border, and margin.
Text box model - div
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Image box model - img
img {
width: 100px;
padding: 10px;
border: 2px solid gray;
margin: 15px;
}
What is the purpose of CSS validation?
to make sure the CSS is following the correct syntax rules and ensure that your styles are correctly written and are compatible with all browsers.
website accessibility
The practice of making a website usable by people of all abilities and disabilities. The designing and developing of a website that can accessed and interacted with by everyone.
importance of considering website accessibility when developing a website?
Equal access, Wider audience reach, Better user experience, and Enhanced SEO and usability.
Common things to consider when addressing website accessibility?
Color contrast, Text alternatives, Clear and simple language, proper HTML, and Form Accessibility.
Website usability
crucial to create a functional website that helps have a better user experience and customer satisfaction and provides lasting value to visitors. Improve page load speed.
ways to test website usability?
Gather User’s feedback to understand users’ needs a preference.
Fluid layout
Use percentage-based widths, meaning elements resize relative to the browser window or viewport size.
Fixed layout
Use specific pixel values to set the width of elements, keeping them constant regardless of the screen size.
Flexbox
provides an efficient way to lay out elements in a container, so the elements behave predictably when the container is resized or viewed on different screen sizes.
purpose of a flexbox
Create a flexible, efficient way to arrange and align elements within a container. The layout can be dynamic or need to respond to different screen sizes.
Grid layout
Layout mode that divides a webpage into a rectangular grid in which to position page elements. Ideal for designing two-dimensional webpage layouts.
Four position properties
Static, Relative, Absolute, Fixed
Static
The default positioning for all elements.
Relative
positions the element relative to the element's default position.
Absolute
positions the element relative to the nearest positioned ancestor.
Fixed
positions the element relative to the viewport in a fixed location.
Viewport
the visible area of a webpage.
Top two mobile web browsers
Safari and Chrome.
mobile websites using three main techniques?
Seperate website, Dynamic Serving, and Responsive web design
Separate websites
Two different websites are created, one for desktop and one for mobile.
Dynamic Serving
The same URL is requested by both desktop and mobile web browsers.
Responsive web design
The web server sends back the same HTML to both desktop and mobile browsers.
Responsive
smoothly adjust the width of the container to fit the browser width.
Adaptive
adapts to the width of the browser at specific widths.
Screen emulator
Software tool that mimics the display, behavior, and functions of various devices, such as smartphones, tablets, or computers.
Media queries
apply different CSS styles depending on the screen width, height, resolution, orientation, and more.
Why are media queries used in web development?
to create responsive designs that adapt to different devices and screen sizes.
What is JavaScript?
High-level programming language for adding interactivity to web pages. Responds to user actions and changes content without page reloads.
what ways can you add JS to a website?
Inline, Internal, External
Document Object Model (or DOM)?
A data structure that represents all parts of an HTML document. The JavaScript object document represents the entire DOM and is created from the document's HTML
Inline
Inside HTML elements.
Internal
In <script> tags within HTML.
External
Linked .js file for reusable, organized code.
String
Text (e.g., "Hello").
Number
Numerical values (e.g., 42, 3.14).
Boolean
True or false (e.g., true, false).
Array
Ordered list of values (e.g., [1, 2, 3]).
Object
Collection of key-value pairs (e.g., {name: "John", age: 30}).
Flashcards (20)