Standup Notes

Daily Scrum

Thursday, Jan 21, 2021

What did you do yesterday?
- N/A
What will you do today?
- transition from internal to external CSS (lab2 had a lot)
- use Google Fonts instead of importing via font-family
- if time allows, set up an external CSS that will do color formatting for diff coding languages
Where are you blocked?
- Wanted to set up custom color coding for the code section. E.g. when the word 'main' shows up color that, if 'return' color that, etc. Basic CSS will not look at text content. Checked Javascript, that won't work either. Kinda disappointed. Might have to brute force.
Comfort Level — How close are we to hitting our sprint goals?
- Only done 25% of features need. But it's aesthetic so far.

Friday, Jan 22, 2021

What did you do yesterday?
- external CSS doc
- learned how to set up classes tied to css styling
- finished data structures section and added more content
- most color, padding, margins, border, etc. is done
What will you do today?
- all the selectors, display, position, flexbox, and grid
- have a cool design idea for the earth's layers that could use position
- try to do all this work using the Pomodoro Timer too
Where are you blocked?
- Got stuck on trying to control to size of the container for Flex Box and Grid. Just did design work to deal with it but not fixed.
- Didn't finish a future crazy design but it didn't go with the theme.
- Would've preferred more time to adjust the way images fit in boxes.
Comfort Level — How close are we to hitting our sprint goals?
- at 11:45pm I think we cut it close

Work Log

Selectors

Class Selector (.class)

   .item1 {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 2;
   }

