Responsive Web Design and Front-end Development

About Course

After finishing this Responsive Web Design and Front-end Development training course, you can build an interactive website And will be able to work Freelancing Marketplace as a Responsive Web Designer.

A brief summary

Key Features

HTML5 for Creative Artwork
Responsive Website creation
Template conversion from PSD to HTML
JQuery for animated and lively Websites
Making responsive website easily with bootstrap
Enhance Website graphics with CSS3
Adobe Photoshop for template design
Javascript for functional website
Web template and element design
Cpanel, Hosting management and WordPress Customization

Content Covered:

HTML
CSS
Bootstrap
Javascript
ES6
React.js
Project
WordPress Customization
Cpanel an Site Management
Freelancing

Course Details

This training class is 90% hands-on, 10% lecture. Students learn by doing, with immediate opportunities to apply the material they learn to real-life project.

Download Course Outline

Download Now!

Facebook

Twitter

Course Content

Class 01-HTML Intro & Get started

How computer and internet works
How to create a HTML file
Say Hello to HTML Elements
Headline with the h2 Element
Inform with the Paragraph Element
Fill in the Blank with Placeholder Text
Uncomment HTML
Comment out HTML
Delete HTML Elements
Introduction to HTML5 Elements
Add Images to Your Website

Class 03-CSS Intro

Change the Color of Text
Use CSS Selectors to Style Elements
Use a CSS Class to Style an Element
Style Multiple Elements with a CSS Class
Change the Font Size of an Element
Set the Font Family of an Element
Import a Google Font
Specify How Fonts Should Degrade
Size Your Images
Add Borders Around Your Elements
Add Rounded Corners with border-radius
Make Circular Images with a border-radius
Give a Background Color to a div Element
Set the id of an Element
Use an id Attribute to Style an Element
Adjust the Padding of an Element
Adjust the Margin of an Element
Add a Negative Margin to an Element
Add Different Padding to Each Side of an Element
Add Different Margins to Each Side of an Element

Class 04-CSS other properties

Use Clockwise Notation to Specify the Padding of an Element
Use Clockwise Notation to Specify the Margin of an Element
Use Attribute Selectors to Style Elements
Understand Absolute versus Relative Units
Style the HTML Body Element
Inherit Styles from the Body Element
Prioritize One Style Over Another
Override Styles in Subsequent CSS
Override Class Declarations by Styling ID Attributes
Override Class Declarations with Inline Styles
Override All Other Styles by using Important
Use Hex Code for Specific Colors
Use Hex Code to Mix Colors
Use Abbreviated Hex Code
Use RGB values to Color Elements
Use RGB to Mix Colors
Use CSS Variables to change several elements at once
Create a custom CSS Variable
Use a custom CSS Variable
Attach a Fallback value to a CSS Variable
Improve Compatibility with Browser Fallbacks
Inherit CSS Variables
Change a variable for a specific area
Use a media query to change a variable

Class 05-CSS Flex

Use the flex-wrap Property to Wrap a Row or Column
Use the flex-shrink Property to Shrink Items
Use the flex-grow Property to Expand Items
Use the flex-basis Property to Set the Initial Size of an Item
Use the flex Shorthand Property
Use the order Property to Rearrange Items
Use the align-self Property
Use display: flex to Position Two Boxes
Add Flex Superpowers to the Tweet Embed
Use the flex-direction Property to Make a Row
Apply the flex-direction Property to Create Rows in the Tweet Embed
Use the flex-direction Property to Make a Column
Apply the flex-direction Property to Create a Column in the Tweet Embed
Align Elements Using the justify-content Property
Use the justify-content Property in the Tweet Embed
Align Elements Using the align-items Property
Use the align-items Property in the Tweet Embed

Class 06-CSS Grid

Create Your First CSS Grid
Add Columns with grid-template-columns
Add Rows with grid-template-rows
Use CSS Grid units to Change the Size of Columns and Rows
Create a Column Gap Using grid-column-gap
Create a Row Gap using grid-row-gap
Add Gaps Faster with grid-gap
Use grid-column to Control Spacing
Use grid-row to Control Spacing
Align an Item Horizontally using justify-self
Align an Item Vertically using align-self
Align All Items Horizontally using justify-items
Align All Items Vertically using align-items
Divide the Grid Into an Area Template
Place Items in Grid Areas Using the grid-area Property
Use grid-area Without Creating an Areas Template
Reduce Repetition Using the repeat Function
Limit Item Size Using the minmax Function
Create Flexible Layouts Using auto-fill
Create Flexible Layouts Using auto-fit
Use Media Queries to Create Responsive Layouts
Create Grids within Grids

Class 07-HTML & CSS Layout

Class 08-HTML & CSS Layout

Class 09-Bootstrap

