Web Designing Course: Beginner to Advanced Level (2024)

Learn to Build Websites with Photoshop, HTML5, CSS3, JavaScript, Bootstrap 5, Dreamweaver CC, WordPress & WooCommerce

4.29 (376 reviews)
Udemy
platform
English
language
Web Design
category
instructor
17,391
students
36 hours
content
Feb 2024
last update
$74.99
regular price

What you will learn

Learn to build Responsive Websites from Scratch

Learn to Build Dynamic Websites without Code

Learn to Build E-Commerce Shopping sites without Code

You will learn to Add Graphics to Web Page with Adobe Photoshop

You will learn to Code with HTML5 & CSS3 from Scratch & Build Websites

You will learn to Add interactivity to your site with JavaScript

You will learn to Build Responsive Websites with Latest CSS Framework (Bootstrap 5)

You will learn to create websites with Adobe Dreamweaver CC

You will learn to build dynamic websites with WordPress

You will learn to create E-Commerce Shopping websits with WooCommerce

Description

(June 2023 - Update)

Hey guys, the Bootstrap Section in this course has been updated to the latest version of Bootstrap 5.3 may 2023 update.

-

In this Complete Web Designing Course: Beginner to Advanced Level you will learn to build Responsive Websites from Scratch. This course covers everything that you need to become a professional web designer.

At the beginning of the course, we will start by learning the essentials of Adobe Photoshop with image editing and manipulation. These skills will help you in designing and editing images for your website.

Then we will get in-depth about HTML5 & CSS, here you will learn to code your website from scratch. This skill will help you in developing your website just with HTML5 & CSS3.

To make your website more interactive, we need to add some JavaScript. In this section, you will learn complete JavaScript from scratch to build and integrate JavaScript Interactivity into your site.

Since you will now know the basic requirements of building a website, we will now get into learning about the CSS framework. More specifically Bootstrap 5. It is the most popular and advanced complete solution for building any kind of website in a matter of hours.

Then we will get into Adobe Dreamweaver CC 2015, Here you will learn how to create a complete website without code. We will go through some of the advanced settings and in-built CSS frameworks to build our web apps.

Now that most of the tools are covered we will later get into the most popular CMS in the world WordPress, by the way, CMS stands for Content Management System. Again here you do not need to code. We will learn how to build complete websites with Posts, Pages, Categories, Tags, the About page, and a contact form to collect user data.

Then at the end of the course, you will learn to build a complete full-fledged E-Commerce application from scratch. You will learn how to create products, receive orders, manage customers online, and also collect payments online via Payment Gateway

Content

Adobe Photoshop - Graphic Fundamentals

Photoshop: Introduction
Creating New Document
Workspace Overview

Adobe Photoshop - Basic Tools

Working with Layers
Marquee Selection Tool
Lasso Tools

Adobe Photoshop - Creating a Scene

Scene Introduction
Creating Sky
Creating Sun
Creating Mountains
Creating Clouds
2D Scene Final Touch-Ups

Adobe Photoshop - Working with Images

Opening an Image
Raster Image VS Smart Objects
Remove Background from Products
Removing Background from Hair

Adobe Photoshop - Retouching

Working with Adjustments
Effects in Adobe Photoshop
Healing Tools
Content Aware Tool
Dodge & Burn
Clone-Stamp Tool

Adobe Photoshop - Typography Basics

Adding New Fonts in Photoshop
Basics of Typography

Adobe Photoshop - Filters

Basic Filters in Photoshop

HTML5 & CSS3 - Fundamentals

Introduction to HTML5 & CSS3
What you will need
Installing VS Code
Hello World

HTML5 - Tags

Document Structure
HTML5 Basics
Headings & Paragraph
Text Formatting
Links in HTML5
Nested Links in HTML5
Lists in HTML5
Working with Images
Tables in HTML5

HTML5 - Forms

Forms in HTML5
Creating a Contact Form
Creating a Login Form
Creating a Registration Form

HTML5 - Media

Grouping Elements
HTML5 Media Tags
IFrames in HTML5
Figure Tag in HTML5
Collapse Elements with Details Tag

HTML5 - Website Structure

Creating The Header
Creating Nav Menu
Creating The Banner
Adding Content to Page
Creating The Sidebar
Building Page Footer
Adding Copyright

CSS3 - Fundamentals

Inline CSS
Internal CSS
External CSS
Box Model in CSS
Targeting Elements in CSS
Designing with Box Model

Project - HTML5 & CSS3 Website

Building The Container
Building The Website Header
Creating The Nav Bar
Making Drop-Down Menu
Creating Image Slider
Making Content Holder
Creating Sidebar
Making Footer
Creating About-us Page
Creating Services Pages
Building The Products Page
Building Contact Page
Adding Nav-Menu
Responsive Design (RWD) Explained
Animation with CSS3

JavaScript - Introduction

Introduction to JavaScript
What you should know
Hello World
JavaScript Statements
Placement in JavaScript (Part 1)
Placement in JavaScript (Part 2)

JavaScript - Fundamentals

