Learn By Doing: Real Projects In Html, Css, Javascript

Improve your front-end coding skills by building real projects using: HTML,CSS,JavaScript

What you'll learn

The basics of HTML, including its structure, elements, and attributes.

How to create and use various HTML elements, such as headings, paragraphs, lists

The fundamentals of CSS, including syntax, selectors, and specificity.

Different ways to apply CSS styles, such as inline, internal, and external.

CSS properties for styling text, including font-family, font-size, font-weight, and font-style.

The fundamentals of JavaScript, including variables, data types, and operators.

Control structures in JavaScript, such as loops, conditionals, and functions.

Build 13 Real Projects using : HTML,CSS,JavaScript

Requirements

Familiarity with computers and basic computer operations: Students should know how to navigate the file system, create, and save files, and have a general understanding of how to use a computer.

Basic web browsing skills: Students should be comfortable using web browsers, navigating websites, and using search engines.

Basic typing skills: Students should have some proficiency in typing to be able to write code effectively.

No prior programming experience is required, but a general understanding of how websites and web applications work would be helpful.

Willingness to learn: Learning to code can be challenging at times, so students should be prepared to invest time and effort to understand new concepts and techniques.

Access to a computer: Students will need access to a computer (Windows, Mac, or Linux) with a modern web browser (such as Google Chrome, Mozilla Firefox, or Microsoft Edge) and a text editor for writing code (such as Visual Studio Code, Sublime Text, or Atom).

While not required, the following would be helpful to enhance the learning experience: A basic understanding of how the internet works, such as the roles of servers, clients, and browsers.

While not required, the following would be helpful to enhance the learning experience:Familiarity with any programming or markup language, as this can help you grasp the concepts more easily.

Description

Dive into the world of web development with this learn by doing skill development course designed for beginners who are eager to learn how to create captivating and interactive web based projects. This course focuses on HTML, CSS, and JavaScript, the three essential languages for front-end web development. By mastering these languages through engaging, hands-on projects, you will develop a strong foundation in web development and create a portfolio to showcase your skills.Our course begins with an introduction to web development and the core concepts of building a website. In this section, you will become familiar with HTML, the language used to structure web content. You will learn how to create headings, paragraphs, lists, and links, all while working on your first project—a simple personal webpage.In the second second section , we will introduce you to CSS, the styling language responsible for making websites visually appealing. You will explore different ways to apply CSS to your website, such as inline, internal, and external styles. You will also learn about CSS selectors and specificity, allowing you to target elements on a webpage effectively. By the end of the section, you will enhance your personal webpage with customized colors, fonts, and backgrounds.In the third section, you will be introduced to JavaScript, the programming language that breathes life into websites by adding interactivity. You will learn about variables, data types, operators, conditional statements, loops, and functions. We will build 13 Real World Projects using : HTML,CSS and JavaScript.This course is designed to cater to a diverse audience, providing a comprehensive introduction to HTML, CSS, and JavaScript, with a focus on practical, real-world projects that can be tailored to each individual's interests and goals.

Overview

Section 1: Introduction to Web Development and HTML

Lecture 1 Introduction

Lecture 2 Overview of web development

Lecture 3 Introduction to HTML

Lecture 4 Basic HTML structure

Lecture 5 HTML elements: headings, paragraphs, lists, links

Lecture 6 Building a simple personal webpage

Section 2: Styling with CSS

Lecture 7 Introduction to CSS

Lecture 8 Inline, internal, and external CSS

Lecture 9 CSS selectors and specificity

Lecture 10 Basic styling properties: colors, fonts, backgrounds

Lecture 11 Styling your personal webpage

Section 3: Introduction to JavaScript

Lecture 12 What is JavaScript?

Lecture 13 The developer Console

Lecture 14 The Syntax

Lecture 15 Variables

Lecture 16 Variable naming convention

Lecture 17 JavaScript Statements

Lecture 18 Executing a program

Lecture 19 Data Types

Lecture 20 Mixing data types

Lecture 21 Operators

Lecture 22 Arithmetic Operators

Lecture 23 Assignment Operators

Lecture 24 Operator Precedence

Lecture 25 String Operators

Lecture 26 Comparison Operators

Lecture 27 Logical Operators

Lecture 28 Arrays

Lecture 29 Typeof Operator

Lecture 30 Condition Statements

Lecture 31 Loops

Lecture 32 Functions

Section 4: Project 1: Building a simple calculator

Lecture 33 Overview

Lecture 34 Note on text editors

Lecture 35 Install Visual studio code

Lecture 36 Install sublimetext

Lecture 37 What we will create

Lecture 38 Creating directory and files

Lecture 39 Create the app content with HTML

Lecture 40 Style the app with CSS

Lecture 41 Add functionality with JavaScript

