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
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.
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
What Will You Learn?
- Practice your new skills with new challenges (solutions included)
- Organize and structure your imaginations using software patterns like modules
- Get friendly and fast support in the course Q&A
- Downloadable lectures, code and design assets for all projects
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
-
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
-
Project Based
Class 08-HTML & CSS Layout
-
Project Based
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
-
Project Based
Class 11-PSD to HTML Project Using Bootstrap
-
Project Based
Class 12-Plugins integration
-
Project Based
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
-
Intro: Why React JS? Single page Application And React Tools Installation For React
-
Create New React App
-
React File Folder Structure
-
React JSX | Why And How JSX Works | React With JSX and Without JSX
-
React Component | Functional Component and Class Component
-
React Props, Reuse of Component With Custom Value
-
React Props for class component
Class 21-React Event
-
React Button Click Event
-
React Passing arguments to event handlers
-
Arrow Function Syntax, uses and Passing arguments
-
React State where you store property values
-
Nested React State And Array In Property
-
React setState change state value
-
Conditional Return variable elements
-
Conditional Return if else
Class 22-React Form Handling
-
Simple from single input fields
-
event handler in the on Change
-
event handler in the onSubmit
-
Working with multiple input fields
-
React Form Validation
-
working with textarea
-
working with select option drop down list
Class 23-React Lists
-
React Lists
-
React List From JSON Array
-
React Routing Basics
-
React Routing Simple Project
-
React CSS Basic
-
React Inline CSS, Object CSS, CSS Module And More
Class 24-React Hooks
-
Install Bootstrap with react
-
How To Use React Bootstrap
-
React Hooks Basic
-
React Hook useState in functional component
-
React Component Tree
-
React Component Tree props passing
Class 25-29-React Advance and React based project
-
React based Project
Class 30-32-WordPress Customization
-
WP premium theme customization
Class 33-Cpanel and Site Management
-
Domain Hosting ftp Data backup and Cpanel details
Class 34-35-Freelancing Marketplace
-
How to get job from local and global market Online payment gateway
Class 36-Project submission &Problem Solving
Class 37-Farewell
Student Ratings & Reviews
No Review Yet
৳ 9,000
৳ 15,000
- Expert
- 0 Total Enrolled
- 74 hours Duration
- November 29, 2021 Last Updated
Hi, Welcome back!
Material Includes
- 90 hours on-demand video
- 50 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Requirements
- No previous experience is necessary to take this course!
- Any computer and OS will work — Windows, macOS or Linux.
- A basic understanding of programming concept will be plus
Audience
- Those who wants to build their carrier in website design and development
- To enter international market place
- Passionate for website design and development