Variables in JavaScript
Conditions in JavaScript
Operators in JavaScript
Working with Browser Console
Loops in JavaScript
Functions in JavaScript
Creating Custom Loops with Functions

JavaScript - Data Types

Working with Arrays
Numbers in JavaScript
Strings in JavaScript
Working with Dates Object
Objects in JavaScript

JavaScript - DOM (Document Object Model)

DOM in JavaScript
Element Node Types
Working with DOM Elements
Changing Contents of DOM
Creating New Elements with JavaScript
Adding Events to DOM Elements
Working with Form Elements
Timers in JavaScript

JavaScript - Advanced

Debugging in JavaScript
Creating Modern Live Validation Forms
Minify & Validate JavaScript
Using JavaScript Libraries
Working with Modern JavaScript
Making Use Of Use Strict
JavaScript Bad Practices
JavaScript Regular Expressions

Bootstrap 5 - Getting Started

Introduction to Bootstrap 5
What you will need
Hello World
Bootstrap 5 Document Structure

Bootstrap 5 - Layouts

Breakpoints in Bootstrap 5
Container Types
Grids Part - 1
Grids Part - 2
Grids for multiple devices
Align Columns in Grid

Bootstrap 5 - Contents

Typography
Images
Tables

Bootstrap 5 - Forms

Basic Login Form
Designing Form Holder with Custom & In-Built CSS
Styling Form Fields
Form Layout

Bootstrap 5 - Components

Dismissable Alerts
Badges
Breadcrumbs
Button & Button Groups
Cards
Carousels
Collapse
Dropdown
List Group
Modals
Navs
Navbar
Pagination
Popover
Progress Bars
Scrollspy

Project - EMS App (Employee Management System App)

Setting up document for Project
Creating Login page for EMS App
Creating Dashboard Navbar
Add cards to Dashboard
Creating Employees Page
Creating Add Employee Form
Creating Single Detail for Employee
Creating Edit, Delete Options for Employee
Creating Jobs List Page
Creating Add, Edit & Delete Options to Jobs List
Creating Log Out Button

Project - Blog App with Bootstrap 5

Navbar for the Blog App
Creating Blog Banner
Building Cards for Home Page
Footer for Home Page
Creating Default Fall Back Page for Blog App
Creating Sidebar for the Blog App
Creating Post & Page for Blog App
Creating Comment Section for Blog App
Creating Category, Archives & Other Pages

Project - Real-World Education Project

Getting started with Live Project
Creating Custom Navbar
Registration Popup under Navbar
Creating Banner for Home Page
Adding Features Section to Home Page
Creating Online Courses Text Widget
Adding Online Courses Cards to Home Page
Creating Classroom Training Text Widget
Creating Classroom Training Sidebar & List
Creating the Review Slider Section
Creating Footer Widgets
Creating About & Contact Page
Creating Archive, Category, & Other Pages

Adobe Dreamweaver CC - Getting Started

Introduction to Dreamweaver CC
What you need
Creating New Workspace
Setting up Project in Dreamweaver
Hello World

Adobe Dreamweaver CC - HTML Components

Creating Div Tags with Classes & ID's
Creating Div Tags without Classes & ID's
Adding Images to Dreamweaver project
Headings & Paragraphs
Working with Tables in Dreamweaver CC
Adding Figure Element to Page
Creating Lists & Links
HTML5 Semantic Elements
Header, Footer, Meta & Scripts
Media in Dreamweaver CC
HTML5 Audio in Dreamweaver CC
Additional HTML Components & Tools

Adobe Dreamweaver CC - Forms

The Form Tag & Its Attributes
Working with Text Fields
Input Fields in Dreamweaver CC
Other Input Fields in Dreamweaver CC

Adobe Dreamweaver CC - Basic Site

Setting up Project
Styling the Body tag with CSS Designer
Creating the Header Holder
Creating The Container
Adding Logo to Our Site
Creating The Menu
Creating Banner for Website
Creating Body Content
Creating Footer Section

Adobe Dreamweaver CC - Live Site Designer

Introduction to Bootstrap for Dreamweaver CC
Adding Custom CSS to Bootstrap
Working with Bootstrap Grid
Customizing the Navbar
Navbar Types
Carousel in Bootstrap
Image Classes in Bootstrap
Bootstrap Thumbnails
Media Items & Glyph Icons
Responsive Video Embed
Jumbotron in Bootstrap
Bootstrap Buttons
Botton Types & Groups
Input Groups, Panels, & Wells
Tabs, Accordions & Pager

Adobe Dreamweaver CC - jQuery Mobile

Creating a Basic Page
jQuery Mobile List Options
jQuery Mobile Grid
jQuery Mobile Collapse
jQuery Mobile Form Components
jQuery Mobile Other Form Components

Adobe Dreamweaver CC - jQuery UI

jQuery UI Accordion
jQuery UI Tabs
jQuery UI Date, Slider, & Modal
jQuery UI Other Forms Components

Adobe Dreamweaver Project - EMS Web App

