11.10 HTML intro
- History of HTML
- HTML document and the browser
- Defining the user
11.10 HTML intro
- History of HTML
- HTML document and the browser
- Defining the user
- Setting up VSCode
- File directories
- Extensions (live server, prettier)
- Keyboard shortcuts
<!DOCTYPE html>- meta tags
- Character set
<html>is the root element<head>,<body>,<title>
- Anatomy of an element (opening tag, content, closing tag)
<h1>-<h6>,<p>- Running our file locally and globally
- Commenting with
- The importance of clean, indented code
12.10 HTML/CSS intro
- Tables header
<th>, table row<tr>, table data<td>
- Extension installation
- Definition and Usage
<ol>,<ul>,<li>- Changing presentation with
list-style-type - Descendent combinator
- Understanding nesting, parent - child relationship
- Anchoring with
<a> - Linking pages
- ID linking
- Web links
- Definition and Usage
- Iframe Syntax
- Writing CSS inline, internally and externally
- Anatomy of a declaration (selector, declaration, property, value)
- The
<link>tag - Commenting with
\*[comment]*\
- Debugging our CSS
- Modifying values
-
Using keywords, RGB, RGBA, hex
-
Using keywords, RGB, RGBA, hex
13.1 HTM/CSS intro part two
- Conflicting rules
- Specificity - selecting by element, class, ID
- Targeting a unique element with the
idattribute - Targeting a group of elements with the
classattribute
17.10 CSS intro part 3
- Combining multiple selectors with
,
- Sending emails with
mailto:
- Getting more fonts: Google fonts and css
@importdirective - Providing fallbacks: font stack values for
font-family
- Setting text size with `font-size
- Relative to root:
remsizing and the:rootselector
- Using keywords, RGB, RGBA, hex
- Transparency and opacity
background-imageis for decoration not contentbackground-size,background-repeat,no-repeat- Setting multiple attributes with
backgroundshortcut
- Setting box width with
box-sizing: border-box; - Spacing out our boxes -
marginis for outside,paddingfor inside - Reset me softly -
* {margin: 0; padding:0; box-sizing: border-box;} - Margins, paddings, width and height on inline elements
- Changing boxes with css
displayandinline,blockandinline-block
- border-width ,border-style,border-color
- shorthand properties
- border-radius
- color, letter-spacing , word-spacing
- line-height , text-align, text-indent
- text-decoration , text-transform
18.10 CSS intro
- Relative to parent:
emsizing and nesting - Setting the base size:
:root { font-size: 62.5% }and decimalrems (1.2rem = 12px)
- Pre Installed System fonts: css
font-family: <font-name>
- Thicker text with css
font-weight, choosing font weights on google fonts - Italics with css
font-style - Underline and line-through with css
text-decoration - Changing case with css
text-transform
- Introducing state pseudo class
- Coloring links with
:hover,:activeand:visited - Using MDN to locate additional selectors, combinators, elements and rules
pxand%emvsrem- Use cases for the different units
- Introducing the
<img>tag - Framing our image with
border - Controlling corners with
border-radius - Using float (strictly with image and text)
- Understanding positioning -
static,relative,absolute,fixed,sticky - Position offsets -
top,bottom,right,left - Layering boxes with
z-index
- Creating shapes using the the
borderproperty - - Transforming shapes:
transform,rotate(),scale()
19.10 CSS selectors
- Universal selector
* - Type selector (Element selector)
- ID selector
- Class selector
- attribute selectors
- selector list "Combining multiple selectors with
,"
- Descendant combinator
- Child combinator
- General sibling combinator
- Adjacent sibling combinator
- Column combinator
- Pseudo classes
:hover,:visited,:focus,:active,:checked - pseudo child selectors: `:nth-child()
- Searching -
<form>,<input>
20.01 Pseudo classes and elements
Defining in :root { --[name]: [value] }
::after::before::first-letter::placeholderfor stylingplaceholdertext- Using MDN to locate additional selectors, combinators, elements and rules
vhandvw- Use cases for the different units
24.01 Forms in Html
- Conveying meaning without text: fontawesome
- Adding fontawesome to our websites: choosing the correct CSS links
- Sizing icons with Fontawsome sizing utility classes
- Alternatives to Fontawesome - flaticon, thenounproject.com
- Using
box-shadowto emulate a light source - Using multiple instances of
box-shadow
- Searching -
<form>,<input> - Sending forms to a URL - the
actionattribute - Importance of names:
<input name=[...]>attribute,<label for=[...]> - URL structure & anatomy
- HTTP verbs -
GET,POSTand themethodattribute <form>,<fieldset>,<legend>
- Creating a CSS only toggle switch
25.01 intro to Flexbox
- Log-in page
- Flexible boxes:
display: flex, flex child & flex parent concept - Aligning and justifying:
justify-contentandalign-items
26.01 Flexbox
- Direction and wrapping:
flex-directionandflex-wrap - Small shorthand:
flex-flow
- Growing and shrinking:
flex-growandflex-shrink - Base sizing:
flex-basisand theflexshorthand - Reordering children:
orderandalign-self - The perfect center:
- centering in fixed height parents with
display: flexandmargin: auto
27.01 Building a web page
- Building HTML/CSS web page
- Creating a webpage using HTML/CSS : Mobile app
31.01 Grid intro
- Making our grid container:
.container { display: grid } - Grid columns: css
grid-template-columnsandfrunit - Setting max and min sizes: css
minmax([min], [max]) - Spacing columns and rows -
gap
- Spanning over several columns:
grid-column: [start] / [end];,spankeyword - Spanning over several rows:
grid-row: [start] / [end];
- Template areas: setting the parent with keywords, css
grid-template-areas - Placing boxes in an area: css
grid-area
03.02 Responsive Web Design
- Anatomy of a media query:
@media [media-type] ([media features]) { ... } - Default media type:
screenis optional - Common features:
(min-width: <size>) - Breakpoints: The "standard" bootstrap breakpoint values
07.02 Responsive Web Design part 2
- Building a responsive web page
08.02 CSS Animations
- Creating custom animation scripts:
@keyframes [name] { ... } - Applying animations:
:hoverand:focus, cssanimation - Controlling the script:
from,toand%directives - Changing the iteration and direction:
animation-iteration-count,animation-direction - Best Design Practices: When and how much transition and animation
09.02 CSS Animations part 2
- Transitioning property changes -
css
transition: [prop] [duration] [timing] - Creating a nested navigation bar with
<nav>and nested<ul> - Showing dropdowns on
:hoverand:focus