Section 5: Project 2: Building an Analogue Clock

Lecture 42 What we will create

Lecture 43 Creating the project folder and HTML

Lecture 44 Creating the Canvas Object

Lecture 45 Creating the clock face

Lecture 46 Drawing the clock numbers

Lecture 47 Drawing the time and hand

Section 6: Project 3: Building a Loan | Mortgage Calculator

Lecture 48 What we will create

Lecture 49 Creating the directory and HTML Structure

Lecture 50 Creating the logic with JavaScript

Lecture 51 Styling the app with CSS

Section 7: Project 4: Building a quote of the day app

Lecture 52 What we will create

Lecture 53 Creating directory and HTML Stucture

Lecture 54 Style the app with CSS

Lecture 55 Add functionality with JavaScript

Section 8: Project 5: Building a BMI Calculator

Lecture 56 What we will create

Lecture 57 Creating project directory and HTML

Lecture 58 Style the app with CSS

Lecture 59 Add functionality with JavaScript

Section 9: Project 6: Building a Height conversion app

Lecture 60 What we will create

Lecture 61 Creating project directory and HTML

Lecture 62 Adding styling with CSS

Lecture 63 Adding functionality with JavaScript

Section 10: Project 7: Building a countdown timer

Lecture 64 Overview

Lecture 65 What we will create

Lecture 66 Creating the project directory and files

Lecture 67 Creating the project structure with HTML

Lecture 68 Style the project with CSS

Lecture 69 Add functionality with JavaScript

Section 11: Project 8: Building a Todo List App

Lecture 70 Overview

Lecture 71 What we will create

Lecture 72 Creating project directory and files

Lecture 73 Creating the project structure with HTML

Lecture 74 Styling the app with CSS

Lecture 75 Adding functionality with JavaScript : Part 1

Lecture 76 Adding functionality with JavaScript : Part 2

Section 12: Project 9: Building an Image Slider App

Lecture 77 Overview

Lecture 78 What we will create

Lecture 79 Creating a project directory and files

Lecture 80 Creating the app structure with HTML

Lecture 81 Styling the app with CSS

Lecture 82 Adding Functionality with JavaScript

Section 13: Project 10: Building an Interactive Quiz App

Lecture 83 Overview

Lecture 84 What we will create

Lecture 85 Creating a directory and files

Lecture 86 Creating the structure with HTML

Lecture 87 Styling the app with CSS

Lecture 88 Adding functionality to the app: part 1

Lecture 89 Adding functionality to the app: part 2

Section 14: Project 11: Building an RSS News Feed

Lecture 90 Overview

Lecture 91 What we will create

Lecture 92 Creating the project directory and files

Lecture 93 Creating the structure with HTML

Lecture 94 Add styling and functionality

Section 15: Project 12 : Building a contact form

Lecture 95 Overview

Lecture 96 What we will create

Lecture 97 Creating the directory and files

Lecture 98 Creating the app structure with HTML

Lecture 99 Add styling with CSS

Lecture 100 Add functionality with JavaScript

Section 16: Project 13: Building a Percentage Tip Calculator

Lecture 101 Overview

Lecture 102 What we will create

Lecture 103 Creating the directory and files

Lecture 104 Creating the app structure with HTML

Lecture 105 Style the app with CSS

Lecture 106 Add functionality with JavaScript

Absolute beginners: Individuals with little or no programming experience who want to learn the basics of HTML, CSS, and JavaScript to create and design web pages.,Hobbyists and enthusiasts: People who enjoy working with technology and want to expand their skills by learning front-end web development to build personal projects, blogs, or portfolios.,Career changers: Individuals looking to switch careers and enter the tech industry as a front-end web developer or related role, and want to build a solid foundation in HTML, CSS, and JavaScript.,Designers: Web and graphic designers who want to enhance their skillset by learning front-end development to create more interactive and dynamic websites or collaborate more effectively with developers.,Back-end developers: Developers who primarily work with server-side languages and want to expand their knowledge by learning front-end technologies to become full-stack developers.,Freelancers: Professionals seeking to expand their services by offering web development and design to their clients.,Students and recent graduates: Individuals studying or majoring in computer science, information technology, or a related field who want to supplement their academic knowledge with practical, hands-on experience in front-end web development.,Educators and trainers: Teachers or trainers who want to learn front-end web development to teach others or incorporate it into their curriculum.,Entrepreneurs and small business owners: Individuals looking to build or improve their business's online presence by creating or updating their website.,Anyone interested in learning front-end web development to create interactive, responsive, and visually appealing web applications.,This course is designed to cater to a diverse audience, providing a comprehensive introduction to HTML, CSS, and JavaScript, with a focus on practical, real-world projects that can be tailored to each individual's interests and goals.