HOME-hit-Refresh
week-9-quiz
modernize-craigslist
Trello
a/A Times
Catstagram

CSS and AJAX (Week 9) - Learning Objectives

Assessment Structure

Basic CSS (W09D1) - Learning Objectives

Basic CSS

  1. How to import other CSS files into your CSS file
@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');

@import 'other_styles.css';
  1. Explain how CSS rules are applied based on their order and specificity
<div id="main-header" class="header large on special otherClass">Some content here<div>

#main-header.large.on (1 ID, 2 classes, 0 tags)
  VS.
div#main-header.header (1 ID, 1 class, 1 tag, last read(lower in the file))
  1. Describe and apply element, id, and class selectors
h1 {
  (styles for all h1 elements)
}

#main-header{
  (styles to apply only to the element with the ID of "main-header")
}

.large {
  (styles to apply to all elements with the class "large")
}
  1. Write "combinators" to create compound selector statements to target specific elements
<ul>
  <li>First</li>
  <li>Second</li>
  <div>
    <h3>Puppy!</h3>
    <img src="puppy.jpg" />
  </div>
  <div>
    <li>Nested li</li>
    <li>Other nested li</li>
  </div>
</ul>
  1. Explain and apply pseudo selectors for specific elements in specific states (i.e. :hover)
<a href="https://google.com">Link</a>

a {
  color: #000fff;
  text-decoration: none;
}
a:hover {
  font-family: "Roboto Condensed", sans-serif;
  color: #4fc3f7;
  border: 2px solid #4fc3f7;
}
  1. Explain and apply the p { color: red }>::before and p { color: red }>::after pseudo elements, & Use the content CSS property to define the content of an element:
<h1>test</h1>

h1::before {
    background-color: rebeccapurple;
    border-right: 1px solid yellow;
    content: 'This is a...';
    margin-right: 4px;
    margin-left: 4px;
}
h1::after {
    background-color: lightblue;
    border-right: 1px solid violet;
    content: '...h1!';
    margin-right: 4px;
    margin-left: 4px;
}

pseudo-elements

  1. Style content on an HTML page targeting:
  1. Explain the generic font names "serif", "sans-serif", and "monospace" and correctly identify examples of each
  1. Explain why using Web fonts helps with consistent experience across viewing devices:
  1. Explain absolute and relative length units in CSS
  1. Demonstrate how to link a stylesheet into an HTML page
<link rel="stylesheet" href="file.css">
  1. Be able to calculate the specificity of CSS rules and determine which rule override the properties of another
  1. Use the p { color: red }>content CSS property to define the content of an element

AJAX (Asynchronous JavaScript and XML) (W09D2) - Learning Objectives

AJAX

  1. Explain what an AJAX request is
  1. Identifying the advantages of using an AJAX request.
  1. Identify what the acronym AJAX means and how it relates to modern Web programming
  1. Describe the different steps in an AJAX request/response cycle
  1. Fully use the fetch API to make dynamic Web pages without refreshing the page
// Using Promise chains for .then and .catch
document.querySelector('#downvote').addEventListener('click', () => {
  fetch('http://localhost:3000/kitten/downvote', { method: 'PATCH' })
    .then(handleResponse) // handleResponse defined below for reference
    .then(updateImageScore) // updateImageScore defined below for reference
    .catch(handleError); // handleError defined below for reference
});

// Using async/await
document.querySelector('#downvote').addEventListener('click', async () => { // Notice the async keyword on the callback definition!
// We create a standard try/catch block
  try {
    // We await each asynchronous function call
    const resJSON = await fetch('http://localhost:3000/kitten/downvote', { method: 'PATCH' });
    const resObj = await handleResponse(resJSON);
    // updateImageScore is synchronous, so we do not have to await its response
    updateImageScore(resObj);
  } catch (e) {
    handleError(e)
  }
});

// Functions used above, for reference
const handleResponse = (response) => {
  stopLoader();
  clearError();

  if (!response.ok) {
    throw response;
  }
  return response.json();
};

const handleError = (error) => {
  if (error.json) {
    error.json().then((errorJSON) => {
      document.querySelector('.error').innerHTML = `Error occured: ${errorJSON.message}`;
    });
  } else {
    console.error(error);
    alert('Something went wrong. Please try again!');
  }
};

