The Full Stack Web Development

Learn HTML, the hypertext markup language, by exploring tags, attributes, and the document structure with doctype, head, and body. Build simple web pages using paragraphs, lists, images, and forms.

Set up a text editor like Sublime Text and create a basic html file to learn core html syntax, including doctype, html structure, headings, paragraphs, links, and images.

Explore lists and tables in HTML, including ordered, unordered, and description lists, and build tables with thead, tbody, tr, th, and td plus basic styling.

Learn to build multi-field forms with text, email, password inputs, selects with options, radio buttons, and checkboxes, including labeling, naming, and front-end validation.

Learn basic styling in CSS by building a simple page with a container div, using id vs class. Apply background color, borders, padding, and margins to style content.

Build a simple multi-page HTML template with CSS styling, navigation, and a floated two-column layout (main and sidebar), plus a basic contact form.

Explore HTML5's new features, syntax, and APIs, including canvas, SVG, drag-and-drop, storage, geolocation, and offline app cache, for building dynamic web apps with semantic elements like the header tag.

Explore HTML5 semantic elements by building a web page with header, nav, main, article, sidebar, and footer, using a container div and CSS floats for layout.

Learn to embed video and audio using the video and audio tags, add controls, autoplay, and loop, and control playback with JavaScript and custom interfaces.

Learn how to use the canvas element, set its width and height, and draw shapes, lines, text, and gradients with JavaScript.

Explore vector graphics with svg by building circles, rectangles, polygons, and an ellipse with text, using attributes such as x, y, r, width, height, stroke, and fill.

Learn to set, get, and remove items in localStorage and sessionStorage with JavaScript, including basic checks for browser support. Implement simple DOM updates and console logs to display stored values.

learn to implement HTML5 drag and drop using JavaScript to drag a logo into a styled box, with draggable image, drop zones, and contenteditable headings for quick inline editing.

Learn how to request user location with the geolocation API, retrieve latitude and longitude, display coordinates on screen, and handle browser support and server requirements.

Build an HTML5 note app with a contenteditable note stored in local storage, including get, save, and clear functions, plus a simple header and styling.

get started with css basics, learn how to include styles via style tags or external sheets, and use selectors and declarations to control color, fonts, layout, margins, padding, borders.

Explore basic css styling via internal styles, covering fonts, h1 color, text alignment, classes, and div boxes with padding, margins, borders, floats, clears, lists, and visibility and display properties.

Learn css positioning with static, relative, fixed, and absolute values through a wrapper and inner element example, and apply background images with no-repeat and background-position.

Explore how pseudo classes and selectors define element states such as hover, active, and focus, and apply first-child, last-child, nth-child, and even/odd patterns.

Learn to style with rounded corners, image borders, and border images; build multiple backgrounds and gradients; and use rgba, hsla, and hsl color systems for rich CSS aesthetics.

Apply text and box shadows in CSS to control offset, blur, and color. Build a simple card with a header and container that uses layered shadows to show shadow effects.

Learn CSS transitions and animations to smoothly grow width and height, change colors with keyframes, and control duration, delay, timing functions, and iteration count.

master css3 columns and flexbox through a hands-on project: use column-count, column-gap, and column-rule for multi-column layouts, and resizeable text boxes plus flex container, direction, justification, and item ordering.

Build a CSS3 dropdown menu with a three-tab navigation for web design, web programming, and graphic design. Apply rounded corners, gradients, shadows, and transitions to create hoverable dropdown content.

Explore Bootstrap, the open-source front-end framework for faster web development with HTML, CSS, typography, buttons, menus, and lists. Prototype quickly with templates, plugins, and a responsive 12-column grid across devices.

Learn to set up Bootstrap in a project using download or CDN, link the css and js, and implement a responsive navbar and jumbotron with Get Bootstrap templates.

Explore typography, forms, and tables with bootstrap, covering headings, alignment, text transforms, blockquotes, lists, and styled tables with contextual rows, plus form controls and inline forms.

Explore Bootstrap components by implementing buttons, inputs, and links with contextual classes, sizes, and button groups; use icons, breadcrumbs, pagination, labels, and badges to build polished UI.

Explore bootstrap components like list groups, panels, wells, alerts, and progress bars, using active states, contextual colors, and badges for clean, linked content. Introduces grid concepts for responsive layouts.

Master the Bootstrap grid system to layout content with a 12-column grid using container, row, and column classes, adapting with md and offset and nesting for responsive designs.

Explore bootstrap collapse, accordion, and carousel widgets, and learn to implement collapsible content with data-toggle attributes, plus indicators and navigation controls.

Build a simple Bootstrap theme strapped by applying a jumbotron, navbar, grid layout, wells, and icons, with a custom stylesheet and multi-page structure.

Build a bootstrap themed home page by expanding the jumbotron and nav bar, adding three feature boxes for mobile app development, media production, and internet marketing, plus a purple section.

Extend Bootstrap theme by adding inner pages—about, services, and contact—reusing the index layout, adjusting the jumbotron, and implementing a two-column content area with a collapsible section and a contact form.

Explore JavaScript as a high level, client-side programming language that runs in the browser. Learn core syntax and concepts like variables, arrays, loops, conditionals, objects, and functions, plus ECMAScript versions.

Explore JavaScript variables, arrays, and objects in the full stack web development context, and master output methods (console.log, document.write, alert) with arrays of objects and dot notation access (JSON-style data).

Master loops, conditionals, and switches in JavaScript through hands-on examples of for and while loops, array and object iteration, if-else logic, and a switch with default.

Master functions and events in JavaScript by defining and calling functions, handling parameters and returns, and wiring events with listeners for DOM updates and form handling.

