Front End Developer – HTML CSS Bootstrap JavaScript React

  • Post category:StudyBullet-4
  • Reading time:14 mins read




Learn Front End Web Development Skills from scratch

What you will learn

 

Gain experience using Front End Web Development Tools

 

Create Content with HTML

 

Create Links with HTML

 

Style Content with CSS

 

Create web page interaction with JavaScript

 

Create responsive we content with Bootstrap

 

Create components using ReactJS

 

Create various projects to acquire useful front end development skills

Description

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.


Get Instant Notification of New Courses on our Telegram channel.


A front-end developer architects and develops websites and applications using web technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the Open Web Platform

Typically, a person enters into the field of front-end development by learning to develop HTML, CSS, and JavaScript which commonly runs in a web browser .

 

  • HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.

  • CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.

  • JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

 

  • Bootstrap is a front-end framework used to create modern websites and web apps. It’s open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.

 

English
language

Content

Introduction

Introduction
What Is a Front-End Developer?
Core Web Languages
Text Editors
Install Visual Studio Code
Install SublimeText
Install Atom
What is Emmet
What is CSS Peek
Installing themes
Installing live servers
Web Browser
Chrome Developer Tools Console
Planning a web project
Sketching your design
Create files and folders

Coding with HTML

What is HTML
Anatomy of an HTML Element
HTML Document Structure
Create a basic HTML Document Structure – Part 1
Create a basic HTML Document Structure – Part 2
Create a basic HTML Document Structure – Part 3
HTML Attributes
Marking Up Text
Creating Links
Adding Code Comments
What is source code

Coding with CSS

What is CSS
Ways to apply CSS
Styling Multiple Properties
Styling multiple elements
Modifying CSS
Basic CSS Selectors
CSS BOX Model
CSS Padding and Margin Property
CSS Background Property
Styling web page title
CSS Font Property
CSS Display Property
Using Google Fonts
CSS Code Comments

Introduction to Bootstrap

What is Bootstrap
Installing Bootstrap
Download jQuery
Download PopperJS
Bootstrap Setup
Bootstrap Breakpoints
Bootstrap Containers
Creating default containers
Creating responsive containers
Creating fluid containers
Bootstrap Flexbox
Flex direction property
Flex wrap property
Flex Flow property
Flex justify content property
Align items property
Align content property

Coding with JavaScript

What is JavaScript
The Chrome Developer Console
Where to Place JavaScript
JavaScript Syntax
What are statements
What are expressions
What are Variables
Variable Naming Convention
What are Arrays
Data Types
Mixing Data Types
Operators
Arithmetic Operators
Assignment Operators
Operator Precedence
Comparison Operators
Logical Operators
Conditional Statements
Functions
Linting Tools
Events
Adding an image changer
Fixing listing issues- Part 1
Fixing listing issues- Part 2
Adding welcome message to web page
Adding JavaScript Code Comments

Analogue Clock Project

What we will create
Creating project folder
Creating Canvas Object
Creating the clock face
Drawing the clock numbers
Drawing the time and hand

BMI Calculator Project

What we will create
Create project directory
Add CSS
Add JavaScript

Calculator Project

What we will create
Create project directory
Create the structure
Add Styling
Add Functionality with JavaScript

Event Countdown Timer Project

What we will create
Create project directory
Adding logic
Adding Styling

Word Count App Project

What we will create
Overview
Creating project directory
Creating app structure
Adding Styling
Adding Logic

Todo List App Project

What we will create
Create project directory
Creating project structure
Adding Styling
Adding logic – Part 1
Adding logic – Part 2

Interactive Quiz Project

What we will create
Creating project directory
Creating project structure
Adding Styling
Adding logic – Part 1
Adding logic – Part 2

Introduction to React

What is React
Introduction to JSBIN
What is the DOM
What is ReactDOM
ReactDOM Vs VirtualDOM
Accessing React via CDN
What is Node.js
Installing Nodejs
What is NPM
NPM Commands
Installing Create React App
Create a sample react app
New React App Folder Structure
Rendering
Installing React Developer Tools
Introduction to JSX
What is JSX
Embedding Expressions in JSX
Using JSX as expression
Using Child Elements in JSX
Nesting JSX Elements
Adding comments to JSX
Handling Events
What are React Components
Creating React Components
Creating React Components in ES6
What are Props
What are States
What is a class
Adding state to a class
Component Life Cycle

Project: Build a React Mortgage Calculator

Create new react app
Creating the components – Part 1
Creating the components – Part 2
Creating the components – Part 3

Project: Create a Static Tweet Component

Sketching your components
create a new react project
Exploring project files
Modifying files
Creating avatar component
Creating more components
Creating time & button component

 

Enroll for Free

 

💠 Follow this Video to Get Free Courses on Every Udemy Topics! 💠

 

Tags: , ,