ID Selector (#id)

    <a class="table of contents" href="#DataStructures">Data Structures </a> |

Universal Selector (*)
```
   * {
      text-align: left;
   }
```

Element Selector (element)

   aside {
      background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
      padding: 10px 20px 10px 20px;
      color: rgb(120, 120, 120);
   }

Attribute Selector (e.g. [attribute=foo])

   body[class$="run"] {
      font-family: menlo;
      color: rgb(58, 58, 58);
      background-color: #f1f1f1;
      padding: 2px;
   }

Pseudo-class Selectors (e.g. p::hover)

    a:hover[class~="contents"] {
       color: white;
       font-weight: bold;
    }

Grouping / Combinators

Selector List (element, element)

 h5, h6 {
    font-family: 'Overpass';
    color: rgb(211, 211, 211);
    font-size: 15px;
    margin: 1px 1px 10px 1px; /* top right bottom left */
 }

Descendant Combinator (element element)

    ol li {
       font-weight: normal;
       color: rgb(193, 193, 193);
    }

Child Combinator (element > element)

 details > code {
    font-family: menlo;
    color: rgb(203, 203, 203);
    background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    margin: 3px 1px 1px 3px;    /* top right bottom left */
 }

General sibling combinator (element ~ element)

    code ~ code[class="src"] {
       color: aquamarine;
    }

Adjacent sibling combinator (element + element)

 /* Style for h5 text DIRECTLY AFTER h4 */
 h4 + h5 {
    color:rgb(225, 225, 225);
    background-color: hsla(0,100%,100%,0.02);
 }

Combining Two Selectors (element.class)

    h2.section_title {
       color: #2558b1;
       font-size: 35px;
       font-family: 'Overpass', sans-serif;
       font-weight: bold;
       text-decoration: underline;
       text-decoration-color: rgb(28, 33, 52);
    }

CSS Topics

Comments
```
   /* literally all over style.css */
```

Colors

rgb(r, g, b), rgba(r, g, b, a)

   h3[class="highlight"] {
      color: black;
      background-color: rgb(48, 201, 132);
   }

#FFF, #FFFFFF

   h4 {
      color: #30C886;
      font-size: 12px;
   }

hsl(h, s, l), hsla(h, s, l, a)

   section[class="dark"] {
      background-color: hsla(0,0,0,0.5);    /* sets opacity of black color to 50% */
      padding: 10px;
      font-size: 14px;
   }

Color name (i.e ‘green’)

   h3[class="highlight"] {
      color: black;
      background-color: rgb(48, 201, 132);
   }

Backgrounds
- background-color

Borders

border-style
border-color
border-width
border-radius

 /* table header */
 th {
    border-style: solid;
    border-color: #0B0E11;
    border-width: 3px;
    border-radius: 2px;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
 }

Unit

3 relative
3 absolute
Box Model CSS Box Model

   figure > img {
      width: 70%;
      border: 5px solid rgb(0, 0, 0);
      padding: 15px;
      margin: 5px 1px 1px 5px;
      display: block;
      margin-left: auto;
      margin-right: auto;
   }

Margins

Long (margin-top, margin-bottom, margin-left, margin-right)

   h3[class="highlight"] {
      font-family: 'Overpass';
      font-weight: semi-bold;
      color:rgb(216, 216, 216);
      background-color: #063731;
      padding: 5px 5px 3px 10px; /* top right bottom left */
      margin-left: 5px;          /* space btw edge of page and section */
      margin-right: 5px;
      margin-top: 10px;
      margin-bottom: 10px;
   }

Short (margin: top right bottom left)

   code[class$="run"] {
      font-family: menlo;
      color: rgb(203, 203, 203);
      background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
      padding-top: 3px;
      padding-right: 5px;
      padding-bottom: 3px;
      padding-left: 5px;
      margin: 3px 1px 1px 3px;    /* top right bottom left */
   }

auto

   code {
      font-family: menlo;
      color: rgb(203, 203, 203);
      background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
      padding: 5px;
      margin: auto;
      font-size: 100%;
   }

Padding

Long (padding-top, padding-bottom, padding-left, padding-right)

   section[class="dark"] {
      background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
      padding-left: 30px;
      padding-right: 30px;
      padding-top: 20px;
      padding-bottom: 0px;
      color: rgb(180, 179, 179);
   }

Shorthand (padding: top right bottom left)

   nav {
      text-align: left;
      font-size: 14px;
      .
      .
      padding: 15px 5px 15px 5px;
      .
      .
   }

Height / Width

   table {
      font-family: ibm plex sans;
      border-collapse: collapse;
      position: static;
      width: 100px;
      height: 20px;
   }

Set the height and width for an element

   <svg width="1500" height="5">
   <rect width="1500" height="5" style="fill:#393939"/>
   </svg>

Text
- color
- text-decoration -- Table of Contents (in nav)
- text-align

Fonts: Include and use a 3rd party font (https://fonts.google.com/ (Links to an external site.)). You can load the font in either your HTML or your CSS.

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,600;0,700;0,800;1,800;1,900&display=swap" rel="stylesheet">

Display: Experiment with these types and include at least two of them in your page.

none

   h1 {
      color: #dac529;
      font-size: 10px;
      display: none;
   }

block

   figure > img {
      width: 70%;
      border: 5px solid rgb(0, 0, 0);
      padding: 15px;
      margin: 5px 1px 1px 5px;
      display: block;
      margin-left: auto;
      margin-right: auto;
   }

inline-block
inline

   nav {
      text-align: left;
      font-size: 14px;
      color: white;
      .
      .
      .
      display: inline;
   }

Max-width / Min-width

Width has to be variable (like a percentage)

    <footer>
      <img src="footer.jpeg" alt="Footer Image" style="width: 100%">
   </footer>

Position: Experiment with these attributes and include at least two of them in your page.

static

 /* style of table */
 table {
    font-family: ibm plex sans;
    border-collapse: collapse;
    position: static;
    width: 100px;
    height: 20px;
 }

relative

   header {
      position: relative;
      bottom: 30px;
   }

fixed -- Table of Contents
absolute

   header {
      position: absolute;
      top: -10px;
   }

sticky

   footer {
      position: -webkit-sticky;
      position: sticky;   /* once scrolled over, will stay at top of screen */
   }

:hover (Pseudo-class)

 /* Hover over Table of Contents */
 a:hover[class~="contents"] {
    color: white;
    font-weight: bold;
 }

:active (Pseudo-class)

/* Clicked element of Table of Contents */
a:active[class~="contents"] {
   color: #30C886;
   font-weight: bold;
}

Flexbox

Must have more than two children within the element that is using flexbox. Must use minimum three of the flexbox related attributes.

   .flex-container {
      display: flex;
      background-color: #101419;
      flex-direction: row;
   }

   .flex-container > div {
      background-color: #0B0E11;
      margin: 5px;
      padding: 10px;
      font-size: 10px;
   }

Grid

Must have more than two children within the element that is using grid. Must use minimum three of the flexbox related attributes.

    .grid-container {
       width:fit-content;
       display: grid;
       grid-template-columns: repeat(3, 200px [col-start]);
       grid-gap: 20px;      /* center dividing lines */
       background-color: #101419;;
       padding: 5px;       /* border/outer lines */
       justify-content: space-around;
    }

   .grid-container > div {
      background-color: hsla(0,100%,0%,0.3);    /* sets opacity of black color */
      text-align: center;
      padding: 15px;
      font-size: 15px;
      color:rgb(196, 196, 196)
   }

Media Query. At least one query based on the screen width

   @media only screen and (max-width: 600px) {
      body {
            background-color: red;
      }
   }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

standup_notes.md

standup_notes.md

Standup Notes

Daily Scrum

Thursday, Jan 21, 2021

Friday, Jan 22, 2021

Work Log

Selectors

CSS Topics

Files

standup_notes.md

Latest commit

History

standup_notes.md

File metadata and controls

Standup Notes

Daily Scrum

Thursday, Jan 21, 2021

Friday, Jan 22, 2021

Work Log

Selectors

CSS Topics