Learn to build a registration form with vanilla JavaScript form validation, using Bootstrap CDN for styling, validating required fields, name length, email format, and password confirmation with dynamic alerts.

Explore how ajax updates parts of a web page without full reloads using XMLHttpRequest. See a button click fetch a text file with a get request and update the page.

Create a Bootstrap GitHub user profile viewer using Ajax to fetch data from the GitHub api, parse json, and display name, avatar, website, blog, email, and repo count.

Explore jQuery, the lightweight, fast JavaScript library that simplifies DOM manipulation, events, animations, and Ajax; learn selector syntax, document ready, and event handling with the dollar sign.

Explore selecting elements with jQuery, handling mouse events, and DOM manipulation. Learn to hide, show, toggle, and track the mouse position with click, hover, and move events.

Learn to handle form events with jQuery by building a simple form (name, location, category) using a CDN script, and implement focus, blur, change, submit, and keyboard events.

Master DOM manipulation with jQuery to create, modify, and remove elements. Apply HTML, CSS, text, and attributes, and use append, prepend, before, after, replace, and wrap.

Explore practical effects and animation techniques, showing how to hide, show, toggle, fade, slide, and animate elements with speed control and stop actions for dynamic interfaces.

Learn to traverse and filter the document object model using actions like parent, parents, children, find, siblings, and next. Apply until, first, and last to highlight elements in the dom.

Learn to build a jQuery image slider with the Cycle plugin, enable auto play, and apply effects such as fade and shuffle, with previous/next navigation and hover styles.

Discover Node.js as a server-side JavaScript platform with a fast, event-driven non-blocking model. Grasp require, fs, callbacks, npm, and popular tools like Express and Mongo D-B database.

Install Node.js on Windows, initialize a project with npm, create a package.json, and build a basic HTTP server that serves hello world and an index.html using fs. Run on 127.0.0.1:3000.

Install and configure express, set up middleware and body-parser, create routes such as / and /about, serve static files from a public folder, and run the server on port 3000.

Learn to integrate template engines with Express, using pug and ejs to render dynamic views. Build home, about, and contact templates with conditionals, loops, and includes, and apply bootstrap styling.

Explore how to set up and connect to MongoDB from Node.js, create databases and collections, and perform basic crud operations by inserting and finding documents.

Learn to build a Node app with the MongoDB driver, performing crud operations: insert, find, update with $set, and delete one, including querying by name.

Build a Node.js authentication system with passport, using MongoDB, Express, and ejs templates; implement login, registration, input validation, and protected routes.

Create the user interface by building index, login, and register views with bootstrap. Render these pages and serve static css with header includes for the home page.

Build a user registration form with express validator validation and crypt encryption, storing users in MongoDB via MongoJS, showing bootstrap alerts for errors and preserving input, redirecting on success.

hash passwords with bcrypt by generating a salt and hashing the user password before saving it to the database, then prepare login with passport's local strategy.

Build a login flow with Passport's local strategy, hashing and comparing passwords, and handling success and failure redirects and error messages, with serialized user sessions in MongoDB and Mongoose.

Implement access control using middleware to protect routes, display the authenticated user's name, and enable login and logout with passport including flash messages.

Explore Meteor, a full-stack JavaScript framework with client and server unity, using DDP for reactive data and MongoDB back-end, plus MiniMongo front-end and Blaze, React, or Angular for UI.

Install Meteor, create a quick todo project, and master core files and templates, including template helpers and reactive variables, to render a dynamic to-do list on the client.

Create a to-dos collection in a Meteor app by adding lib/collections.js and defining a new Mongo.Collection, then insert and fetch items and use a form to add text and time.

Create a to-do checklist with checkboxes that persist across reloads, toggle the checked state on click, implement delete functionality, and prepare for user accounts.

Add user accounts with meteor accounts UI and accounts-password, enable email or username login, store owner and username with todos, and hide the form for guests while preparing server-side methods.

Implement server-side methods to replace client calls, including insert, set checked, and remove, with login checks and secure access, and remove development package.

Create a publication and subscription model for the to-do collection, implement client-side subscribe and on-created lifecycle, and add owner-based controls to toggle private or public status and secure delete operations.

Install Bootstrap with the Meteor package manager to style the app, then apply container, form-control, inline form, and list group classes, adjust button styles, and verify the UI updates.

Explore angular 2 as a complete client-side framework for building dynamic web and mobile apps with TypeScript, components, and services, including directives, two-way data binding, and routing.

Learn to set up an angular 2 app from scratch by creating package.json, tsconfig.json, typings.json, and systemjs.config.js, installing dependencies with npm, and bootstrapping the module, component, and main files.

learn to bootstrap an angular 2 app fast by cloning the quickstart from github, then npm install and npm start to see the app run.

Create a simple profile component, bind properties to the template, and render addresses, avatars, and a friends list using ngFor and ngIf in an Angular quickstart.

Refactor the app by extracting the user profile into its own profile component, organizing it under a components folder, updating module declarations, and using a dedicated template and selector.

Explore Angular event binding and two-way data binding with ngModel by building a QuickStart app, handling click events, logging input values, and syncing text across the view and template.

Learn how to use Angular services to fetch and share blog posts across components, implement a mock data source, and return posts as a promise for asynchronous data handling.

Create a form to submit posts to a service, bind title and body with ngModel, prevent page reload, and prepare to fetch posts with the upcoming GTP module.

Learn to use the http module to fetch and post data from jsonplaceholder.typicode.com, with headers and json handling, and apply observables with the map operator to process data.

Explore routing in a simple Angular site by implementing a router to navigate between home, about, and services components, with app routing and router links.