Become a Professional Web Designer
4.4 (22 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
349 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Become a Professional Web Designer to your Wishlist.

Add to Wishlist

Become a Professional Web Designer

If you want to get into web design as a profession, this course has everything you'll need to make your dreams come true
4.4 (22 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
349 students enrolled
Last updated 2/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 36.5 hours on-demand video
  • 3 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the basics of web design
  • Understand grid systems in web design
  • Design a real website
  • Learn about the differences between HTML and CSS, and how they work together!
  • Discover how to insert and format text blocks, tables, images, and more!
View Curriculum
Requirements
  • A free text editor
  • A passion for web design and development
Description

The Internet is everyone's go-to source of information in today's world. Businesses, public figures, publications and everything in between all have a presence on the web; and the more professional their website looks, the more successful they tend to be. Web designers are more in demand than ever before, and the profession is constantly changing along with the web itself. This course aims to teach the most up to date fundamentals of web design from scratch.

Learn Web Design from Scratch

  • Understand the basics of CSS and HTML
  • Learn about current web designing trends and developments
  • Gain an insight into web development, debugging, etc. as well as design
  • Build your own portfolio website

Web Designing for Beginners

This course has been developed for both complete beginners and those who already have a limited knowledge of web design. Aspiring web designers, web developers who want to understand the design side of the business, and graphic designers - as well as those from completely unrelated disciplines - will all be more than capable of handling the content of this course.

This course will take you through the fundamentals of web design from scratch. That means getting to grips with HTML, CSS and Foundation Grid Framework; working with images, webfonts and sprite sheets among other elements; understanding grids and responsive design; and achieving flawless layouts, eradicating bugs, and more.

Throughout the course you will work towards designing and developing a colorful, modern and responsive portfolio website. By the end of the course you will have this website completed, and can use it when starting out on your career in web design.

About HTML and CSS

HTML, or Hyper Text Markup Language, is the code used to define colors, graphics, hyperlinks, paragraphs, and other simple elements of a website. It was developed by the founder of the web, Tim Berners Lee, back in 1990.

CSS, or Cascading Style Sheets, define the more advanced aspects of websites like fonts, background images, positioning and much more. It is a style language that defines HTML layout, so the two are intrinsically linked. Both form the basic frameworks for all websites on the internet.

Who is the target audience?
  • Beginning web designers
  • Web developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
290 Lectures
36:33:25
+
Introduction to the Course
1 Lecture 01:45
+
Introduction to Web Design
34 Lectures 07:23:14

Please download Project files

Preview 02:33


Your First HTML File
07:03

Introduction to Document Layout
06:52

Linking In A Stylesheet
07:39

Styling Your First Element
16:15

The Box Model
14:20

Introduction to Developer Tools
14:22

Understanding Display Types
09:58

Project- Create a CSS Button
21:15

Using CSS Selectors
23:09

Styling Links
04:49

Using Floats
15:20

Using Clearfix
05:40

Working With Images
14:50

Validating HTML and CSS
08:55

Understanding Webfonts
16:42

Webfonts, Google Fonts and API
07:49

Understanding Cascading Style Sheets
07:46

Vendor Prefixes
09:56

Project- Create a Color Changing Profile Image
12:59

Basic Website Layout
12:58

Choosing a Grid Framework
09:10

Grids and Responsive Design
23:16

Working with Forms
27:59

Using Font Icons
13:56

Understanding Sprite Sheets
19:11

Project- Create a Comment List
15:00

Positioning
18:52

CSS Resources
05:36

Project Introduction
04:58

Adding Our Graphics
08:32

Building Our Site
43:27

Validating Our Site
03:55
+
Fundamentals of HTML
32 Lectures 02:40:38

Download source files here

What is HTML
02:55

What is HTML5
02:59

Getting the Browser
00:41

Getting the Editor
00:48

Setting Up the Editor
01:19

Structure - Hello World
04:36

The DOM
02:09

Customizing the Editor
01:32

Self Closing Tags - Environment
01:21

Validation
06:10

Comments
02:21

Block Level Elements
08:41

Line Break and Spacing
04:49

Span - Text Modifiers
02:37

Anchors
10:25

Images
05:09

Tables
04:49

Form Basics
09:54

Placeholder vs. Value
02:31

Radio Buttons, Checkboxes, Select Elements and Text Areas
08:22

New HTML5 Inputs
08:52

HTML5 Input Attributes
15:43

Action Attribute
03:39

GET vs. POST
03:12

Submit Buttons
04:05

Create a Hotel Booking Form
18:45

New Elements in HTML5
03:39

HTML5 Semantic Elements
03:14

Semantic Elements in Practice
04:31

Meter and Progress Elements
03:09

Audio
04:14

Video
03:27
+
HTML5 and CSS3 Fundamentals
35 Lectures 04:53:40
Intro
04:06

Page basics
11:30

Text Basics
08:21

Text Formatting
05:08

Lists
09:06

Image Prep
09:39

Inserting Images
08:15

Website Project1
16:31

css basics
09:30

Font Styles
09:58

Colors
07:33

List Styles
04:17

Advanced Selectors
09:46

Website Project2
08:00

Link Basics
06:37

In-page Links
02:37

Link styles
04:12

Navigation Menus
05:58

Website Project 3
09:54

Block Spacing
12:12

Arranging the Page
08:44

Positioning
07:30

Website Project4
20:14

Tables
06:48

Table Styles
09:29

Website Project5
07:38

Form Basics
05:38

form Elements
07:21

HTML5 Form Elements
12:00

Form Styles
08:16

Website Project6
11:34

Video preparation
04:17

Video HTML
08:30

Website Project7
07:12

Conclusion tips and resources
05:19
+
Fundamentals of CSS and CSS3
30 Lectures 05:08:56
What Is CSS
07:29

Understanding CSS
10:06

How CSS and HTML Work Together
20:14

Selectors (Part 1 of 4)
10:39

Selectors (Part 2 of 4)
11:31

Selectors (Part 3 of 4)
11:00

Selectors (Part 4 of 4)
08:38

Styling Links (Hyperlinks)
13:16

Widths and Heights
12:43

Positioning
10:57

Centering a Container
10:11

Display Types
12:27

Hiding an Element
04:40

Margins and Padding
13:43

Overflow
08:31

Element Stack Order (z-index)
07:31

Cursors
07:30

Box Sizing
07:41

Colors
10:45

Font Basics
13:43

Floats
17:26

Clearfix
06:45

Forcing Uppercase, Lowercase and Capitalisation
05:38

Text Alignment
06:30

Text Indenting
11:16

Backgrounds
12:28

Multiple Background Images
08:59

Background Size
05:56

Borders
11:01

Border Images
09:42
+
HTML5 and CSS3 site design
61 Lectures 06:06:19
Welcome To HTML5 & CSS3!
00:57

A Look At What We'll Build
02:14

Programs I'll Be Using
03:24

In The Beginning…HTML Fundamentals
11:18

Understanding What CSS Is All About (Free Lesson!)
06:34

Viewing A Page's Background Code
04:15

Organizing Site Files
06:43

Creating A Page And Understanding Index Files
05:41

Setting Up An External Style Sheet
03:36

Setting Up The Page Structure
06:53

Connecting The External Style Sheet And Testing
08:13

Inserting And Formatting The Site Header
07:35

Finishing Up The Basic Layout
04:48

Debugging For Internet Explorer
03:24

Understanding How The Layout Works
05:49

Using Divs For Page Layout
07:13

A More Economical Approach To Layout And CSS
07:50

Using Float And Clear
05:53

Centering The Layout
09:00

Nesting Layout Objects
07:03

Spacing Apart The Layout
09:11

Final Touches
04:45

Inserting Text Into The Layout
04:15

Setting Up Paragraphs And Headings
04:35

Adjusting The Layout For Text, Part 1
07:35

Adjusting The Layout For Text, Part 2
05:19

Formatting HTML Headings With CSS
06:48

Formatting Paragraphs
04:09

Using Class Rules To Format Text
05:22

More Formatting With Class Rules
09:06

Working More Efficiently With CSS
06:52

Inserting And Formatting Lists
06:40

Using A List To Build The Main Navigation Menu
10:15

Setting Up The Footer Navigation
06:29

Inserting An Image
06:27

Resizing Images With Your Graphics Editor
04:51

Controlling Graphics With CSS
07:06

Inserting The FeatureBox Images
07:10

Adjusting The FeatureBox Layout
02:56

Setting Up The FeatureBox Titles
06:18

Illustrator, Photoshop, HTML, And CSS Workflow
07:27

Getting Ready For Site Rollout
03:37

How To Not Roll Out A Website
07:06

Rollout Part 1_Setting Internal Hyperlinks
04:36

Rollout Part 2_Creating The Site's Pages
01:32

Previewing And Testing The Site
04:02

A Final Thought On Site Rollout
05:25

Adjusting The Site's Hyperlink Formatting
06:58

Inserting A Simple Slideshow
08:28

Inserting And Formatting Tables
08:14

Inserting A Google Map
07:50

Formatting A Customer Testimonial Page
07:06

Setting Up A Contact Us Page
06:43

Finalizing The Site
11:54

Organizing The CSS File
05:27

Setting The Remote Site Info
03:51

Uploading The Local Site To The Remote Server
02:24

Testing The Live Site
02:04

Making Edits And Updating The Live Site
06:49

Testing And Debugging For Other Browsers
09:52

Where to go from here
00:22
+
Building responsive websites with HTML5 and CSS3
42 Lectures 03:29:25

Download files here

Welcome
00:48

A Look At What We'll Build
01:35

Key Aspects Of Responsive Design
02:43

Determining Device Resolutions To Target
04:20

Wireframing Responsive Layouts
04:58

The Concept Of Using Multiple CSS Files
10:49

Media Queries & Multiple Style Sheets
08:57

Building Media Queries Into A Single CSS File
07:38

Using Media Query Expressions
05:04

Setting Up The HTML & CSS Files
04:19

Getting Started With The Header
07:36

Inserting The Main Nav Menu
06:01

Inserting The Search Field
06:55

Problems With Applying Floats
04:19

Integrating Google Fonts API
03:25

Building The Hero Section Structure
04:25

Formatting The Hero Section
09:04

Inserting & Formatting A Call To Action Button
09:50

Building The Features Section, Part One
05:46

Building The Features Section, Part Two
04:56

Inserting The Organize Section
08:18

Building The Share Section
05:15

Building The Call To Action Area
06:36

Inserting And Formatting The Footer
03:47

Finishing Touches For The High Resolution Layout
04:06

Setting Up The Medium Resolution CSS & Testing The Media Query
07:01

Formatting The Medium Res Header
04:08

Formatting The Medium Res Hero Section
06:08

Formatting The Features Section
02:13

Formatting The Organize And Share Sections
05:17

Building The Get Section & Finishing Up The Medium Res Layout
02:53

Setting Up The Low Res CSS & Testing The Media Query
04:40

Formatting The Low Res Header
02:52

Resolving Problems Caused By Floats
04:21

Formatting The Low Res Hero Section
03:17

Formatting The Features Section
01:46

Formatting The Organize And Share Sections
02:58

Building The Get Section & Finishing Up The Low Res Layout
03:06

Disabling Device Smart Zoom
05:59

Testing Your Responsive Layouts
04:27

Setting Up Retina Display Graphics
06:21

Where to go from here
00:28
+
Photoshop CC for the web
33 Lectures 03:28:28
Hello And Welcome
01:11

Understanding Raster And Vector
03:42

Setting Up Photoshop For The Web
09:40

Common Photoshop Productivity Techniques
09:28

Understanding Colour Spaces
06:55

Understanding The Image Size Dialog Box
09:50

Why Resolution Doesn’t Matter On The Web
15:41

Techniques For Resizing Images
11:23

Web Graphics Roundup
07:39

Saving Images As A GIF
08:18

Saving A Transparent GIF
03:13

Saving Images As JPEGs
05:33

Saving Images As PNGs
04:00

Saving Images In The SVG Format
06:04

Touring Through The Save For Web Dialog Box
07:49

Optimizing Images As GIFs
07:00

Creating Animated GIFs
06:24

Optimizing Images As JPEGs
04:39

Saving As Both PNG-8 And PNG-24
03:23

Creating Alpha Transparency With PNGs
03:37

A Final Note On Image Optimization
01:33

Preparing Images For Retina Displays
04:43

Saving An Optimization Preset
03:39

Creating A Droplet
07:00

Batch Processing A Large Number Of Images
02:48

Using Photoshop’s Image Processor Command
02:59

Creating Web Buttons
10:39

Building A Website Header
10:40

Building A Navigation Menu
08:41

Introducing The Asset Generator
08:03

Going Further With The Asset Generator
07:46

Final Notes When Using Generator
02:21

Where to go from here
02:07
+
Develop responsive websites with Bootstrap 3
20 Lectures 03:19:48
Introduction to Bootstrap 3
07:09

Getting Started with Bootstrap 3
06:39

Big Picture
14:51

Overview of the Website
06:25

The Home Page
09:25

The Home Page Part 2
12:03

Debugging
07:00

Products page
19:00

Detail Page
12:38

Customizations
16:38

Production Notes
04:29

Web App UI Overview
02:51

Web App Navs
09:04

Web App Details
11:43

Customization and Adv Topics
02:45

Creating a Custom Theme
19:57

Dynamic Bootstrap 1
19:26

Dynamic Bootstrap 2
12:49

Review and Closing
04:34

Request a Course
00:22
+
Bonus Material
2 Lectures 01:18
Bonus Lecture: Certificate of Completion
01:04

Bonus Lecture: Course Discounts
00:14
About the Instructor
Stone River eLearning
4.2 Average rating
15,570 Reviews
266,324 Students
197 Courses
250,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 390,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.