Setting up The Project
Creating The Login Page
Creating The Dashboard
Creating The Employee Page
Creating Employees Table
Creating Add Employee Form
Creating Update Employee Page
Creating Jobs List Page
Creating Add Job Form
Update Job Page
Linking Pages Together
Creating Single Data Page

Adobe Dreamweaver Project -Blog App

Setting up for Blog Application
Creating Home Page
Creating Sidebar Widget
Creating Post & Page
Creating Static Page Template

WordPress - Getting Started

Introduction to WordPress
WordPress.Com Vs WordPress.Org
What you will need
Downloading & Installing XAMPP
Setting up XAMPP
Installing WordPress Locally
Login to WordPress
WordPress Dashboard

Settings in WordPress

General Settings In WordPress
Writing Settings In WordPress
Reading Settings In WordPress
Discussions In WordPress
Media Settings In WordPress
Permalinks In WordPress

WordPress - Plugins, Install, Setup & Management

Installing & Activating Plugins
Setting Up Sharing Buttons

WordPress - Categories

Working With Categories
Nesting Categories

WordPress - Posts, Pages & Media

Working With WordPress Posts
Working With WordPress Media
Creating WordPress About & Contact Page
Working With WordPress Tags
Working With Links

WordPress - Managing Comments, Plugins & Users

Managing Comments In WordPress
Managing Plugins In WordPress
Managing Users In WordPress

WordPress - Appearance & Menus

Appearance In WordPress
Working With Menus In WordPress

WooCommerce - Getting Started

Introduction to WooCommerce
What you sould know
Why choose WooCommerce
Setting up WordPress for E-Commerce
Downloading & Installing WooCommerce

WooCommerce - Creating & Managing products

Creating New Product with WooCommerce
Installing New Theme
Adding Product & Image Gallery
Working with Product Information Data
Variable Product Complete Setup
Creating Digital Products
Creating Short Descriptions
Creating Grouped Products in WooCommerce
Importing Sample Data in WooCommerce

WooCommerce - Additional Setup

Adding Shipping Details to WooCommerce
Setting up Payment Gateway
Setting up WooCommerce Taxes
Installing Storefront Theme
Working with WooCommerce Widgets

WooCommerce - Settings

WooCommerce General Setup
Product Settings in WooCommerce
Account & Privacy in WooCommerce
Email Settings in WooCommerce
Advanced Settings in WooCommerce

WooCommerce - Testing Ordered, Reports & Coupons

Testing WooCommerce Site
Working With Orders in WooCommerce
Working with WooCommerce Reports
Creating & Managing Coupons

Screenshots

Web Designing Course: Beginner to Advanced Level (2024) - Screenshot_01Web Designing Course: Beginner to Advanced Level (2024) - Screenshot_02Web Designing Course: Beginner to Advanced Level (2024) - Screenshot_03Web Designing Course: Beginner to Advanced Level (2024) - Screenshot_04

Reviews

Ismat
August 23, 2023
Very in-depth and great explanations. I am very happy with my experience with this course. It taught me alot.
Marten
June 14, 2023
I work as a graphic designer for 10 years now and had finished a course for certificate 3 years ago, still I managed to learn new things with the videos here and the method of explanation is short and right to the point which I like.
Mohamed
June 13, 2023
The course is good for me but I need an other instructor becouse I have understanding problem from my instructor. Thank you
Heather
June 5, 2023
Wonderful course. I took this one to brush up on some skills, and it certainly did that. Great narrator, and very concise.
Joshua
February 8, 2023
Watched first 10 minutes and so far everything is perfectly explained for someone like myself who is a complete beginner.
Janki
September 10, 2022
Yes. OfCourse it's amazing. This is my starting, but I can say that I will learn what I needed easily though out this course. But only I have one suggestion for improving Transcript or subtitle so that when we did not listen voice or some word you pronounce fast, then we can see the subtitle and understand properly.
Deborah
August 5, 2022
Didn't realize it was Adobe Photoshop. Thought it was about web design. Still good info to know in web design.
Joao
May 13, 2022
I have done a course on how to create a website by preparing firstly a prototype on Adobe XD, however through this course we can learn how to turn a prototype into reality. Thank you teacher for your teachings
M
February 18, 2022
Excellent method of teaching, great contents, the course goes into great details. The course covers almost everything needed to create a website. But it's a bit too long about 19 hours, which can be difficult to remember all in.
Lars
October 31, 2021
This guys accent just makes it nearly impossible to understand. Please get instructors that speak clear eligible English, or whatever language the tutorial is supposed to be in...
Lalitha
December 13, 2020
It is very helpful but am not able to catch up the speed , so while making a video please do consider non-IT people and try to explain more

Coupons

DateDiscountStatus
10/12/2020100% OFF
expired
10/22/2020100% OFF
expired

Charts

Price

Web Designing Course: Beginner to Advanced Level (2024) - Price chart

Rating

Web Designing Course: Beginner to Advanced Level (2024) - Ratings chart

Enrollment distribution

Web Designing Course: Beginner to Advanced Level (2024) - Distribution chart
3520740
udemy ID
9/23/2020
course created date
10/5/2020
course indexed date
Bot
course submited by