Share Description
In this course, you will learn :
- Brief overview of HTML, CSS, and JS.
- Able to experiment with them by following along with examples that explain their role and behaviour.
- You will delve deeply into each technology, investigating concepts such as forms and controls in HTML, OOP in JavaScript, and the most important CSS patterns to make your web pages look good.
- Able to create your own responsive, stylized, and performant web applications.
Syllabus :
1. A Short Tour of HTML, CSS, and JavaScript
- Getting Started with Live Coding!
- Hands-On: Diving into HTML Basics
- How it Works: Creating a Basic HTML Page
- Hands-On: Formatting the HTML Page
- How It Works: Formatting Our HTML Page
- Inline Styling Our HTML Page
- Hands On: Using an Embedded Style Sheet
- How It Works: Using an Embedded Style Sheet
- Hands On: Moving Styles into a Separate File
- How It Works: Moving Styles into a Separate File
- Hands On: Defining Visual Behavior with CSS
- How It Works: Defining Visual Behavior with CSS
- Hands On: Adding Actions to the Web Page with JavaScript
- How It Works: Adding Actions to the Web Page with JS
- Meeting the DOM
- Leveraging Page Inspector
- Hands On: Using jQuery
- How jQuery Works
- Debugging JavaScript
2. HTML5: First Impressions and Beyond
- The Unordinary Story of HTML5
- What's Behind the Term HTML5?
- HTML5 Markup Basics
- Using HTML <head>
- Defining HTML Content
- Enriching Web Pages: Rendering Text
- Rendering Text: Code Along Exercises
- Using Reserved Characters and Symbols in HTML
- Adding Paragraphs and Text Breaks in HTML
- Enriching Web Pages: Adding Headings
- Enriching Web Pages: Adding Lists
- Enriching Web Pages: Adding Links
- Enriching Web Pages: Adding Images
- Lists, Links, and Images: Bonus Fun Exercise!
3. Achieving Richer User Experience with HTML
- What it's All About
- Old Style: The Omnipotent <div>
- Structure and Semantics
- Headers
- HTML Footers
- Sections
- Figures in the Page
- Sidebars
- Navigation
- Other Semantic Elements
- World of HTML Tables
- Defining a Simple Table in HTML
- Spanning Rows and Columns
- Markup for Table Headers
- Defining Styles for Tables
- Table Captions
- Compound Tables
- Hands On: Scrolling the Table Body
- How It Works: Scrolling the Table Body
- Making Things Exciting With Multimedia
- New HTML5 Markup
- How It Works: Using the Video Tag
- Hands On: Using the Video Tag
- Video Formats
- Hands On: Supporting Multiple Video Formats
- How It Works: Supporting Multiple Video Formats
- Video Resilient Web Pages and the Audio Tag
- What You Cannot Do with <video> and <audio>
4. Forms and Controls
- Web Forms Basics
- Hands On: Representing Web Forms in HTML
- Controls Overview
- Hands On: Using Controls to Build Web Forms
- How It Works: Using Controls to Build Web Forms
- Hands On: Using Controls that Allow Specifying Options
- Hands On: Sending and Processing Form Data
- How it Works: Sending and Processing Form Data
- Hands On: Catching Data at the Server
- How it Works: Catching Data at the Server
- Using GET and POST
- Hands On: Making Use of More Controls
- How it Works: Making Use of More Controls
- Using Hidden Fields
- Using <optgroup> in Dropdown Lists
- Using Buttons
- Form Validation
- Validation Attributes
- Validation and JavaScript
5. A Few More Things On HTML
- Other HTML Elements
- Thematic Breaks
- Quotes
- Images and Mappings
- Visualizing Progress
- Refining Markup Details
- Inline Frames
- Custom Attributes
- Hands On: Painting the Canvas
- How it Works: Painting the Canvas
- Hands On: Vivifying the Canvas
- How it Works: Vivifying the Canvas
- Hands On: Drawing the Trajectory
- How it Works: Drawing the Trajectory
- What Else You Can Do with a Canvas
- Facing the Past and Future of HTML5
- Issues with New HTML5 Tags
- HTML5 Tools and Validation
- Checking HTML5 Compatibility
6. Delving into the Document Object Model
- DOM Basics
- Ubiquitous Language of Page Representation
- Cornerstone of Interactions
- The DOM Application Programming Interface
- What the DOM Covers
- Hands On: Querying the Document
- How it Works: Querying the Document
- Hands On: Changing the DOM
- How it Works: Changing the DOM
- Hands On: Completing Event Handling
- Navigating in the Document Tree
- Node Navigation Basics
- Accessing Element Content
- A Brief Navigation Reference
- Element Specific Properties
- Changing the Document Tree
- Adding New Child Elements to the Document
- Adding Adjacent Elements
- Removing and Replacing Elements
- Changing Attributes and Element Style
- Using Event Parameters
- Going Global: Global Attributes
- Going Global: Global Events
7. Entering the Realm of JavaScript
- A Couple of JavaScript Peculiarities
- A Brief History of JavaScript
- Objects and Dynamism
- Functions are First Class Citizens
- Regular Expression Literals
- Placing JavaScript in HTML
- JavaScript Syntax Basics
- Variables
- Types
- Argument Passing
- Understanding Scopes
- Working With the Boolean Type
- Working With the Number Type
- Converting to the Number Type
- Number Methods
- Working With the String Type
- Converting to Strings
- String Properties and Functions
- Working With the Date Type
- Working With the Object Type
- A Quick Overview of Function Prototypes
- Instance Properties and Methods
- Working With the Array Type
- Array Conversions
- Array Operations: Creating Stacks and Queues
- Array Methods to Manipulate Strings
- Array Methods to Change Element Ordering
- Advanced Array Operations
- Unary Operators
- Arithmetic Operators
- Equality Operators
- Relational and Boolean Operators
- Bitwise Operators
- Assignment Operators
- Conditional, Comma, typeof, and instanceof Operators
- Operator Precedence
- The if, while, and do-while Statements
- The for and for-in loops
- The switch and with Statements
8. Advanced JavaScript Programming
- The JavaScript Object Notation
- Serializing and Parsing JSON
- Functions
- Specifying Function Expressions
- Recursive Functions
- Closures
- Programming with Objects
- Object Properties
- Removing Object Properties
- Instantiating Objects
- Using Object Prototypes
- Object Inheritance
- Modularity
- The Browser Object Model
- Methods of the Windows Object
- The History Object
- The Location Object
- The Navigator Object
- The Screen Object
- Error Handling
- The onerror Event
- Managing Errors
9. Introducing CSS in Style
- Styles and Cascading Style Sheets
- Styling Page Elements
- CSS At-Rules
- The Concept of Cascading
- Selectors
- Attribute selectors
- Group Selectors and the Universal Selector
- Pseudo-Element and Pseudo-Class Selectors
- Descendent Selectors
- Child Selectors
- Sibling Selectors
- Other Selectors
- Style Properties
- Colors
- Length, Size Types and URL Values
- Baseline Style Sheet
- The Cascading Order
- Selector Group Priorities
- Calculating Selectivity
- Location Priorities
- Media-Dependent Style Sheets
- Adding Media Style Sheets
- Media Queries
10. Basic Style Patterns
- Text Formatting
- Font Type, Size, and Color
- Text Styles
- Paragraphs
- Styling Lists
- Using Web Fonts
- The Box Model
- Margins and Paddings
- Special Behavior of Margins
- Setting Up Borders
- Height and Width of the Box
- Boxing Inline Elements
- Using Floating Elements
- Using Background Images
- Positioning Background Images
- Aligning Background Images with Borders and Paddings
- Sizing Background Images
- The Background Shorthand Notation
- Styling Tables
- Basic Font and Colors
- Adjusting Text
- Setting Up Table-Specific Properties
- Styling Tips for Forms
11. The Voyage Ahead
- Career Paths After This Course
- Learning Paths After This Course
