Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 12-hour coding bootcamp covering HTML, CSS, and JavaScript fundamentals. Begin with an introduction to code editors and file management before diving into HTML basics, including syntax, elements, and semantic structure. Progress through CSS, exploring styling techniques, selectors, positioning, and responsive design. Tackle JavaScript essentials such as variables, operators, control structures, functions, and Web APIs. Complete hands-on projects like a table tennis leaderboard, profile badge, burger menu, photo carousel, signup modal, and a developer portfolio. Gain practical skills through exercises and real-world applications, preparing you for web development challenges in 2024 and beyond.

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