Basic Computing Knowledge
  • Bit and Byte
  • Essential Encoding Knowledge
  • Memory Address, Pointer and Byte Addressing
  • The Bit Width of Memory Address
Basic TCP/IP knowledge
  • TCP/IP introduction and the four layers
  • The application layer and how COOKIE works
  • The transport layer: three-way handshake
  • The transport layer: four-way wave
  • The transport layer: HTTP Keep-Alive vs. TCP keepalive
  • The internet layer
  • Port and scoket
  • The full process
Basic web hardware knowledge
  • Cables
  • Hub and switch
  • Bridge and router
  • NAT and DHCP
Start coding and working on the invisible part
  • The first line of your HTML code: version declaration
  • HTML Rules and Grammars
  • The four indispensable HTML tags
  • Create your first standard HTML file
  • Adding a Favicon
  • Use META to achieve better SEO results
  • Use META for multilingual web pages
  • Use META for page behaviour control: auto page renewal, etc.
Creating the visible part
  • Front-end development for dynamic websites
  • Page Structure Analysis
  • How to display texts properly
CSS: Cascading Style Sheet
  • CSS Introduction
  • Inline CSS: Part 1
  • Inline CSS: Part 2
  • Internal CSS and CSS Type Selector: Part 1
  • Internal CSS and CSS Type Selector: Part 2
  • Class and ID Selector-- More Accurate Control
  • The Priority Order of CSS Selectors
Vital Difference between BLOCK and INLINE tags
  • SPAN and the concept of BLOCK and INLINE tags
  • The Difference between BLOCK and INLINE Tags PART 1
  • The Difference between BLOCK and INLINE Tags PART 2
  • The Difference between BLOCK and INLINE Tags PART 3
  • Initialising CSS: Getting Rid of Default CSS Styles
  • Miscellansous Issues about Styling Texts
  • Use Your Own Font
  • For Responsive Web Design: Using EM, Not Pixel
Image Display and things you should pay attention to
  • Display Image: Part 1
  • Image Display Part 2
  • The INLINE-BLOCK Type
  • Things you should pay attention to when displaying images
  • Display ICON Part-1
  • Display ICON Part-2
  • Display ICON Part-3
  • Display ICON Part-4
Collect data: FORM and INPUT
  • INPUT Part-1
  • INPUT Part-2
  • INPUT Part-3
URL, External CSS and Comments
  • Relative URL-Part 1
  • Relative URL-Part 2
  • Relative URL-Part 3
  • External CSS
  • Comments
Hyperlink and Anchor
  • Two types of Hyperlinks
  • Creating the first type of Hyperlink
  • Open new page in the current window or in a new one
  • The second type of Hyperlink
  • Demonstration of creating the second type of hyperlink
  • Quasi selector and its applications
  • DISPLAY: conversion among BLOCK, INLINE and INLINE-BLOCK
TEXT-ALIGN and its challenges and applications
  • Getting ready for challenges
  • Position texts and non-text elements
  • Positioning clickable text inside the navigation button
  • The trap of TEXT-ALIGN Part 1
  • The Trap of TEXT-ALIGN Part 2
  • Real-life application: amazon footer
  • word-break
  • Vertical-align and Table-cell
  • Padding
Margin and its bugs, challenges, solutions and applications
  • Margin and its values
  • Why, when and where should we use Margin
  • The three application scenarios of MARGIN
  • Setting MARGIN to INLINE tags and related problems
  • Special Margin Value: AUTO and its application
  • Margin: Parent and Child DIV
  • Setting Margin: Siblings
  • Setting vertical margin to sibling images: Part 1
  • Setting vertical margin to sibling images: Part 2
  • Setting vertical margin to sibling images: Part 3
  • Percentage Value used by Margin
POSITION and its challenges, solutions and applications
  • Characters of normal-flow elements