Learning HTML and CSS with CodeAcademy

#⚙ #📥

~ Resources for building a Website

Course Dates:

Concepts to Research or write about later

digital accessibility → https://www.w3.org/TR/WCAG21/
Ada Lovelace → first programmer??

Learning HTML & CSS

HTML = Hyper Text Markup Language

<span> is better to seperate inline text, <div> is better for separating/identifying blocks 
<img> tag is self closing but has a required attribute of "src" so it must always look like <img src=:""> 

HTML docs always begin with the first line being : <!DOCTYPE html>
- then the <html> tag 
	- then under that lives the <head> and <body> tags 

anchor elements, or links, have the href attribute. <a href=""> 
	target="_blank" is an attribute you can add to "open in new tab"
	 <a href="" target="_blank" > 

HTML Comments: <!-- This is a comment that the browser will not display. -->

tables

<tr> is the element for table rows 
<td> is for the info in the cells , stands for table data 
<th> is the table headings. to title the row or the column you use attributes
	- <th scope="row"> for row title 
	- <th scope="col">  for column title
	- <th></th> you can leave it empty to create a cell that you don't want values in

<td colspan="value"> the colspan attribute is for when data spans more than one column. "value" would get a number. it would basically work like a merged cell? the same is true of rows. you would use <td rowspan="value">

when a table gets too big, you enclose the data in an <tbody> element (but don't include the headers/titles). <thead> is used to eclose the columnn headings/titles only. the <tfoot> element is used to section off the footer row.

CSS

background image syntax:
.main-banner {
background-image: url('https://www.example.com/image.jpg');
}

NOTE:

Typography

font-weight:

text-transform:

letter-spacing → horizontal space between letters.
word-spacing → horizontal space between words
line-height → how tall each line is vertically

Web Fonts

example:

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

Box Model

box model diagram

diagram-boxmodel

Minimum & Maximum Widths

Overflow: → controls what happens when there is content spillage

Resetting the default margins and padding in an external stylesheet:

* {
	margin: 0;
	padding: 0;
}
Difference between display: none; & visibility:hidden;

What's the difference between display: none and visibility: hidden? An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.

Alternate to Box-Model

The default box-sizing in browsers is content-box , which is the box model explanation above. There is a better alternative. We can reset it to be border-box instead.

Border-Box → the height and width of the box stays the same, the border and pading will be included inside the box so the overall dimensions do not change. diagraming showing an element in the shape of a box used to demonstrate the box model that has a width of 200px, left and right paddings of 20px each, and an inner width of .|688x534

Display & Positioning

The five values for the position: property are: static (default), relative, absolute, fixed & sticky

Z-Index: → controls the location of an element in relation to others. positions it forward or backwards.
z-index does NOT work on static/default position elements

Display: → can be inline, block, or inline-block
- inline is when an element only occupies the space it needs (does not start new line and cant be sized)
- block occupies the entire horizontal space of the page (starts on new line, and can be definied by height and width properties)
- inline-block is an element that takes up the specified space regardless of whether the element needs it. (does not start a new line and can be sized )

Float: → depending on whether you say left or right it will move an item all the way to that side of the page.
- NOTE: better to use CSS grid or Flexbox
- MUST have a width specified

Digital Accessibility

Sizing Elements

em → is equal to one part of the font-size default set by the browser. usually 16 px which would make 1 em equal to 16px , 2 em equal to 32 px and so forth.

rem → stands for ROOT em. it's like em in that it checks for a measurement to base itself off of but in this case its looking for the root element which is the html tag.

NOTE: if you want to size elements consistently across the website, use rem. if you want to size elements based on the ones they have near by use em.

percentages: height & width → usually used for box-model values and also for positioning properties. can also be used for margin and padding.

Example of scaling background images:

body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Viewport Meta Tag

the viewport relates to the size of screen a person is viewing your website on. i.e. a computer screen or mobile
the meta tag belongs in the head section of the HTML and specifies/instructs what the webpage's scale is.
We can break down the added <meta> tag into the following essential components:

example:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
  </head>

Media Queries

CSS uses media queries to adapt based on screen sizes.

example:

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

example 1: using AND in one media query

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}

example 2: two separate media queries

@media only screen and (min-width: 320px) { 
    /* ruleset for >= 320px */
}

@media only screen and (min-width: 480px) { 
    /* ruleset for >= 480px */
}

example using a , seperator

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

"By observing the dimensions at which a website naturally breaks, you can set media query breakpoints that create the best possible user experience on a project by project basis, rather than forcing every project to fit a certain screen size. Different projects have different needs, and creating a responsive design should be no different."

Semantics

Important Links FFR

<div id="container" role="presentation">
  <p>I'm content you want to hear!</p>
</div>

<img src="#" alt="A painting of the Shenandoah Valley"/>
<p aria-label="Artist">Armand Cabrera, 2010</p>

Documentation & Research

Flex

Flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.

The main axis is used to position flex items with the following properties:

  1. justify-content
  2. flex-wrap
  3. flex-grow
  4. flex-shrink

The cross axis is used to position flex items with the following properties:

  1. align-items - used to align on one row
  2. align-content - used to align multiple rows

BUT we can switch them by using flex-direction:

The flex-flow property is declared on flex containers.

Flex Properties Review

  1. display: flex changes an element to a block-level container with flex items inside of it.
  2. display: inline-flex allows multiple flex containers to appear inline with each other.
  3. justify-content is used to space items along the main axis.
  4. align-items is used to space items along the cross axis.
  5. flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
  6. flex-shrinkis used to specify how much flex items shrink and in what proportions along the main axis.
  7. flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
  8. flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
  9. flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
  10. align-content is used to space rows along the cross axis.
  11. flex-direction is used to specify the main and cross axes.
  12. flex-flow is used to specify flex-wrap and flex-direction in one declaration.
  13. Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

Transitions

Git