sayanee / intro-to-html-css

:computer: Introduction to HTML and CSS

Intro to HTML & CSS

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.

Suggested Tools

1. plain text editor e.g. Sublime Text
2. browser e.g. Chrome with DevTools

Lessons

1. text tags such as h1, h2, h3, h4, h5, h6, p, code, blockquote, span
2. text formatting and lines with tags em, hr, br, strong
3. image tag img with attributes height, width, title, alt with relative/absolute url
4. hyperlink tag a with attributes href, name with relative/absolute hyperlinks
5. list tag ul,ol and li with ordered/unordered and nested list
6. table tag table with tr, td and attributes such as cellpadding, cellspacing, colspan, rowspan, border
7. form tags form with input, label, select, option, textarea and attributes such as name, type, value
8. linking css and js code and files with link, style, script
9. css text properties such as font-family, font-size, color, font-style, font-weight, text-align, background-color, line-height, word-spacing, letter-spacing and font (shorthand)
10. css hyperlinks with properties such as text-decoration for tags and pseudo classes :link, :visited, :hover and :active
11. css background with properties such as background-color, background-image, background-attachment, background-position, background-repeat and shorthand background
12. css border with properties border (shorthand), border-width, border-style, border-color, border-left, border-right, etc
13. css form by styling textarea:focus, input[type=text], etc
14. css selectors such as * {}, E {}, E F {}, E > F {}
15. css for id & class
16. css box model
17. css page layout
18. css position with absolute, fixed and relative
19. semantic tags such as header, footer, article
20. audio
21. video
22. web font using Google web fonts
23. embed fonts using simple css syntax
24. embed fonts using more font formats to support different browsers
25. vendor prefixes for IE, Opera, Chrome, Safari
26. border radius to vary the amount, position of the curvature
27. text shadow with single or multiple shadows to vary the color, depth and position
28. box shadow with single or multiple shadows to vary the color, depth and position
29. text selection to change the text color and/or background when selecting text
30. gradients for linear gradient with stops and radial gradient
31. transform for translate, scale, rotate, skew
32. transition with webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function, -webkit-transition-deplay
33. animation with @keyframes, -webkit-animation-name, -webkit-animation-duration, -webkit-animation-iteration-count, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-direction
34. css3 selectors with nth-child and nth-of-type
35. media queries for responsive design
36. html5 forms with input type as email, url, number, tel as well as attributes like require, min, max
37. css3 reflection with box-reflect
38. simple jquery integration with FittextJS
39. css sprite to load only one image instead of many images
40. generated content with :after and :before
41. responsive layout convert a fixed header, footer, sidebar layout to a fully flexible responsive layout fmor desktop to one-column mobile
42. css pre-processor to code css in SCSS with variables, mixing, nesting and compile it to minified CSS with Scout App or SASS Rubygem
43. icon fonts and generating them from icomoon
44. simple devtools using chrome dev tools
45. static page boilerplate with html5 boilerplate
46. styling framework with twitter boostrap

Suggested Schedule

1. lesson 1 - 4 [4 hours]
2. lesson 5 - 8 [4 hours]
3. lesson 9 - 12 [4 hours]
4. lesson 13 - 18 [4 hours]

gap of few weeks for participants to practise on work/side projects

1. lesson 19 - 24 [4 hours]
2. lesson 25 - 29 [4 hours]
3. lesson 30 - 33 [4 hours]
4. lesson 34 - 38 [4 hours]

gap of few weeks for participants to practise on work/side projects

1. lesson 39 - 42 [4 hours]
2. lesson 43 - 46 [4 hours]

Suggested Steps For Instructors

1. take one lesson at a time
2. explain the theory with links to W3C or MDN
3. show examples with the links listed in each lesson under Resources at the bottom of each *.html file as an inspiration
4. live code as a demo taking from start to complete code examples
5. walk around to assist the class participants when they also try to implement the steps from start to complete

Suggested Steps For Participants post-class

When things don't work, following these steps sequentally in this order:

1. inspect element in the browser dev tools
2. if step 1 does not work:
   • re-check syntax with documentation in MDN or W3c
   • get to the errors in text editor / browser dev tools
   • check all file paths
   • check all relevant versions of the library used (if any)
3. if step 2 does not work, google the question (set search option to "Past Year")
4. if step 3 does not work, make a module of the error code in JSfiddle with only the code needed (remove other feature code)
5. if step 4 does not work, post question in stackoverflow with JSfiddle link in step 4 and complete error messages
6. if step 5 does not work, email someone with the links to the stackoverflow and jsfiddle
7. 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

General Resources

1. W3C
2. MDN
3. web platform

Credits

• 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

License

Public domain dedication - You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.