Front-end web development
Develop HTML, CSS, and JavaScript using VS Code
| tutorial | |
|---|---|
| # | html css |
| Hyper Text Markup Language (HTML) | |
| HTML attributes and table tags | |
| HTML lists images hyperlinks | |
| CSS | |
| CSS class vs id | |
| CSS inline vs block | |
| CSS grid | |
| CSS grid Sizing | |
| responsive web design 1 | |
|---|---|
| # | html - structure and elements |
| Hyper Text Markup Language (HTML) | |
| basic HTML document tags | |
| element attributes (a & img) | |
| tables | |
| lists | |
| display values: block vs inline (div vs span) | |
| semantic elements (accessibility) | |
| responsive web design 2 | |
|---|---|
| # | css - presentation, sizing and appearance |
| Cascading Style Sheets (CSS) | |
| styling one, some or all elements (class vs id) | |
| more on selectors | |
| css box model | |
| case study: styling a list of links modifies display property, box model, :hover selector |
|
| responsive web design 3 | |
|---|---|
| # | css - page layout and adaptation to screen size |
| CSS float layout pure css, old school way. use grid or Bootstrap | |
| CSS flexbox layout meh. google it. | |
| CSS grid layout use grid or Bootstrap for responsive (fluid) layouts | |
| CSS media queries use for accessibility | |
| media query CSS grid layout adaptive grid to browser sizes | |
| CSS framework layout (Bootstrap) | |
JavaScript Challenges #0 warmup JavaScript Starters JavaScript Challenges #1 easy JavaScript Challenges #2 medium JavaScript Challenges #3 hard JavaScript Challenges #4 ludicrous
| client side 1 | |
|---|---|
| # | alternative html css tutorials |
| html elements | |
| tables | |
| spans vs divs | |
| links | |
| css grid | |
| responsive layout | |
| client side 2 | |
|---|---|
| # | javascript browser object model |
| how to run js | |
| hello world | |
| variables | |
| choices | |
| more choices | |
| cases | |
| chances | |
| loops | |
| arrays | |
| input | |
| client side 3 | |
|---|---|
| # | javascript document object model |
| introduction | |
| hello dom | |
| text input | |
| data types | |
| random numbers | |
| coin flip | |
| race to forty game | |
| double dice roll game | |
| card flip | |
| choices | |
| trader game | |
| role player game | |
| cards | |
| animations with timeouts | |
| card sort | |
| challenges | |
|---|---|
| # | complete or recreate using your preferred tech |
| Guess Next | |
| Card Draw Challenge | |
| Cheque Writer | |
| JS Golf | |
| Square Off | |