Mô tả

This course is designed to teach students the fundamental concepts and skills needed to build modern, responsive web pages. The course covers key topics including the basic structure of a web page, building mobile responsive web apps, working with HTML, CSS, and JavaScript syntax, and building various web components using these languages.

First, students learn the structure of a web page and how to create mobile responsive sites that adapt to different screen sizes and devices. This will include an introduction to HTML, which is the markup language used to create basic web page structure. Students will learn various HTML elements and how to use them to create headings, paragraphs, lists, images, and other static content.

Next, students explore CSS, the language used for styling and layout customization. CSS works in conjunction with HTML to create visually appealing site designs that stand out. Here, students learn to effectively use CSS selectors, properties, and values. This will include an introduction to responsive web design and using CSS media queries to create web pages that adapt to different screen sizes.

In addition to learning the basics of HTML and CSS, students will also learn JavaScript, the programming language used to add interactivity and dynamic functionality to web pages. Students will learn the Document Object Model (DOM) and how to use JavaScript to dynamically manipulate page elements. We also explore JavaScript events, loops, arrays, and other programming concepts.

The course will also cover more advanced topics such as building navigation components using HTML, creating forms using the post vs. get method, and working with DIVs, and IDs. We also cover styling images, backgrounds, borders, and text on top of images in CSS. Students will learn the different CSS positioning options (static, relative, absolute, fixed, float) and how to use them to create complex web page layouts.

In the JavaScript section of the course, students learn the Document Object Model (DOM) and how to use JavaScript to manipulate the elements of a web page. Here we explore, events, loops, arrays, and other programming concepts such as operator precedence, objects, and functions.

Once students have a handle on the foundational three languages, we dive into React JS – a powerful JavaScript library used for building stylish, dynamic web applications and UI components. Through a series of hands-on projects, students will build a fully functional connect-4 game, a calculator, and an e-commerce site complete with categories, checkout features, and more.

This course is designed for students with little or no previous experience in web development, but it can also be beneficial for students who have some experience and are looking to improve their skills. With the knowledge and skills gained in this course, students will be prepared to take on more advanced web development projects and to continue learning about new web development technologies.

Bạn sẽ học được gì

Learning the Foundations of HTML, CSS, JavaScript

Understanding the basic structure of a web page

Working with HTML, CSS, and JavaScript syntax

Building Lists, Formatting Text, and working with Tabular Data in HTML

Building Forms using Post vs. Get Method

Building Navigation Components such as Menus, Input Areas, and Buttons in HTML

Building Responsive Web Page layouts using Cascading Style Sheets (CSS)

Working with DIVs, IDs, and Style Properties in CSS

Styling Images, Backgrounds, Borders, and Text on Top of Images in CSS

Working with CSS Positioning (Static, Relative, Absolute, Fixed, Float)

Styling Links and Tables in CSS

Understanding the Document Object Model (DOM)

Building Simple Interactive Web Page components using JavaScript

Working with JavaScript Arithmetic Operators and Data Types

Exploring JavaScript Arrays, Loops, and Events

Understanding Operator Precedence, Objects, and Functions in JavaScript

Building Dynamic Web Apps in React

Debugging and React Events

Exploring Code Pen, JSON Server, and React Props

Working with the React State Hook and Styling React Projects

Yêu cầu

  • Basic Computer Skills
  • No programming experience needed. You will learn everything you need to know.

Nội dung khoá học

8 sections

HTML Section

39 lectures
Introduction to HTML
01:46
Basic Structure of a Web Page
03:35
HTML Head Tags
07:59
HTML Body Tag
03:18
HTML Paragraph Spacing
02:57
HTML Line Breaks
02:04
HTML Non-Breaking Space
02:38
HTML Header Tags
01:58
HTML Text Formatting and Decoration
05:15
HTML Inline Text Formatting
02:04
HTML Unordered Lists
02:36
HTML Ordered Lists
02:39
HTML Image Insertion
03:57
HTML Embedding Videos
02:50
HTML Absolute vs. Relative File Referencing
02:00
HTML Link Creation
06:34
HTML Anchor Tags
03:35
HTML Tables
11:29
HTML Nested Tables
06:26
HTML Merging Cells
01:00
HTML Text Wrapping
01:17
HTML Table Background Image
01:12
HTML Table Cell Alignment
00:39
HTML - Introduction to Forms
03:30
HTML Form Tags and Attributes
03:59
HTML Forms - Post vs. Get
02:08
HTML Forms - Input Text Fields
03:51
HTML Forms - Select Menus
05:32
HTML Forms - Check Boxes and Radio Buttons
05:44
HTML Forms - Text Areas and Buttons
05:49
HTML Iframes
04:03
HTML Project - Introduction
01:40
HTML Project - Header
03:33
HTML Project - Callout
03:19
HTML Project - Image Insertion
01:34
HTML Project - Text Insertion
01:23
HTML Project - Links and Form
03:28
HTML Project - Tabular Data
02:23
HTML Project - Footer
01:22

CSS Section

31 lectures
Introduction to CSS
03:31
Parts of a CSS Rule
06:31
Types of CSS Rules
02:54
CSS - Color Names and Codes
02:17
CSS Classes and Spans
05:43
CSS Divisions - DIVs
02:52
CSS IDs
05:53
CSS Margins
03:52
CSS Padding
02:12
CSS Text Properties
08:28
CSS Font Properties
03:00
CSS Borders
02:19
CSS Backgrounds
06:25
CSS Transparency
02:52
CSS Text on Top of Images
05:09
CSS Width and Height Properties
06:03
CSS Display Properties
02:09
CSS Static Positioning
01:54
CSS Relative Positioning
04:03
CSS Absolute Positioning
02:12
CSS Fixed Positioning
02:07
CSS Float Property
02:23
CSS Clear Property
01:08
CSS Z-Index
01:39
CSS Styling Links
02:01
CSS Tables
02:16
CSS Project - Introduction
01:22
CSS Project - CSS Rules
05:35
CSS Project - Navigation Rules
02:16
CSS Project - Responsive CSS
02:37
CSS Project - Page Elements
02:33

