Share Description
Do you realize that the only functionality of a web application with which the user interacts directly is via the web page? Implement it incorrectly, and the server-side becomes irrelevant to the user! The modern user expects a lot from a web page: it must load quickly, expose the desired service, and be easy to view on all devices, from desktop computers to tablets and mobile phones.
In this course, we will learn the fundamental tools that every web page coder should be familiar with. We'll start from the ground up, learning how to use HTML and CSS to create modern web pages. We will then learn how to code our pages so that their components automatically rearrange and resize themselves based on the size of the user's screen. You'll be able to create a web page that works equally well on a mobile phone as it does on a desktop computer. There is no need to "pinch and zoom"! Last but not least, we'll get a thorough introduction to Javascript, the most ubiquitous, popular, and incredibly powerful web language. You will be able to create a fully functional web application that uses Ajax to expose server-side functionality and data to the end user using Javascript.
Syllabus :
1. Introduction to HTML5
- Development Environment Setup, Part 1
- Development Environment Setup, Part 2: MacOS
- Development Environment Setup, Part 2: Windows
- Development Environment Setup, Part 3: Github and Browser Sync
- Resources for Asking Questions
- What is HTML?
- Relevant History of HTML
- Anatomy of an HTML Tag
- Basic HTML Document Structure
- HTML Content Models
- Heading Elements (and some new HTML5 semantic comments)
- Lists
- HTML Character Entity References
- Creating Links
- Displaying Images
2. Introduction to CSS3
- Power of CSS
- Anatomy of a CSS Rule
- Element, Class, and ID Selectors
- Combining Selectors
- Pseudo-Class Selectors
- Style Placement
- Conflict Resolution
- Styling Text
- The Box Model
- The background Property
- Positioning Elements by Floating
- Relative and Absolute Element Positioning
- Media Queries
- Responsive Design
- Introduction to Twitter Bootstrap
- The Bootstrap Grid System
3. Coding the Static Restaurant Site
- Visit with the Client
- Visit with the Client (Field Trip)
- Design Overview
- Some Ground Rules and Overview of Setup
- Coding Basics of Navbar Header
- Coding Button for Future Collapsible Menu
- Coding Nav Menu Buttons
- Fixing Navbar Layout, Text, and Dropdown Menus
- Coding the Jumbotron
- Coding Navigation Tiles
- Coding the Footer
- Coding the Menu Categories
- Coding the Single Menu Category Page
- Testing the Mobile Version on a Real Phone
4. Introduction to Javascript
- Adjusting Development Environment for Javascript Development
- Where to Place Javascript Code
- Defining Variables, Function, and Scope
- Javascript Types
- Common Language Constructs
- Handling Default Values
- Creating Objects Using 'new Object()' Syntax
- Creating Objects Using Object Literal Syntax
- Functions Explained
- Passing Variables by Value vs. by Reference
- Function Constructors, prototype, and the 'this' Keyword
- Object Literals and the 'this' Keyword
- Arrays
- Closures
- Part 1: Fake Namespaces
- Part 2: Immediately Invoked Function Expressions (IIFEs)
5. Using Javascript to Build Web Applications
- DOM Manipulation
- Handling Events
- The 'event' Argument
- HTTP Basics
- Ajax Basics
- Processing JSON
- Fixing Mobile Nav Menu Automatic Collapse
- Dynamically Loading Home View Content
- Dynamically Loading Menu Categories View
- Dynamically Loading Single Category View
- Changing 'active' Button Style Through Javascript