Use Responsive Design with Bootstrap Fluid Containers
Make Images Mobile Responsive
Center Text with Bootstrap
Create a Bootstrap Button
Create a Block Element Bootstrap Button
Taste the Bootstrap Button Color Rainbow
Call out Optional Actions with btn-info
Warn Your Users of a Dangerous Action with btn-danger
Use the Bootstrap Grid to Put Elements Side By Side
Ditch Custom CSS for Bootstrap
Use a span to Target Inline Elements
Create a Custom Heading
Add Font Awesome Icons to our Buttons
Add Font Awesome Icons to all of our Buttons
Responsively Style Radio Buttons
Responsively Style Checkboxes
Style Text Inputs as Form Controls
Line up Form Elements Responsively with Bootstrap
Create a Bootstrap Headline
House our page within a Bootstrap container-fluid div
Create a Bootstrap Row
Split Your Bootstrap Row
Create Bootstrap Wells
Add Elements within Your Bootstrap Wells
Apply the Default Bootstrap Button Style
Create a Class to Target with jQuery Selectors
Add id Attributes to Bootstrap Elements
Label Bootstrap Wells
Give Each Element a Unique id
Label Bootstrap Buttons
Use Comments to Clarify Code

Class 10-Bootstrap Layout

Class 11-PSD to HTML Project Using Bootstrap

Class 12-Plugins integration

Class 13-Introducing JS

Comment Your JavaScript Code
Declare JavaScript Variables
Storing Values with the Assignment Operator
Assigning the Value of One Variable to Another
Initializing Variables with the Assignment Operator
Understanding Uninitialized Variables
Understanding Case Sensitivity in Variables
Add, Subtract, Multiply & Division Numbers with JavaScript
Increment & Decrement a Number with JavaScript
Create Decimal Numbers with JavaScript
Multiply & Divide Two Decimals with JavaScript
Finding a Remainder in JavaScript
Compound Assignment with Augmented Addition
Compound Assignment with Augmented Subtraction
Compound Assignment with Augmented Multiplication
Compound Assignment with Augmented Division

Class 14-JS Strings and Array

Declare String Variables
Escaping Literal Quotes in Strings
Quoting Strings with Single Quotes
Escape Sequences in Strings
Concatenating Strings with Plus Operator
Concatenating Strings with the Plus Equals Operator
Constructing Strings with Variables
Appending Variables to Strings
Find the Length of a String
Use Bracket Notation to Find the First Character in a String
Understand String Immutability
Use Bracket Notation to Find the Nth Character in a String
Use Bracket Notation to Find the Last Character in a String
Use Bracket Notation to Find the Nth-to-Last Character in a String
Store Multiple Values in one Variable using JavaScript Arrays
Nest one Array within Another Array
Access Array Data with Indexes
Modify Array Data with Indexes
Access Multi-Dimensional Arrays with Indexes
Manipulate Arrays With push()
Manipulate Arrays With pop()
Manipulate Arrays With shift()
Manipulate Arrays With unshift()
Shopping List
Word Blanks

Class 15-JS Function

Write Reusable JavaScript with Functions
Passing Values to Functions with Arguments
Global Scope and Functions
Local Scope and Functions
Global vs. Local Scope in Functions
Return a Value from a Function with Return
Understanding Undefined Value returned from a Function
Assignment with a Returned Value
Stand in Line

Class 16-JS If else if/ else& JS Switch

Understanding Boolean Values
Use Conditional Logic with If Statements
Comparison with the Equality Operator
Comparison with the Equality Operator
Comparison with the Strict Equality Operator
Practice comparing different values
Comparison with the Inequality Operator
Comparison with the Strict Inequality Operator
Comparison with the Greater Than Operator
Comparison with the Greater Than Or Equal To Operator
Comparison with the Less Than Operator
Comparison with the Less Than Or Equal To Operator
Comparisons with the Logical And Operator
Comparisons with the Logical Or Operator
Introducing Else Statements
Introducing Else If Statements
Logical Order in If Else Statements
Chaining If Else Statements
Golf Code
Selecting from Many Options with Switch Statements
Adding a Default Option in Switch Statements
Multiple Identical Options in Switch Statements
Replacing If Else Chains with Switch
Returning Boolean Values from Functions
Return Early Pattern for Functions
Build JavaScript Objects
Accessing Object Properties with Dot Notation
Accessing Object Properties with Bracket Notation
Accessing Object Properties with Variables
Updating Object Properties
Add New Properties to a JavaScript Object
Delete Properties from a JavaScript Object
Using Objects for Lookups
Testing Objects for Properties
Manipulating Complex Object
Accessing Nested Objects
Accessing Nested Arrays
Record Collection

Class 17-Js For&While Loops & others

