List of starting and completed exercises for any beginners getting into html, css and simple javascript. These exercises are designed to be taught in small groups accompanied by an instructor for guidance and discussion.
The lesson numbers are in the seqeuntial order of difficulty and builds on the knowledge of previous lessons.
- plain text editor e.g. Sublime Text
- browser e.g. Chrome with DevTools
- text tags such as
h1
,h2
,h3
,h4
,h5
,h6
,p
,code
,blockquote
,span
- text formatting and lines with tags
em
,hr
,br
,strong
- image tag
img
with attributesheight
,width
,title
,alt
with relative/absolute url - hyperlink tag
a
with attributeshref
,name
with relative/absolute hyperlinks - list tag
ul
,ol
andli
with ordered/unordered and nested list - table tag
table
withtr
,td
and attributes such ascellpadding
,cellspacing
,colspan
,rowspan
,border
- form tags
form
withinput
,label
,select
,option
,textarea
and attributes such asname
,type
,value
- linking css and js code and files with
link
,style
,script
- css text properties such as
font-family
,font-size
,color
,font-style
,font-weight
,text-align
,background-color
,line-height
,word-spacing
,letter-spacing
andfont
(shorthand) - css hyperlinks with properties such as
text-decoration
for tags and pseudo classes:link
,:visited
,:hover
and:active
- css background with properties such as
background-color
,background-image
,background-attachment
,background-position
,background-repeat
and shorthandbackground
- css border with properties
border
(shorthand),border-width
,border-style
,border-color
,border-left
,border-right
, etc - css form by styling
textarea:focus
,input[type=text]
, etc - css selectors such as
* {}
,E {}
,E F {}
,E > F {}
- css for id & class
- css box model
- css page layout
- css position with absolute, fixed and relative
- semantic tags such as
header
,footer
,article
- audio
- video
- web font using Google web fonts
- embed fonts using simple css syntax
- embed fonts using more font formats to support different browsers
- vendor prefixes for IE, Opera, Chrome, Safari
- border radius to vary the amount, position of the curvature
- text shadow with single or multiple shadows to vary the color, depth and position
- box shadow with single or multiple shadows to vary the color, depth and position
- text selection to change the text color and/or background when selecting text
- gradients for linear gradient with stops and radial gradient
- transform for translate, scale, rotate, skew
- transition with
webkit-transition-property
,-webkit-transition-duration
,-webkit-transition-timing-function
,-webkit-transition-deplay
- animation with
@keyframes
,-webkit-animation-name
,-webkit-animation-duration
,-webkit-animation-iteration-count
,-webkit-animation-timing-function
,-webkit-animation-delay
,-webkit-animation-direction
- css3 selectors with
nth-child
andnth-of-type
- media queries for responsive design
- html5 forms with input type as email, url, number, tel as well as attributes like require, min, max
- css3 reflection with
box-reflect
- simple jquery integration with FittextJS
- css sprite to load only one image instead of many images
- generated content with
:after
and:before
- responsive layout convert a fixed header, footer, sidebar layout to a fully flexible responsive layout fmor desktop to one-column mobile
- css pre-processor to code css in SCSS with variables, mixing, nesting and compile it to minified CSS with Scout App or SASS Rubygem
- icon fonts and generating them from icomoon
- simple devtools using chrome dev tools
- static page boilerplate with html5 boilerplate
- styling framework with twitter boostrap
- lesson 1 - 4 [4 hours]
- lesson 5 - 8 [4 hours]
- lesson 9 - 12 [4 hours]
- lesson 13 - 18 [4 hours]
gap of few weeks for participants to practise on work/side projects
- lesson 19 - 24 [4 hours]
- lesson 25 - 29 [4 hours]
- lesson 30 - 33 [4 hours]
- lesson 34 - 38 [4 hours]
gap of few weeks for participants to practise on work/side projects
- lesson 39 - 42 [4 hours]
- lesson 43 - 46 [4 hours]
- take one lesson at a time
- explain the theory with links to W3C or MDN
- show examples with the links listed in each lesson under Resources at the bottom of each
*.html
file as an inspiration - live code as a demo taking from start to complete code examples
- walk around to assist the class participants when they also try to implement the steps from start to complete
When things don't work, following these steps sequentally in this order:
- inspect element in the browser dev tools
- if step 1 does not work:
- if step 2 does not work, google the question (set search option to "Past Year")
- if step 3 does not work, make a module of the error code in JSfiddle with only the code needed (remove other feature code)
- if step 4 does not work, post question in stackoverflow with JSfiddle link in step 4 and complete error messages
- if step 5 does not work, email someone with the links to the stackoverflow and jsfiddle
- if step 6 does not work, request someone to pair with you on the error
Suggested reading: How to ask questions the Smart Way and SSCCE
- image: Internet PNG from Wikimedia Commons
- image: Earth GIF from Wikimedia Commons
- paragraph: Here's to the Crazy Ones
- paragraph: Alice in Wonderland
- audio mp3: Annual New England Xylophone Symposium
- fonts: Raleway and Orbitron
- background graph paper: Subtle Patterns Graphy was used to see the changes in element positions after transition/transform, etc
- jQuery and jQuery library FittextJS
- social icons: crystal clear bubble
- icon fonts from icomoon
Public domain dedication - You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.