Lecture Notes

Section 1: Introduction

Web Development Masterclass - Introduction
Course Learning Objectives
Locating Assessments and Course Files

Section 2: How the Internet Works

The Internet Overview
The HTTP Protocol
The HTTPS Protocol
The SMTP Protocol and Local Mail Delivery
Outbound Mail Delivery
Network Basics - LAN and WAN
Network Ports and Firewalls

Section 3: The Web Development Process

Web Development Process Overview

Section 4: Planning a Website

Web Application Planning Overview

Section 5: Web Hosting and System Requirements

Web Hosting Packages Overview
Shared Hosting
Dedicated Hosting
VPS Hosting
Cloud Hosting and Case Study

Section 6: Domain Names

Introduction to Domain Names
Domain Name Registrars
Domain Registration
Registration and Privacy Protection
Control Panel Sign-In
Auto-Renewal and Domain Lock
Domain Forwarding
Nameservers
Update Registration Information

Section 7: Testing Environment

Introduction to Testing Servers
Installing WampServer - WAMP
Installing MampServer - MAMP
WampServer Menu
Localhost File Test

Section 8: Production Environment

Overview
Cloud Hosting Registration
Creating a Virtual Server
Linode Settings and Configuration
Deploying an Image - Ubuntu 14.04 LTS
Linode Dashboard
Remote Access
Download PuTTY and PuTTYgen - Windows
Launch Terminal - MAC
Intro to Command Console
Connecting with PuTTY - Windows
Connecting with Terminal - MAC
Maintenance Commands
File and Directory Commands
Installing LAMP Stack
Server Host Name and Date
Creating a User - Ubuntu
Ubuntu SSH Authentication - Windows
Ubuntu SSH Authentication - MAC
Web Root Permissions
Remote Dekstop Connection
Installing Tight VNC Viewer - Windows
Installing RealVNC Viewer - MAC
Ubuntu Desktop Basics
Disable Root and Password Access
Re-sizing a Linode Server
Creating Backups on Linode
Changing Root Password through Linode
Linode DNS Manager
Amending GoDaddy Name Servers

Section 9: FTP Setup

FTP Client Installation
FileZilla Overview
FileZilla Uploading
FileZilla Interface Basics

Section 10: HTML Development

Introduction to HTML
Basic Structure of a Web Page
HTML Head Tags
HTML Body Tag
HTML Paragraph Spacing
HTML Line Breaks
HTML Non-Breaking Space
HTML Header Tags
HTML Text Formatting and Decoration
HTML Inline Text Formatting
HTML Unordered Lists
HTML Ordered Lists
HTML Image Insertion
HTML Embedding Videos
HTML Absolute vs. Relative File Referencing
HTML Link Creation
HTML Anchor Tags
HTML Tables
HTML Nested Tables
HTML Merging Cells
HTML Text Wrapping
HTML Table Background Image
HTML Table Cell Alignment
HTML - Introduction to Forms
HTML Form Tags and Attributes
HTML Forms - Post vs. Get
HTML Forms - Input Text Fields
HTML Forms - Select Menus
HTML Forms - Check Boxes and Radio Buttons
HTML Forms - Text Areas and Buttons
HTML Iframes
HTML Project - Introduction
HTML Project - Header
HTML Project - Callout
HTML Project - Image Insertion
HTML Project - Text Insertion
HTML Project - Links and Form
HTML Project - Tabular Data
HTML Project - Footer

Section 11: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Section 12: Document Object Model (DOM)

DOM Introduction
DOM Manipulation

Section 13: JavaScript Development

JavaScript - Introduction
JavaScript Placement
External JavaScript
JavaScript Output
JavaScript InnerHTML
JavaScript Commenting
JavaScript Constants
JavaScript Variables Introduction
JavaScript Assignment Operator
JavaScript Arithmetic Operations
JavaScript Arithmetic Operations Continued
JavaScript Operator Precedence
JavaScript Data Types
JavaScript Objects
JavaScript Object Output
JavaScript Strings
JavaScript String Length
JavaScript Special Characters
JavaScript Random Numbers
JavaScript Min and Max Function
JavaScript Math Round Function
JavaScript Arrays
JavaScript Array Attributes
JavaScript Arrays - Pop - Push - Shift - Unshift
JavaScript Changing and Deleting Elements
JavaScript Splicing an Array
JavaScript Sorting an Array
JavaScript Joining Arrays
JavaScript Conditional Statements
JavaScript Comparisons
JavaScript Booleans
JavaScript For Loops
JavaScript For-In Loop
JavaScript While Loops
JavaScript Do-While Loop
JavaScript Break and Continue
JavaScript Functions
JavaScript Events
JavaScript Project 1 - BG Color Changer
JavaScript Project 2 - Photo Gallery
JavaScript Project 2 - Completion

Section 14: jQuery Library

