Web Dev Intro Crash Course

WEB DEV INTRO CRASH COURSE
Source: https://internetingishard.com/html-and-css/introduction/

HTML – DOCTYPE & SYNTAX
Source: https://www.w3schools.com/html/html_basic.asp
Source: https://html.spec.whatwg.org/multipage/syntax.html#syntax-
doctype
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

HTML - Tags & Elements
Source: https://www.w3.org/community/webed/wiki/HTML

HTML - Elements
Source: https://html.spec.whatwg.org/multipage/syntax.html
There are six different
kinds of elements: void
elements, the template
element, raw text
elements, escapable raw
text elements, foreign
elements, and normal
elements.

HTML – Block vs Inline Elements
Source: https://marksheet.io/html-block-inline.html

HTML – Semantic vs Non Semantic
Source: https://www.w3schools.com/html/html5_semantic_elements.asp

HTML – Semantic Elements
Source: https://www.w3schools.com/html/html5_semantic_elements.asp

HTML – Formatting Elements
Source: https://www.w3schools.com/html/html_formatting.asp

HTML - Attributes
Source: https://internetingishard.com/html-and-css/introduction/
Source: https://www.tutorialspoint.com/html/html_attributes.htm
Attributes for an element
are expressed inside the
element's start tag.
Attributes have a name
and a value
HTML attributes are generally classed as required attributes, optional
attributes, standard attributes, and event attributes.

HTML - ARIA Attributes
Source: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to
make web content and web applications (especially those developed with JavaScript)
more accessible to people with disabilities.

HTML - ARIA Attributes
Source: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Your Element Can Only Have One Role
Use Semantic HTML Elements Where Possible
Use as Many Semantic Elements as Possible

CSS - Styling
Source: https://www.w3schools.com/html/html_css.asp/

CSS - Syntax
Source: https://internetingishard.com/html-and-css/hello-css/

CSS – Specificity
Source: https://dev.to/emmawedekind/css-specificity-1kca

CSS – Inheritance
Source: https://www.w3.org/wiki/Css/Training/Inheritance

CSS – ID vs Classes
Source: https://css-tricks.com/the-difference-between-id-and-class/
Elements can have both

CSS –Pseudo Selectors
Source: http://www.javascriptteacher.com/free-book.html
In CSS a pseudo-selector is any selector that
starts with a colon character (:) and usually
appended to the end of the element name.
Pseudo-selectors :first and :last are used for
selecting the very first or very last element from a
list of children in a parent.
Another example is :nth-child for selecting a series
of elements belonging to a row or column in a list
of elements or even an HTML table.

CSS –Pseudo Classes
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Source: https://www.w3schools.com/css/css_pseudo_classes.asp
Source: http://www.corelangs.com/css/basics/pseudo.html
A CSS pseudo-class is a keyword added to a selector
that specifies a special state of the selected element(s).

CSS – Data-* Attribute
Source: https://www.w3schools.com/tags/att_data-.asp
The data-* attribute is used to store custom data private to the page or application.
The data-* attribute gives us the ability to embed custom data attributes on all HTML
elements.
The data-* attribute consist of two parts:
The attribute name should not contain any uppercase letters, and must be at least one
character long after the prefix "data-"
The attribute value can be any string

CSS – Box Model
Source: https://sabe.io/classes/css/css-box-model-padding-border-margin

CSS – Float
Source: https://www.youtube.com/watch?v=xara4Z1b18I
Source: https://www.1keydata.com/css-tutorial/float.php

CSS – Grid vs Flex
Source: https://sabe.io/classes/css/css-box-model-padding-border-margin
Flexbox on top, Grid on bottom

CSS – Flex & Grid Resources
Source: https://cssgridgarden.com/
Source: https://flexboxfroggy.com/

JavaScript – JS & ECMAScript
Source: https://www.crockford.com/javascript/javascript.html
ECMAScript - is a
standardized scripting-
language procedures and
specifications by the
(European Computer
Manufacturers Association)
ECMA International.
JavaScript - is the scripting language, which was created within ten days, developed by
Brendan Eich for Netscape. It was originally named Mocha, then renamed LiveScript and
finally to JavaScript.

JavaScript – Data Types
Source: https://javascript.info/types

JavaScript – Data Types
Source: https://www.reddit.com/r/ProgrammerHumor/comments/8gcub3/meme_i_dont_have_a_good_title_for_this/

JavaScript – Var, Let and Const
Source: https://github.com/mbeaudru/modern-js-cheatsheet#tdz_sample
Variables declared with const keyword can't be reassigned, while let and var can.

JavaScript – Temporal Dead Zone
Source: https://wesbos.com/temporal-dead-zone/
The Temporal Dead Zone refers to a new set of ECMAScript semantics regarding scope,
introduced in ES2015 (aka ES6).

JavaScript – Function Declaration

JavaScript – Function Expression
Function Expression – is any type of statement where a function does not start with the function keyword
like the examples below. With a function expression you can omit naming the function, which will then
create an anonymous function.
Anonymous functions – are
functions that are not named.

JavaScript – Arrow Function
Source: https://www.crockford.com/javascript/javascript.html
The ES6 JavaScript update has introduced arrow functions, which is
another way to declare and use functions. Here are the benefits they
bring:
More concise
this is picked up from surroundings
implicit return

Web Dev Intro Crash Course

Recommended

Recommended

More Related Content

Similar to Web Dev Intro Crash Course

Similar to Web Dev Intro Crash Course (20)

Recently uploaded

Recently uploaded (20)

Web Dev Intro Crash Course