const updateImageScore = (data) => {
  const { score } = data;
  document.querySelector('.score').innerHTML = score;
};

Media Queries, Positioning, and Layouts (W09D3) - Learning Objectives

Media Queries

  1. Identify the different types of media that a media query can target:
  1. Explain how the media features (and prefixed subfeatures) of "aspect ratio", "height", "orientation", and "width" are applied
html {
  background-color: white;
  color: #333333;
}

@media screen and (min-width: 301px) and (max-width: 600px) {
  html {
    background-color: #333333;
    color: white;
  }
}
  1. Use media queries to change the styles of content in an HTML page to achieve a desired effect
.product-index {
  display: flex;
}

.product-index__item {
  background-color: blue;
}

@media screen and (max-width: 300px) {
  .product-index {
    flex-direction: column;
  }
}

Layout and the Box Model

  1. Describe how:
  1. Identify elements rendered with specific padding and margin settings
  1. Apply padding and margins to HTML elements to achieve a desired layout
  1. Apply positioning settings to HTML elements (fixed, relative, and absolute) to achieve a desired layout. (Sticky positioning is not supported on some older but still used browsers, so it will not be assessed, but can useful.)
  1. Identify which HTML elements have a default "inline" display value
  1. Identify which HTML elements have a default "block" display value
  1. Describe and use z-index positioning of elements

Flexible Box Layout

  1. Explain how flexible box layout lays out elements
  1. Use the p { color: red }>flex property to specify grow, shrink, and basis values.
  1. Use the p { color: red }>flex-direction property to direct the layout of the content
  1. Use the p { color: red }>flex-wrap property to affect the wrap of content layout within an element using flexible box layout
  1. Use p { color: red }>align-self, p { color: red }>justify-content, and p { color: red }>align-items to change the way that children elements are laid out in a flexible box layout
  1. Use the p { color: red }>order property to change the order in which elements will appear in a flexible box layout

Grid Layout

  1. Explain how grid layout lays out elements
  1. Use the p { color: red }>grid-template-columns, p { color: red }>grid-template-rows, and p { color: red }>grid-template properties to specify the layout of the grid using relative and absolute measures
  1. Use p { color: red }>grid-template-areas to label areas of a grid and p { color: red }>grid-area to assign an element to the area
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";
}

.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}
  1. Use p { color: red }>column-gap, p { color: red }>row-gap, and p { color: red }>gap (previously p { color: red }>grid-column-gap, p { color: red }>grid-row-gap, and p { color: red }>grid-gap) to set the "gutter" areas between elements in a grid layout
  1. Use p { color: red }>grid-column-start/ p { color: red }>grid-column-end and p { color: red }>grid-row-start/ p { color: red }>grid-row-end to create spans across multiple columns and rows with positive integers, negative integers, and in conjunction with the "span" operator
  1. Explain and use the shorthand versions of p { color: red }>grid-column and p { color: red }>grid-row to define how an element will span a grid layout
  1. Use the p { color: red }>order property to change the default order in which items are laid out
  1. Explain and use the "fr" unit of measure
  1. Use p { color: red }>justify-items, p { color: red }>align-items, p { color: red }>justify-content and p { color: red }>align-content to layout items in each grid area

Interactivity and BEM (W09D4) - Learning Objectives

Interactivity

  1. Use the "hover" pseudo-class to be able to make changes to elements when the device pointer is over an element
  1. Describe and use the p { color: red }>transition property to show animated changes due to class and pseudo-class CSS rule application
  1. Describe and use the p { color: red }>overflow, p { color: red }>overflow-x, and p { color: red }>overflow-y properties to effect clipping and scrolling on elements

Block, Element, Modifier (BEM)

  1. Describe what Block means in BEM.
  1. Describe what Element means in BEM.
  1. Describe what Modifier means in BEM.
  1. Identify CSS class names that follow the BEM principle.
/* Here we have a block called "nav" that we have associated with a "dark" modifier */
/* Use modifier class name as selector. */
.nav--dark {
}

/* We are selecting the nested "list-container" element when our "nav" block has the "dark" modifier */
/* Alter elements based on a block-level modifier. */
.nav--dark .nav__list-container {
}

/* We are selecting the "list-container" element of the "nav" block when this element has been given the "shadow" modifier */
/* Element modifier: */
.nav__list-container--shadow {
}
HOME-hit-Refresh