Intro to Web Coding

Intro to Web Coding

At Markham Hill group, we believe that everyone should have an opportunity to learn code. Our goal is to provide this opportunity to people of all-age to express yourself with code. Our “Code & Coffee Club” offered beginner-friendly web development courses as well as collaboration between developers with multiple-projects.

  1. The Internet
  2. The World Wide Web
  3. A Web browser

Learn HTML5

HTML5

HTML stands for HyperText Markup Language. It is used for structuring and presenting content on the web.

HTML5 is the latest version with many improvement over previous versions. Including support for multimedia such as audio/video, new tags for better structure which makes HTML more powerful and meaningful. For example, HTML5 Local Storage also allows users to cache data offline and run application without the need of network connection, which is very useful feature especially for mobile development. Please refer to this for a more comprehensive list of features

Part 1

  1. HTML Basics:
  2. HTML Syntax
  3. HTML Block and Inline
  4. HTML Hierarchy
  5. HTML Semantics
  6. HTML Formatting
  7. A valid HTML document
  8. HTML Content:
  9. HTML Text
  10. Inline semantics
  11. HTML Links
  12. HTML Images
  13. HTML Tables
  14. HTML Structure
  15. HTML Forms

Part 2

  1. Say Hello to HTML Elements
  2. Headline with the h2 Element
  3. Inform with the Paragraph Element
  4. Uncomment HTML
  5. Comment out HTML
  6. Fill in the Blank with Placeholder Text
  7. Delete HTML Elements
  8. Import a Google Font
  9. Specify How Fonts Should Degrade
  10. Add Images to your Website
  11. Link to External Pages with Anchor Elements
  12. Nest an Anchor Element within a Paragraph
  13. Make Dead Links using the Hash Symbol
  14. Turn an Image into a Link
  15. Create a Bulleted Unordered List
  16. Create an Ordered List
  17. Create a Text Field
  18. Add Placeholder Text to a Text Field
  19. Create a Form Element
  20. Add a Submit Button to a Form
  21. Use HTML5 to Require a Field
  22. Create a Set of Radio Buttons
  23. Create a Set of Checkboxes
  24. Check Radio Buttons and Checkboxes by Default
  25. Nest Many Elements within a Single Div Element
  26. Give a Background Color to a Div Element
  27. Set the ID of an Element

Learn CSS3

Learn CSS3

CSS stands for “Cascading Style Sheets”. This term has been used frequently with HTML. HTML can be used to define the structure and add meaning to page content, whereas CSS controls how to display those contents. CSS3 has many important features such as selectors, box-model, animation etc. Mastering CSS is crucial for web developers in order to create a beautifully-styled web page.

Part 1

  1. Why CSS exists
  2. CSS Syntax
  3. CSS Selectors
  4. CSS Inheritance
  5. CSS Priority
  6. CSS Color units
  7. CSS Size units
  8. CSS Reset
  9. CSS Text
  10. CSS font-family
  11. CSS font properties
  12. CSS line-height
  13. CSS font shorthand
  14. CSS text properties
  15. CSS Box Model
  16. CSS background
  17. CSS display
  18. CSS height and width
  19. CSS border
  20. CSS padding
  21. CSS margin
  22. CSS size shorthand wheel
  23. CSS Positioning
  24. The Flow
  25. CSS position
  26. CSS float
  27. Advanced CSS
  28. CSS pseudo-classes
  29. CSS gradients
  30. CSS transitions
  31. CSS animations
  32. CSS transform
  33. CSS responsiveness

Part 2

  1. CSS Basics
  2. Change the Color of Text
  3. Use CSS Selectors to Style Elements
  4. Use a CSS Class to Style an Element
  5. Style Multiple Elements with a CSS Class
  6. Change the Font Size of an Element
  7. Set the Font Family of an Element
  8. Size your Images
  9. Add Borders Around your Elements
  10. Add Rounded Corners with a Border Radius
  11. Make Circular Images with a Border Radius
  12. Use an ID Attribute to Style an Element
  13. Adjusting the Padding of an Element
  14. Adjust the Margin of an Element
  15. Add a Negative Margin to an Element
  16. Add Different Padding to Each Side of an Element
  17. Add Different Margins to Each Side of an Element
  18. Use Clockwise Notation to Specify the Padding of an Element
  19. Use Clockwise Notation to Specify the Margin of an Element
  20. Style the HTML Body Element
  21. Inherit Styles from the Body Element
  22. Prioritize One Style Over Another
  23. Override Styles in Subsequent CSS
  24. Override Class Declarations by Styling ID Attributes
  25. Override Class Declarations with Inline Styles
  26. Override All Other Styles by using Important
  27. Use Hex Code for Specific Colors
  28. Use Hex Code to Mix Colors
  29. Use Abbreviated Hex Code
  30. Use RGB values to Color Elements
  31. Use RGB to Mix Colors

