Responsive Web Design and Front-end Development
- Categories Front DevelopmentProgrammingWeb DesignWeb Development
- Duration 80h
- Last Update April 9, 2021
Description
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.
What Will I 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
Topics for this course
324 Lessons80h
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
Create a Form Element
Define the Head and Body of an HTML Document
Declare the Doctype of an HTML Document
Nest Many Elements within a Single div Element
Check Radio Buttons and Checkboxes by Default
Use the value attribute with Radio Buttons and Checkboxes
Create a Set of Checkboxes
Create a Set of Radio Buttons
Use HTML5 to Require a Field
Add a Submit Button to a Form
Link to External Pages with Anchor Elements
Add Placeholder Text to a Text Field
Create a Text Field
Create an Ordered List
Create a Bulleted Unordered List
Turn an Image into a Link
Make Dead Links Using the Hash Symbol
Nest an Anchor Element within a Paragraph
Link to Internal Sections of a Page with Anchor Elements
Class 03-CSS Intro
Add Rounded Corners with border-radius
Add Different Margins to Each Side of an Element
Add Different Padding to Each Side of an Element
Add a Negative Margin to an Element
Adjust the Margin of an Element
Adjust the Padding of an Element
Use an id Attribute to Style an Element
Set the id of an Element
Give a Background Color to a div Element
Make Circular Images with a border-radius
Change the Color of Text
Add Borders Around Your Elements
Size Your Images
Specify How Fonts Should Degrade
Import a Google Font
Set the Font Family of an Element
Change the Font Size of an Element
Style Multiple Elements with a CSS Class
Use a CSS Class to Style an Element
Use CSS Selectors to Style Elements
Class 04-CSS other properties
Use Hex Code to Mix Colors
Use a media query to change a variable
Change a variable for a specific area
Inherit CSS Variables
Improve Compatibility with Browser Fallbacks
Attach a Fallback value to a CSS Variable
Use a custom CSS Variable
Create a custom CSS Variable
Use CSS Variables to change several elements at once
Use RGB to Mix Colors
Use RGB values to Color Elements
Use Abbreviated Hex Code
Use Clockwise Notation to Specify the Padding of an Element
Use Hex Code for Specific Colors
Override All Other Styles by using Important
Override Class Declarations with Inline Styles
Override Class Declarations by Styling ID Attributes
Override Styles in Subsequent CSS
Prioritize One Style Over Another
Inherit Styles from the Body Element
Style the HTML Body Element
Understand Absolute versus Relative Units
Use Attribute Selectors to Style Elements
Use Clockwise Notation to Specify the Margin of an Element
Class 05-CSS Flex
Align Elements Using the align-items Property
Use the align-self Property
Use the order Property to Rearrange Items
Use the flex Shorthand Property
Use the flex-basis Property to Set the Initial Size of an Item
Use the flex-grow Property to Expand Items
Use the flex-shrink Property to Shrink Items
Use the flex-wrap Property to Wrap a Row or Column
Use the align-items Property in the Tweet Embed
Use display: flex to Position Two Boxes
Use the justify-content Property in the Tweet Embed
Align Elements Using the justify-content Property
Apply the flex-direction Property to Create a Column in the Tweet Embed
Use the flex-direction Property to Make a Column
Apply the flex-direction Property to Create Rows in the Tweet Embed
Use the flex-direction Property to Make a Row
Add Flex Superpowers to the Tweet Embed
Class 06-CSS Grid
Align All Items Horizontally using justify-items
Create Grids within Grids
Use Media Queries to Create Responsive Layouts
Create Flexible Layouts Using auto-fit
Create Flexible Layouts Using auto-fill
Limit Item Size Using the minmax Function
Reduce Repetition Using the repeat Function
Use grid-area Without Creating an Areas Template
Place Items in Grid Areas Using the grid-area Property
Divide the Grid Into an Area Template
Align All Items Vertically using align-items
Create Your First CSS Grid
Align an Item Vertically using align-self
Align an Item Horizontally using justify-self
Use grid-row to Control Spacing
Use grid-column to Control Spacing
Add Gaps Faster with grid-gap
Create a Row Gap using grid-row-gap
Create a Column Gap Using grid-column-gap
Use CSS Grid units to Change the Size of Columns and Rows
Add Rows with grid-template-rows
Add Columns with grid-template-columns
Class 07-HTML & CSS Layout
Project Based
Class 08-HTML & CSS Layout
Project Based
Class 09-Bootstrap
Responsively Style Checkboxes
Use Comments to Clarify Code
Label Bootstrap Buttons
Give Each Element a Unique id
Label Bootstrap Wells
Add id Attributes to Bootstrap Elements
Create a Class to Target with jQuery Selectors
Apply the Default Bootstrap Button Style
Add Elements within Your Bootstrap Wells
Create Bootstrap Wells
Split Your Bootstrap Row
Create a Bootstrap Row
House our page within a Bootstrap container-fluid div
Create a Bootstrap Headline
Line up Form Elements Responsively with Bootstrap
Style Text Inputs as Form Controls
Use Responsive Design with Bootstrap Fluid Containers
Responsively Style Radio Buttons
Add Font Awesome Icons to all of our Buttons
Add Font Awesome Icons to our Buttons
Create a Custom Heading
Use a span to Target Inline Elements
Ditch Custom CSS for Bootstrap
Use the Bootstrap Grid to Put Elements Side By Side
Warn Your Users of a Dangerous Action with btn-danger
Call out Optional Actions with btn-info
Taste the Bootstrap Button Color Rainbow
Create a Block Element Bootstrap Button
Create a Bootstrap Button
Center Text with Bootstrap
Make Images Mobile Responsive
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
Use Bracket Notation to Find the Last Character in a String
Word Blanks
Shopping List
Manipulate Arrays With unshift()
Manipulate Arrays With shift()
Manipulate Arrays With pop()
Manipulate Arrays With push()
Access Multi-Dimensional Arrays with Indexes
Modify Array Data with Indexes
Access Array Data with Indexes
Nest one Array within Another Array
Store Multiple Values in one Variable using JavaScript Arrays
Use Bracket Notation to Find the Nth-to-Last Character in a String
Declare String Variables
Use Bracket Notation to Find the Nth Character in a String
Understand String Immutability
Use Bracket Notation to Find the First Character in a String
Find the Length of a String
Appending Variables to Strings
Constructing Strings with Variables
Concatenating Strings with the Plus Equals Operator
Concatenating Strings with Plus Operator
Escape Sequences in Strings
Quoting Strings with Single Quotes
Escaping Literal Quotes in Strings
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
Updating Object Properties
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
Selecting from Many Options with Switch Statements
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
Comparison with the Less Than Operator
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
Understanding Boolean Values
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
Class 17-Js For&While Loops & others
Generate Random Fractions with JavaScript
Use Recursion to Create a Range of Numbers
Use Recursion to Create a Countdown
Use Multiple Conditional (Ternary) Operators
Use the Conditional (Ternary) Operator
Use the parseInt Function with a Radix
Use the parseInt Function
Generate Random Whole Numbers within a Range
Generate Random Whole Numbers with JavaScript
Iterate with JavaScript While Loops
Profile Lookup
Replace Loops using Recursion
Iterate with JavaScript Do…While Loops
Nesting For Loops
Iterate Through an Array with a For Loop
Count Backwards With a For Loop
Iterate Odd Numbers With a For Loop
Iterate with JavaScript For Loops
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 export to Share a Code Block
Handle a Rejected Promise with catch
Handle a Fulfilled Promise with then
Complete a Promise with resolve and reject
Create a JavaScript Promise
Import a Default Export
Create an Export Fallback with export default
Use * to Import Everything from a File
Reuse JavaScript Code Using import
Use Destructuring Assignment to Assign Variables from Arrays
Create a Module Script
Use getters and setters to Control Access to an Object
Use class Syntax to Define a Constructor Function
Write Concise Declarative Functions with ES6
Write Concise Object Literal Declarations Using Object Property Shorthand
Create Strings using Template Literals
Use Destructuring Assignment to Pass an Object as a Function’s Parameters
Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
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 20-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 21-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 22-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 23-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 24-28-React Advance and React based project
React based Project
Class 29-31-WordPress Customization
WP premium theme customization
Class 32-Cpanel and Site Management
Domain Hosting ftp Data backup and Cpanel details
Class 33-34-Freelancing Marketplace
How to get job from local and global market Online payment gateway
Class 35-Project submission &Problem Solving
Class 36-Farewell
About the instructors
Material Includes
- 90 hours on-demand video
- 50 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Login
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
Target Audience
- Those who wants to build their carrier in website design and development
- To enter international market place
- Passionate for website design and development