Design A Complete Responsive Business Website From Scratch
4.7 (104 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,039 students enrolled

Design A Complete Responsive Business Website From Scratch

Learn how to design a complete responsive website from scratch using HTML5, CSS and JavaScript step by step
4.7 (104 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
10,039 students enrolled
Created by Godson Thomas
Last updated 6/2019
English
English [Auto-generated]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 article
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Basics of HTML5 CSS and JavaScript
  • Web Designing Process
  • Create a complete website from scratch
  • Responsive Design
  • Use 3rd Party Libraries
  • Host Your Website For Free
Requirements
  • Basic knowledge of computer
  • Basic idea of how the internet works
  • A computer & internet connection
Description

Every business needs an online presence in today's age. This course is aimed at helping you design a complete website from scratch right from the planning of the website to the deployment. The website will be responsive which means that it will look great on desktop as well as mobile devices.

This course is aimed at beginner and intermediate web designers. If you are just getting started I have a beginners guide for HTML5 and CSS in this course. Once you are equipped with all the knowledge you need to have, we will start with the design using HTML5 and CSS.

Everything will be done onscreen. If you follow along you will have a complete responsive website designed by the end of this course. You will learn some tips and tricks along the way.

In the end, I will show you how to host the website online for the world to see.

Here is why you should take this course:

  • Practical approach to learning in this course will help you understand web design better.

  • You don’t need to have any knowledge of web designing beforehand.

  • There are 2 quizzes which will help you revise your knowledge of HTML5 and CSS.

  • A web design exercise at the end of the course for practice.

  • Source code for the main project and web design exercise available for download.

Using the knowledge you can start designing almost any type of static website you want.

I hope you get the most out of this course. Thanks and happy coding!

Who this course is for:
  • Beginner web designers
  • Anyone wanting to create their own responsive website from scratch
  • Anyone who wants to learn HTML5 and CSS
Course content
Expand all 55 lectures 03:32:22
+ Introduction
2 lectures 05:16

This is the introduction to the course. Here I will show you what we will be designing throughout this course. I will show you a demo of the desktop as well as the mobile version of the website we are going to design.

Preview 03:40

In this lecture, I talk about how the course is structured and what is covered in different sections of the course.

Preview 01:36
+ Setting Things Up
4 lectures 08:14

In this lecture, I will show you which code editor I use for designing websites. And I will also show you some of the awesome extensions you can use for the code editor.

Code Editor & Extensions To Use
03:22

In this lecture, we plan our website before getting started with coding. I show you the wireframe that I drew for the website. I also show you some online tools that can be used to choose colors for a website. Then we also take a look at where to get free fonts for your website.

Planning The Website: Wireframe, Colors & Fonts
03:14

In this lecture I talk about a free online tool that you can use to design your own logos quickly if you are not a professional graphic designer.

Designing A Logo
00:53

In this lecture, I share the names of some free websites where you can find royalty free images and videos for your website.

Get Free Images & Videos For Websites
00:45
+ HTML Crash Course
15 lectures 41:15

This is an introduction to HTML.

Preview 01:12

In this lecture, I will show you how to create an HTML file and how to view the result on the browser.

Preview 01:37

In this lecture, we will see how to create headings and paragraphs in HTML. There are 6 levels of headings in HTML.

Preview 03:09

In this lecture, we will write the basic boilerplate for HTML5. I also show you a shortcut in VS Code to write the HTML5 boilerplate in just two keystrokes.

Preview 03:48

In this lecture, we will see how to nest one HTML tag inside another.

Nest Tags Inside Another
02:05

In this lecture, we will see how to create horizontal lines and line breaks in HTML.

Line Breaks & Horizontal Rules
01:34

In this lecture, we will see how to work with images in HTML5

Images
02:11

In this lecture, you will learn how to create anchor tags which are used to create links to take the visitor to another webpage.

Anchor Tags
02:47

In this lecture, we will see how to create divisions and spans using HTML. Divisions are one of the most commonly used tags in HTML.

Divs & Spans
04:22

In this lecture, you will learn how to create different types of lists in HTML.

Lists
03:01

In this lecture, you will learn how to create tables in HTML.

Tables
02:23

In this lecture, you will learn how to create forms using HTML. Forms can be used for login forms, registration forms, search forms, contact forms, etc.

Forms
03:19

In this lecture, we will see how to create radio buttons and dropdowns in HTML.

Radio Buttons & Dropdowns
03:12

In this lecture, we will take a look at some semantic tags which were introduced in the latest version of HTML i.e. HTML5.

HTML5 Semantic Tags
02:01

Audios and videos are commonly used in websites today. In this lecture, we will learn how to add video or audio to your website.

Audio & Video
04:34

This quiz is designed to test your knowledge of HTML. If you have watched the complete crash course, you can score well in this quiz.

HTML5 Quiz
10 questions
+ CSS Crash Course
8 lectures 44:13

This lecture is an introduction to CSS.

Preview 01:21

In this lecture, you will learn 3 different ways to add CSS to your website. I will also show you the syntax of CSS.

How To Write CSS
03:06
Selectors In CSS
08:36

We will take a lot at some of the most used properties in CSS. There are hundreds of properties so I am not going to go through each one of those. You can find the list of all the properties online.

Properties In CSS
05:56

In this lecture, we will see what are pseudo classes and pseudo elements and how to use them.

Pseudo Selectors
06:07

In this lecture, we will discuss about display properties in CSS.

Display Property
05:56

In this lecture, I will explain to you what is box model in CSS.

Box Model
05:39

In this lecture, we will discuss about CSS Specificity which helps the browser to decide which CSS declaration should be applied to an element.

CSS Specificity
07:32

Welcome to this CSS quiz to test your knowledge of CSS. If you have watched the complete CSS crash course, you will be able to score well in this quiz.

CSS Quiz
10 questions
+ Introduction To JavaScript
1 lecture 05:12

This is a brief introduction to JavaScript. We are not using a lot of JavaScript in this course. So, I didn't include an in-depth video on JavaScript. It is a huge topic and should have its own separate course. But the basics discussed in this video can help you get started with JavaScript and complete our website.

Brief Introduction To JavaScript
05:12
+ Setting Up The Project
1 lecture 02:58

In this lecture, we will create the index.html, style.css and main.js files for our website. We will also start with the index.html file and import FontAwesome icons and Google Fonts.

Create The HTML, CSS & JavaScript Files
02:58
+ Header & Navigation Menu
4 lectures 19:21

In this lecture, we will write the markup (HTML) for the header of our website.

Markup For The Header
03:17
Styling The Header
07:17

In this lecture, we will write the HTML for the navbar for our website.

Markup for Navigation Menu
01:38
Styling the Navigation Menu
07:09
+ About Section
2 lectures 04:23

In this lecture, we will write the HTML for the about section of our website.

Markup For The About Section
02:27

In this lecture, we will write the CSS for our about section.

Styling The About Section
01:56
+ Work Section
3 lectures 14:53

In this lecture, we will write the markup for our work section.

Markup of The Work Section
03:40

In this lecture, we will style the work section.

Styling The Work Section
05:53

In this lecture, we will add some JavaScript to the work section to make the work gallery work.

Adding Some JavaScript To The Work Section
05:20
+ Testimonials Section
3 lectures 08:52

In this lecture, we will write the markup for the testimonials section.

Markup For Testimonials Section
02:41

In this lecture, we will add styles to our testimonials section.

Styling The Testimonials Section
01:54

In this lecture, we will code the functionality of our testimonials section slider. We will use a library to do this.

Coding The Functionality Of The Slider
04:17