12-Hour Coding Bootcamp 2024 - HTML, CSS, and JavaScript Fundamentals
Code with Ania Kubów via YouTube
Overview
Syllabus
Introduction
What is a Code Editor?
Code editor options
Files files files
HTML Introduction
What exactly is it?
Syntax
Saving files
Anatomy https://bit.ly/html-anatomy
Headings
Paragraphs
Headings, paragraphs and emphasis https://bit.ly/headings-paragraphs
Indenting code
Lists https://bit.ly/htlm-list
Links https://bit.ly/html-lks
Navigating pages https://bit.ly/html-pages
Images https://bit.ly/html-imgs
Tables https://bit.ly/html-tb
Divs
Semantic sectioning
⭐Project: Table Tennis Leaderboard https://bit.ly/leader-brd
Forms
Inputs
Exercise 1 https://bit.ly/input-ex
Exercise 2 https://bit.ly/input-ex-2
Exercise 3 https://bit.ly/input-ex-3
Select dropdown https://bit.ly/html-slc
using the select element https://bit.ly/html-slc-x
The inspect tool
Data attribute https://bit.ly/data-at
Commenting out code https://bit.ly/com-out
What’s next?
CSS Introduction
File setup https://bit.ly/file-set
Style text https://bit.ly/sty-tex
Class selectors https://bit.ly/class-s
ID selectors https://bit.ly/id-se
Commenting out https://bit.ly/com-ot
The box model https://bit.ly/box-mod
Styling a div https://bit.ly/sty-div
Solution: styling a div https://bit.ly/sty-div-s
Colors
RGB https://bit.ly/rgbx
HEX https://bit.ly/hexx
Opacity https://bit.ly/opa-x
Gradients https://bit.ly/grdx
Advanced gradients https://bit.ly/gradcs
Shadows https://bit.ly/shds
Style links https://bit.ly/sty-lnk
⭐Project: Profile Badge https://bit.ly/prf-bd
Selectors https://bit.ly/slctx
Position
Positioning divs
Floating elements
Z-index https://bit.ly/zind
Exercise: Z-index https://bit.ly/zind-x
Extra fonts
⭐Project: Burger Menu https://bit.ly/brgr-x
Flex box
Main Axis https://bit.ly/flx-x
Dynamic spacing
Exercise: Flexbox https://bit.ly/fl-box
Flex items https://bit.ly/fl-it
Styling buttons https://bit.ly/css-bt
:hover :active :disabled https://bit.ly/hvr-x
Controlling Scrolling https://bit.ly/scrl
⭐Project: Photo Carousel https://bit.ly/crsl
Forms https://bit.ly/frm-x
Input types https://bit.ly/inpt
Focusing on inputs https://bit.ly/fc-inp
Nesting in CSS https://bit.ly/nst-x
⭐Project: Signup Modal https://bit.ly/sg-md
Responsiveness
Break points https://bit.ly/br-pt
Viewport https://bit.ly/vw-pt
Transforming https://bit.ly/tr-fm
Keyframes https://bit.ly/ky-fr
⭐Project: Developer Portfolio https://bit.ly/dev-p
What next?
JavaScript Intro
Client-side vs server-side
File setup
console.log
Variables https://bit.ly/vr-x
Scope
var vs let https://bit.ly/vr-lt
const https://bit.ly/cntx
Booleans, strings, numbers
Exercise: Booleans, strings, numbers https://bit.ly/bsn-x
Other data types
Arithmetic operators https://bit.ly/art-x
Comparison operators https://bit.ly/cp-x
Assignment operators https://bit.ly/as-x
Equality operators https://bit.ly/eq-op
if statement https://bit.ly/if-x
Falsey + truthy https://bit.ly/f-trx
Logical operators
Nullish coalescence operator
Ternary operator
if/else
Exercise: if/else
Exercise: if exercise
Exercise: if/else
Loops
For statement
Do…while statement
…while statement
10:52:35 Exercise: Fizz buzz
Functions
Arguments + parameters
Exercise: Arguments + parameters
Exercise: functions progress https://bit.ly/fcpr
Function expressions
Exercise: Function expressions
Arrow function expressions
Exercise: Arrow function expressions
Methods and properties
The Math Object
Exercise: The Math Object https://bit.ly/mh-x
Web APIs
.addEventListener
Where now
Taught by
Code with Ania Kubów