Learn Responsive Design

with Bootstrap

Learn Responsive Design

Bootstrap is one of the most popular HTML/CSS front-end framework in the world for responsive mobile-first web development. One major advantage is it takes care of most heavy-lifting works for responsive web design which allows to display your website properly across various size devices.

Bootstrap offers predefined classes styling for most HTML elements, various CSS components, a great grid system and javascript plugins out of the box, which make development flexible, easy and fun experience.

  1. Use Responsive Design with Bootstrap Fluid Containers
  2. Make Images Mobile Responsive
  3. Center Text with Bootstrap
  4. Create a Bootstrap Button
  5. Create a Block Element Bootstrap Button
  6. Taste the Bootstrap Button Color Rainbow
  7. Call out Optional Actions with Button Info
  8. Warn your Users of a Dangerous Action
  9. Use the Bootstrap Grid to Put Elements Side By Side
  10. Ditch Custom CSS for Bootstrap
  11. Use Spans for Inline Elements
  12. Create a Custom Heading
  13. Add Font Awesome Icons to our Buttons
  14. Add Font Awesome Icons to all of our Buttons
  15. Responsively Style Radio Buttons
  16. Responsively Style Checkboxes
  17. Style Text Inputs as Form Controls
  18. Line up Form Elements Responsively with Bootstrap
  19. Create a Bootstrap Headline
  20. House our page within a Bootstrap Container Fluid DIV
  21. Create a Bootstrap Row
  22. Split your Bootstrap Row
  23. Create Bootstrap Wells
  24. Add Elements within your Bootstrap Wells
  25. Apply the Default Bootstrap Button Style
  26. Create a Class to Target with jQuery Selectors
  27. Add ID Attributes to Bootstrap Elements
  28. Label Bootstrap Wells
  29. Give Each Element a Unique ID
  30. Label Bootstrap Buttons
  31. Use Comments to Clarify Code

Learn jQuery

Learn jQuery

jQuery is a lightweight “write less, do more” JavaScript library created by John Resig in 2006. It is written on top of javascript to create coding short-cut which allow developers to write less code. It simplifies DOM manipulation, event handling, Ajax calls and other functions for rapid web development.

  1. Learn how Script Tags and Document Ready Work
  2. Target HTML Elements with Selectors Using jQuery
  3. Target Elements by Class Using jQuery
  4. Target Elements by ID Using jQuery
  5. Delete your jQuery Functions
  6. Target the same element with multiple jQuery Selectors
  7. Remove Classes from an element with jQuery
  8. Change the CSS of an Element Using jQuery
  9. Disable an Element Using jQuery
  10. Change Text Inside an Element Using jQuery
  11. Remove an Element Using jQuery
  12. Use appendTo to Move Elements with jQuery
  13. Clone an Element Using jQuery
  14. Target the Parent of an Element Using jQuery
  15. Target the Children of an Element Using jQuery
  16. Target a Specific Child of an Element Using jQuery
  17. Target Even Numbered Elements Using jQuery
  18. Use jQuery to Modify the Entire Page

Learn Basic JavaScript

Learn Basic JavaScript

