Digital Technologies Digital Solutions ICT Applied Download Resources Web Applications Games Recycle Bin

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 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
  1. Sunflower Version 1
  2. Sunflower Version 2
  3. Sunflower Version 3