Become a Front End Developer Training
About Us
If you would like to get started as a front-end web developer, you are going to LOVE this course! Work on projects ranging from a simple HTML page to a complete JavaScript based Google Chrome extension. We will cover the following technologies in this course:
Web development basics with HTML
Cascading Style Sheets (CSS)
JavaScript programming
jQuery JavaScript library
Bootstrap framework
Duration Time
1 month Training
What you'll learn
Build a simple HTML text site
Style web pages using CSS
Program websites with JavaScript
Build a Pipboy using Bootstrap
Build and publish a Google Chrome Extension
Course Contents
Module 1
Preliminaries
What is the Web?
How Does It Work?
How Data Finds its Way?
The Server-side and The Client-side
HTML
CSS
JavaScript
What is the Back End?
Microservice Architecture
Back-end programming
NodeJS
Module 2
Hyper Text Markup Language (HTML)
What is HTML?
Attributes + Hyperlinking
Headings + Lists
Inline vs. Block Elements + Divs
id + class Attributes
The img Element
Delving into Semantics
HTML Tables
HTML Forms
Self-Eval Exercise 2: HTML5 ids and classes
Self-Eval Exercise 3: Images, URLs and Beyond!
Module 3
Cascading Style Sheets (CSS)
1 Basics
What is CSS?
A Quick Look at CSS Selectors: Type Selectors
CSS Selectors - again!
Best Practices for Selecting Elements
Selector Combinations
Selector Group Priorities
Calculating Selectivity
Location Priorities
Making sense of Colors in CSS
Making Sense of Units in CSS
Pixels
Points and Picas
Ems
Percentages
vh and vw
The Box Model
The Box Model - in Examples.
The Padding Area
Borders
The Margin Area
Practical: Applying Padding and Margins
Using Floating Elements
How Default Browser Styles Affect a Document
The Concept of Cascade and Inheritance in CSS
2 Text
Text Alignment + Sizing
Beginning with Type in CSS
The font stack
Serif and Sans-Serif
Monospace, Cursive and Fantasy
5 Font Tips You Should Know
3 Images and Gradients
Getting started with Background Images
Sizing Background Images
Sizing Backgrounds Using Keywords
Sizing Backgrounds Using Length Measurements
Introducing Gradients
Linear Gradients
Gradients are background Images!
How Linear Gradients really Work
4 Flexbox
Introduction to Flexbox
The Flex Container Properties
The Flex Item Properties
A closer look at Absolute and Relative flex-items
Auto-margin Alignment
What happens when you switch flex-direction?
Building a Music App Layout with Flexbox
Responsive Design with Flexbox
5 CSS Grid
Introduction
Basic CSS Grid Terminologies You Should Know
CSS Grid, Baby Steps
Time to Code — CSS Grid, Hands-on
Naming and Positioning Items by Grid Areas
Grid area placement
Responsive Design — Redefining Grid Areas with Media Queries
Placing Content within the Grid.
Making CSS Grid work with Flexbox
Conclusion
Module 4
Javascript
1 Basics
Introduction and Variables
Data Types
Add Additional Logic
Strings
Booleans
Undefined / Null
Program Flow: Functions
Program Flow: Conditional Statements
Program Flow: Loops
Data Structures: Arrays
Data Structures: Objects
Functions Are Just Variables
More on Objects and The "this" Keyword
Working With the Object Type
A Quick Overview of Function Prototypes
Instance Properties and Methods
Var vs Let vs Const and the temporal dead zone
Arrow Functions
Default Function Arguments
Additional String Methods
Regular Expression Literals
2 Advanced
The JavaScript Object Notation
Serializing and Parsing JSON
Specifying Function Expressions
Recursive Functions
Closures
Removing Object Properties
Modularity
Spread Operator and Rest Parameters
Classes
Promises
Generators
3 DOM Manipulation
DOM Basics
What the DOM Covers
Accessing DOM Elements
Adding / Removing Elements
Modifying Element Attributes
Event Listeners
Modifying CSS
Building an Image Carousel
4 Functional Programming
Context: A Movie List
Program State
Pure Functions
Array Operations
Higher Order Functions
JavaScript: A Multi Paradigm Language
Coding Challenge: Older Movies
Coding Challenge: Government Forms
Coding Challenge: Arrays Sum
Coding Challenge: Students Results
Module 5
Project
1 Introduction
About this Module
2 An Infinite Scrolling List
What is an Infinite List?
Building an HTML Template for Infinite Lists
Styling List items
Server Client Communication
Generating Tweets from Server
Client Side Hydration
Adding a 'Loading' Element
Autopopulation
3 A Dropdown Menu
Important Features of a Menu
Basic HTML Code
Styling Conventions
Submenu
Styling your Submenu
Getting Data from the Server
Implementing the Behavior of Dropdown Menu
Getting Varied Responses from Server
Extending the Submenu Functionality
Module 6
Launching a Website
1 Essentials
The Basics
Getting Started
Domain Name Registrars
Steps to Register a Domain Name
Thoughts & Theories
Find a Web Hosting Service
Critical Factors to Consider
2 Publish Your Site
Working with Secure Shell
Pushing to a Version Control System Application
Creating a Project on Google Cloud Platform
Assigning a VM for Our Website
Cloning a Repository
Firewall Access
Ephemeral and Static IP Addresses
SSL Certificate
Comparing Different Cloud Hosts
3 Post Launch
Web Analytics
Search Engine Optimization
Generate Revenue from Ads
4 Conclusion
Wrapping up
Quick enquiry
Ask us on Whatsapp Chat.