Introduction to jQuery
Embedding jQuery
jQuery Syntax and Selector Intro
jQuery ID Selector
jQuery Class Selector
jQuery Other Selectors
External jQuery File
jQuery Events Intro
jQuery Events - mouseenter and mouseleave
jQuery Events - mousedown and mouseup
jQuery Multiple Event Handlers
jQuery Hiding-Showing
jQuery Toggle
jQuery Fade In-Out
jQuery Fade Toggle
jQuery Fade To
jQuery Slide Down
jQuery Slide Up
jQuery Slide Toggle
jQuery Animate
jQuery Animate - Multiple Params
jQuery Animate - Relative Values
jQuery Animate - Queue Functionality
jQuery Stop Method
jQuery Callback Functions
jQuery Chaining
jQuery Draggables
jQuery Accordian Menu
jQuery Get Content - text and html
jQuery Get Content - Val
jQuery Get Content - attr
jQuery Set Content - text - html - val
jQuery Set Attributes - attr
jQuery Append and Preprend
jQuery - After and Before
jQuery Remove and Empty
jQuery Filter Remove
jQuery Add Class
jQuery Remove Class
jQuery Toggle Class

Section 15: Bootstrap Framework

Introduction to Bootstrap
Embedding Bootstrap
Bootstrap - Basic Page Structure
Bootstrap Grid System
Bootstrap Three Column Layouts
Bootstrap Typography
Bootstrap Tables
Bootstrap Styling Images
Bootstrap Jumbotron
Bootstrap Wells
Bootstrap Alerts
Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Justified Button Groups
Bootstrap Glyphicons
Bootstrap Badges and Labels
Bootstrap Progress Bars
Bootstrap Pagination
Bootstrap Pager Pagination
Bootstrap List Groups
Bootstrap Panels
Bootstrap Dropdown Menus
Bootstrap Collapsibles
Bootstrap Collapse Panel
Bootstrap Collapse List Group
Bootstrap Accordian
Bootstrap Tab Menus
Bootstrap Pill Menus
Bootstrap Dynamic Tabs and Pills
Bootstrap Navigation Bar
Bootstrap Collapsible Navigation Bar
Bootstrap Forms - Vertical and Inline
Bootstrap Inputs
Bootstrap Form Control States
Bootstrap Input Sizing
Bootstrap Carousel
Bootstrap Modal
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Scrollspy
Bootstrap Project - Themes Intro
Bootstrap Project - File Overview
Bootstrap Project - Script Overview
Bootstrap Project - Script Overview Continued

Section 16: PHP Development

PHP Introduction
PHP Preparation
PHP File Test
PHP Syntax
PHP Variables
PHP Variable Scope
PHP Global Keyword
PHP Static Keyword
PHP Echo vs Print
PHP Data Types
PHP Objects
PHP Strings
PHP Constants
PHP Operators
PHP Conditional Statements
PHP ElseIf Statement
PHP Switch Statement
PHP While Loops
PHP For Loops
PHP Functions
PHP Functions Continued
PHP Arrays
PHP Multidimensional Arrays
PHP Sorting Arrays
PHP Superglobal Variables
PHP Forms Introduction
PHP POST vs GET Basics
PHP Form Output and Validation
PHP Form Required Fields
PHP Validation Continued

Section 17: MySQL Database Integration

Introduction to MySQL Databases
Introduction PhpMyAdmin
PhpMyAdmin Interface Overview
MySQL Security and Root Superuser
MySQL Creating a Database and Table
MySQL Creating a New User
MySQL Database and Table Specific Privileges
MySQL Modifying and Deleting a Table
MySQL Modifying and Deleting a Database
Introduction to SQL
SQL Statements in PhpMyAdmin
Connect to MySQL Database using PHP
MySQL Database - Import Data
SQL Select
SQL Distinct Keyword
SQL Where Clause
SQL And Operator
SQL Or Operator
SQL Order By
MySQL Insert Into
MySQL Get Last ID
MySQL Insert Multiple Records
MySQL Prepared Statements
MySQL Delete Records
PHP Header Function
PHP Isset
MySQL Update Records

Section 18: XML l AJAX

Introduction to XML
XML Basics
XML Schema
XML Parsing
XML Parsing Continued
Introduction to AJAX
AJAX - Search Suggest Tutorial
AJAX - Database Select Menu Tutorial

Section 19: Development Project

Development Overview
Project Setup
Index Page Overview
Home Page Mods
About Page Mods
Blog Page Mods
MySQL Database Creation
Creating a Registration Form
Registration Status using JavaScript and AJAX
PHP Validation - Encryption - Session
Login Authentication - Part 1
Login Authentication - Part 2
Login Authentication - Part 3
Login Authentication - Part 4
Logout - Terminate Session
Contact Page - Google Maps API
Contact Form - AJAX Integration
PHPMailer Installation
PHP Form Validation and Email Transmission
Production Server Migration

Section 20: Google Apps for Work

Google Apps for Work - Introduction
Google Apps for Work - Registration
Google Apps for Work - Admin Console
×
More

Lecture Notes

Course: Web Development Masterclass View Course Outline


Created by:

YouAccel

Lectures:

350

Duration:

19h 25m 44s

Skill Level:

All Levels

Language:

English

Students Enrolled:

144,035

Rating:

(1,659)

Certification Type:

Completion Certificate

Lecture: Bootstrap Styling Images

Bootstrap can be used to style images. We can create rounded corners, circular shapes and thumbnails.

  • To add rounded corners, simply add the img-rounded class to the image element.

  • To shape the image into a circle add the img-circle class.

  • The img-thumbnail class will add a thin light border around the image and slightly round the corners.

  • We can make images responsive by adding the img-responsive class.
    Responsive images automatically adjust to fit the devices view port.

Final Script:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">

<img class="img-responsive" src="beach.jpg" width="500" height="300">

</div>

</body>
</html>