JavaScript is the programming language for the web. It adds behaviour and interactivity to the web and primarily used by web browser. Years ago it was simply a client-sided scripting language but since the last decade, it has been expanded into back-end/server-side programming language as well as mobile & game development.

  • 1 Comment your JavaScript Code
  • 2 Declare JavaScript Variables
  • 3 Storing Values with the Assignment Operator
  • 4 Initializing Variables with the Assignment Operator
  • 5 Understanding Uninitialized Variables
  • 6 Understanding Case Sensitivity in Variables
  • 7 Add Two Numbers with JavaScript
  • 8 Subtract One Number from Another with JavaScript
  • 9 Multiply Two Numbers with JavaScript
  • 10 Divide One Number by Another with JavaScript
  • 11 Increment a Number with JavaScript
  • 12 Decrement a Number with JavaScript
  • 13 Create Decimal Numbers with JavaScript
  • 14 Multiply Two Decimals with JavaScript
  • 15 Divide one Decimal by Another with JavaScript
  • 16 Finding a Remainder in JavaScript
  • 17 Compound Assignment With Augmented Addition
  • 18 Compound Assignment With Augmented Subtraction
  • 19 Compound Assignment With Augmented Multiplication
  • 20 Compound Assignment With Augmented Division
  • 21 Convert Celsius to Fahrenheit
  • 22 Declare String Variables
  • 23 Escaping Literal Quotes in Strings
  • 24 Quoting Strings with Single Quotes
  • 25 Escape Sequences in Strings
  • 26 Concatenating Strings with Plus Operator
  • 27 Concatenating Strings with the Plus Equals Operator
  • 28 Constructing Strings with Variables
  • 29 Appending Variables to Strings
  • 30 Find the Length of a String
  • 31 Use Bracket Notation to Find the First Character in a String
  • 32 Understand String Immutability
  • 33 Use Bracket Notation to Find the Nth Character in a String
  • 34 Use Bracket Notation to Find the Last Character in a String
  • 35 Use Bracket Notation to Find the Nth-to-Last Character in a String
  • 36 Word Blanks
  • 37 Store Multiple Values in one Variable using JavaScript Arrays
  • 38 Nest one Array within Another Array
  • 39 Access Array Data with Indexes
  • 40 Modify Array Data With Indexes
  • 41 Access Multi-Dimensional Arrays With Indexes
  • 42 Manipulate Arrays With push()
  • 43 Manipulate Arrays With pop()
  • 44 Manipulate Arrays With shift()
  • 45 Manipulate Arrays With unshift()
  • 46 Shopping List
  • 47 Write Reusable JavaScript with Functions
  • 48 Passing Values to Functions with Arguments
  • 49 Global Scope and Functions
  • 50 Local Scope and Functions
  • 51 Global vs. Local Scope in Functions
  • 52 Return a Value from a Function with Return
  • 53 Assignment with a Returned Value
  • 54 Stand in Line
  • 55 Understanding Boolean Values
  • 56 Use Conditional Logic with If Statements
  • 57 Comparison with the Equality Operator
  • 58 Comparison with the Strict Equality Operator
  • 59 Comparison with the Inequality Operator
  • 60 Comparison with the Strict Inequality Operator
  • 61 Comparison with the Greater Than Operator
  • 62 Comparison with the Greater Than Or Equal To Operator
  • 63 Comparison with the Less Than Operator
  • 64 Comparison with the Less Than Or Equal To Operator
  • 65 Comparisons with the Logical And Operator
  • 66 Comparisons with the Logical Or Operator
  • 67 Introducing Else Statements
  • 68 Introducing Else If Statements
  • 69 Logical Order in If Else Statements
  • 70 Chaining If Else Statements
  • 71 Golf Code
  • 72 Selecting from many options with Switch Statements
  • 73 Adding a default option in Switch statements
  • 74 Multiple Identical Options in Switch Statements
  • 75 Replacing If Else Chains with Switch
  • 76 Returning Boolean Values from Functions
  • 77 Return Early Pattern for Functions
  • 78 Counting Cards
  • 79 Build JavaScript Objects
  • 80 Accessing Objects Properties with the Dot Operator
  • 81 Accessing Objects Properties with Bracket Notation
  • 82 Accessing Objects Properties with Variables
  • 83 Updating Object Properties
  • 84 Add New Properties to a JavaScript Object
  • 85 Delete Properties from a JavaScript Object
  • 86 Using Objects for Lookups
  • 87 Testing Objects for Properties
  • 88 Manipulating Complex Objects
  • 89 Accessing Nested Objects
  • 90 Accessing Nested Arrays
  • 91 Record Collection
  • 92 Iterate with JavaScript For Loops
  • 93 Iterate Odd Numbers With a For Loop
  • 94 Count Backwards With a For Loop
  • 95 Iterate Through an Array with a For Loop
  • 96 Nesting For Loops
  • 97 Iterate with JavaScript While Loops
  • 98 Profile Lookup
  • 99 Generate Random Fractions with JavaScript
  • 100 Generate Random Whole Numbers with JavaScript
  • 101 Generate Random Whole Numbers within a Range
  • 102 Sift through Text with Regular Expressions
  • 103 Find Numbers with Regular Expressions
  • 104 Find Whitespace with Regular Expressions
  • 105 Invert Regular Expression Matches with JavaScript

Final Project: HTML5 / CSS3 Website: BootStrap 4, jQuery & JavaScript via an API.

About Us

About Us

We started Markham Hill because we believe that everyone should have an opportunity to learn to code. Our goal is to provide this opportunity to people of all-ages to express themselves with code. Our "Code & Coffee Club" is offers beginner-friendly web development courses as well as opportunities to collaborate on multiple projects with developers in the future.