Iterate with JavaScript While Loops
Iterate with JavaScript For Loops
Iterate Odd Numbers With a For Loop
Count Backwards With a For Loop
Iterate Through an Array with a For Loop
Nesting For Loops
Iterate with JavaScript Do…While Loops
Replace Loops using Recursion
Profile Lookup
Generate Random Fractions with JavaScript
Generate Random Whole Numbers with JavaScript
Generate Random Whole Numbers within a Range
Use the parseInt Function
Use the parseInt Function with a Radix
Use the Conditional (Ternary) Operator
Use Multiple Conditional (Ternary) Operators
Use Recursion to Create a Countdown
Use Recursion to Create a Range of Numbers

Class 18-ES6 intro

Explore Differences Between the var and let Keywords
Compare Scopes of the var and let Keywords
Declare a Read-Only Variable with the const Keyword
Mutate an Array Declared with const
Prevent Object Mutation
Use Arrow Functions to Write Concise Anonymous Functions
Write Arrow Functions with Parameters
Set Default Parameters for Your Functions
Use the Rest Parameter with Function Parameters
Use the Spread Operator to Evaluate Arrays In-Place
Use Destructuring Assignment to Extract Values from Objects
Use Destructuring Assignment to Assign Variables from Objects
Use Destructuring Assignment to Assign Variables from Nested Objects

Class 19-ES6 Array & Objects

Use Destructuring Assignment to Assign Variables from Arrays
Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
Use Destructuring Assignment to Pass an Object as a Function’s Parameters
Create Strings using Template Literals
Write Concise Object Literal Declarations Using Object Property Shorthand
Write Concise Declarative Functions with ES6
Use class Syntax to Define a Constructor Function
Use getters and setters to Control Access to an Object
Create a Module Script
Use export to Share a Code Block
Reuse JavaScript Code Using import
Use * to Import Everything from a File
Create an Export Fallback with export default
Import a Default Export
Create a JavaScript Promise
Complete a Promise with resolve and reject
Handle a Fulfilled Promise with then
Handle a Rejected Promise with catch

Class 20-React Intro/ React Install

Class 21-React Event

Class 22-React Form Handling

Class 23-React Lists

Class 24-React Hooks

Class 25-29-React Advance and React based project

Class 30-32-WordPress Customization

Class 33-Cpanel and Site Management

Class 34-35-Freelancing Marketplace

Class 36-Project submission &Problem Solving

Class 37-Farewell

Student Ratings & Reviews

No Review Yet

Expert
0 Total Enrolled
74 hours Duration
November 29, 2021 Last Updated

Responsive Web Design and Front-end Development

About Course

A brief summary

Key Features

Content Covered:

Course Details

Download Course Outline

What Will You Learn?

Course Content

Class 01-HTML Intro & Get started

How computer and internet works

How to create a HTML file

Say Hello to HTML Elements

Headline with the h2 Element

Inform with the Paragraph Element

Fill in the Blank with Placeholder Text

Uncomment HTML

Comment out HTML

Delete HTML Elements

Introduction to HTML5 Elements

Add Images to Your Website

Class 02-HTML Tags

Link to External Pages with Anchor Elements

Link to Internal Sections of a Page with Anchor Elements

Nest an Anchor Element within a Paragraph

Make Dead Links Using the Hash Symbol

Turn an Image into a Link

Create a Bulleted Unordered List

Create an Ordered List

Create a Text Field

Add Placeholder Text to a Text Field

Create a Form Element

Add a Submit Button to a Form

Use HTML5 to Require a Field

Create a Set of Radio Buttons

Create a Set of Checkboxes

Use the value attribute with Radio Buttons and Checkboxes

Check Radio Buttons and Checkboxes by Default

Nest Many Elements within a Single div Element

Declare the Doctype of an HTML Document

Define the Head and Body of an HTML Document

Class 03-CSS Intro

Change the Color of Text

Use CSS Selectors to Style Elements

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Change the Font Size of an Element

Set the Font Family of an Element

Import a Google Font

Specify How Fonts Should Degrade

Size Your Images

Add Borders Around Your Elements

Add Rounded Corners with border-radius

Make Circular Images with a border-radius

Give a Background Color to a div Element

Set the id of an Element

Use an id Attribute to Style an Element

Adjust the Padding of an Element

Adjust the Margin of an Element

Add a Negative Margin to an Element

Add Different Padding to Each Side of an Element

Add Different Margins to Each Side of an Element

Class 04-CSS other properties

Use Clockwise Notation to Specify the Padding of an Element

Use Clockwise Notation to Specify the Margin of an Element

Use Attribute Selectors to Style Elements

Understand Absolute versus Relative Units

Style the HTML Body Element

Inherit Styles from the Body Element

Prioritize One Style Over Another

Override Styles in Subsequent CSS

Override Class Declarations by Styling ID Attributes

Override Class Declarations with Inline Styles

Override All Other Styles by using Important

Use Hex Code for Specific Colors

Use Hex Code to Mix Colors

Use Abbreviated Hex Code

Use RGB values to Color Elements

Use RGB to Mix Colors

Use CSS Variables to change several elements at once