DOM Object Model (DOM)

2 lectures
DOM Introduction
03:12
DOM Manipulation
01:17

JavaScript Section

41 lectures
JavaScript - Introduction
05:41
JavaScript Placement
02:09
External JavaScript
01:50
JavaScript Output
01:41
JavaScript InnerHTML
01:03
JavaScript Commenting
01:48
JavaScript Constants
01:34
JavaScript Variables Introduction
04:31
JavaScript Assignment Operator
01:05
JavaScript Arithmetic Operations
03:43
JavaScript Arithmetic Operations Continued
03:45
JavaScript Operator Precedence
00:58
JavaScript Data Types
01:13
JavaScript Objects
01:42
JavaScript Object Output
01:22
JavaScript Strings
03:11
JavaScript String Length
00:41
JavaScript Special Characters
01:18
JavaScript Random Numbers
00:54
JavaScript Min and Max Function
01:05
JavaScript Math Round Function
01:38
JavaScript Arrays
02:14
JavaScript Array Attributes
01:28
JavaScript Arrays - Pop - Push - Shift - Unshift
02:04
JavaScript Changing and Deleting Elements
01:58
JavaScript Splicing an Array
01:35
JavaScript Sorting an Array
01:24
JavaScript Joining Arrays
01:04
JavaScript Conditional Statements
06:17
JavaScript Comparisons
02:26
JavaScript Booleans
01:21
JavaScript For Loops
02:40
JavaScript For-In Loop
00:46
JavaScript While Loops
02:08
JavaScript Do-While Loop
01:58
JavaScript Break and Continue
01:14
JavaScript Functions
01:53
JavaScript Events
01:18
JavaScript Project 1 - BG Color Changer
02:13
JavaScript Project 2 - Photo Gallery
02:24
JavaScript Project 2 - Completion
02:38

Introduction to React

2 lectures
Skills Required
00:56
What is React?
04:42

Project 1: Build a Calculator in React

17 lectures
Project Overview
00:58
Hello React
06:23
Tools Needed
01:02
Code Pen
04:40
Intro to JSX
04:05
Functional Components in React
05:31
Why Components?
03:02
Intro to Props in React
03:51
React Components, Props, and Callbacks
04:16
Building the Calculator Visuals
11:01
OnClick Events in React
05:46
Passing Parameters in Callback Functions
04:28
Using React State Hook
04:42
Implementing the calculator - Display
07:27
Implementing the Calculator - Operators
10:11
Debugging in React
05:09
Project Summary
01:49

Project 2 - Build a Connect-4 Clone in React

29 lectures
Project Introduction - What We Will Build
01:27
Tools Needed
00:53
Creating the Game Board
11:49
Game Circle - OnClickEvent
05:33
Passing Props - Destructing - React Children
06:57
Passing Arguments to Click Events
09:18
Inline Styling
05:39
Square to Circle Component
13:11
Global Styling
06:36
Dynamic Styling
03:52
Dynamic Classes
03:40
Handling Callbacks
05:52
Using React State Hook (again)
14:24
Updating the Player Circle
17:05
Initializing the Game Board
08:12
React Key Property
02:04
Styling the Game Board - Header and Footer
11:09
Calculating the Winner
13:30
Displaying the Winner
14:33
Determining a Draw Condition
05:43
React Lifecycle Events
03:16
Initializing the Game
06:15
Suggesting a Move - Implementing a Computer Player
11:55
Smart Computer Player (Basic AI)
19:00
CSS Variables
07:06
Conditional Rendering
08:15
Deploy to Netlify
06:00
Deploy to Surge
02:39
Project Summary
02:34

Project 3 - Build an E-Commerce Site in React

39 lectures
Project Introduction - What We Build
01:53
Scaffolding the Project
03:57
Intro to JSON Server
04:00
Fetch API
10:33
Styling the Store
04:07
Rendering the Categories
10:48
Binding the Products
08:05
Refactor the Fetch API call
08:49
Dealing with errors in Fetch API
08:25
Tidy the Fetch API call
02:21
Styling the Product List
13:00
Installing React Router
06:07
Fixing the Key Warning
03:56
React Router - Detail Page
12:24
Fetch API - Get Product By Id
08:55
Product Description
05:25
Intro to Styled Components
13:00
Styled Components - Product Description
03:07
Dangerously Set HTML (Yeah Really)
04:07
Refactor the Categories
08:23
Refactor the Layout
05:25
Refactor the Home Page
05:50
Intro to Context in React
08:53
UseContext Hook and UseReducer Hook in React
17:59
Basket Layout
11:11
Implementing the Basket
06:22
Implementing Basket Icons
04:36
Implementing Basket Total
07:50
Finishing the Checkout
01:07
Checkout - Fixing the State
12:31
Implementing the Order Confirmation
06:43
Intro to Local Storage
13:07
Implementing Search Results
14:23
Better Searching with Debouncing
07:36
Validating Forms in React - Part 1
08:47
Validating Forms in React - Part 2
09:15
Validating Forms in React - Part 3
08:11
Validating Forms in React - Part 4
07:55
Project Summary
02:45

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.