Design and Develop Responsive Website using HTML5 and CSS3
4.7 (28 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.
194 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Design and Develop Responsive Website using HTML5 and CSS3 to your Wishlist.

Add to Wishlist

Design and Develop Responsive Website using HTML5 and CSS3

Learn the process behind designing and developing fully functional and feature rich responsive website from scratch.
4.7 (28 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.
194 students enrolled
Created by Reinis Bērziņš
Last updated 3/2017
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
2 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 23 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Skills to Design and Build eye-catching responsive websites from 0 all the way to 100
  • The Easy way to build Fully Functional websites
  • Implenet fully functional Contact Form without writing even a single of back-end code
  • Optimize websites for ever growing Mobile world with Media Queries
  • Learn Logic and Skills to program dazzling and elegant jQuery animations
  • The Best practices in web design and development
  • All the little Tricks and Tips to make your website one of a kind
View Curriculum
Requirements
  • None to Basic coding and design knowledge
  • Web browser - one of the latest versions of Chrome, Firefox, Safari will be just fine
  • You can choose your favorite code editor
  • Graphics editor - we will be using Photoshop
  • And just desire to learn real world skills
Description

<<< COURSE UPDATED FOR 2017 + BONUS LECTURE >>>

Take your skills to the next level with this project based course where we will design and develop responsive website from scratch.

This course takes you from beginner with little knowledge about web design and development to the point where you will be able to design and develop website by yourself.

We will start with blank Photoshop document and create beautiful portfolio website which attracts attention of users. Then we will turn the design we created into fully functional, feature rich website taking everything step by step so that you actually learn something useful from this course. You do not have to be expert in Photoshop, HTML, CSS and jQuery because we are going to take everything step by step and i am going to explain everything as we go along.

Some of the features of website include:

  • Responsive Layout that Works on Every Screen
  • Fully Functional Contact Form
  • Animation Effects which Grab Viewers Attention
  • Smart Navigation Features
  • Beautiful and Proffesional Design

In this course you will learn:

  • Find all of the necessary resources to design website
  • Design beautiful website in Photoshop
  • Develop fully functional, real world responsive website from scratch
  • Make website dynamic by developing and implementing amazing features
Who is the target audience?
  • Beginners in web design and development who are looking for the boost to take their skills to the next level
  • People who want to make their living with designing and developing websites as a freelancers
  • Web designers who want to improve their skills by working on a real world project
  • Web developers who want to improve their skills and are looking for a practical project to work on
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 39 Lectures Collapse All 39 Lectures 04:01:57
+
Introduction
2 Lectures 02:53

In this lesson we will look at what exactly we are going to do in this course.

Preview 01:59

In this lesson we are going to look at the tools needed for this course.

Preview 00:54
+
Designing Website in Photoshop
10 Lectures 01:29:41

In this lesson we are going to get all resources needed to design and later on develop our website.

Getting all resources
03:39

In this lesson we are going to create style guide for our website.

Creating style guide
06:45

In this lesson we are going to design navigation bar for our website.

Designing navigation bar
04:31

In this lesson we are going to design intro section for our website.

Designing intro section
09:17

In this lesson we are going to design about section for our website.

Preview 03:53

In this lesson we are going to design skills section for our website.

Designing skills section
11:54

In this lesson we are going to start designing recent projects section for our website.

Designing recent projects section
12:05

In this lesson we are going to design recent projects extra information panel for our website.

Designing recent projects section part 2
11:07

In this lesson we are going to design contact section and also will finish the work on the design of our website.

Designing contact section
18:53

In this lesson we are going to export all resources, like images, from our design so that we can use them later on when developing our website.

Exporting resources from design
07:37
+
Developing Website With Writing HTML
8 Lectures 38:36

In this lesson we are going to create HTML, CSS and JavaScript files for our website.

Creating files for website
02:05

In this lesson we are going to write HTML for navigation bar.

HTML for navigation bar
02:23

In this lesson we are going to write HTML for intro section.

HTML for intro section
02:44

In this lesson we are going to write HTML for about section.

Preview 01:39

In this lesson we are going to write HTML for skills section.

HTML for skills section
03:43

In this lesson we are going to write HTML for recent projects section.

HTML for recent projects section
12:31

In this lesson we are going to write HTML for contact section.

HTML for contact section
06:39

In this lesson we are going to place in fully functional form with the help of Google Forms.

HTML for contact form
06:52
+
Styling Website With CSS
8 Lectures 58:12

In this lesson we are going to write CSS for general styles.

CSS for general styles
11:06

In this lesson we are going to write CSS for navigation bar.

CSS for navigation bar
05:36

In this lesson we are going to write CSS for intro section.

CSS for intro section
07:05

In this lesson we are going to write CSS for about section.

Preview 01:50

In this lesson we are going to write CSS for skills section.

CSS for skills section
03:09

In this lesson we are going to write CSS for recent projects section.

CSS for recent projects section
06:31

In this lesson we are going to write CSS for recent projects extra information panel.

CSS for recent projects section part 2
08:22

In this lesson we are going to write CSS for contact section.

CSS for contact section
14:33
+
Making Website Responsive
4 Lectures 29:04

In this lesson we are going to put in media query for screens above 600 pixels in width in order to adjust our website for different devices.

CSS media query at 600px
04:37

In this lesson we are going to put in media query for screens above 790 pixels in width in order to adjust our website for different devices.

CSS media query at 790px
05:14

In this lesson we are going to put in media query for screens above 920 pixels in width in order to adjust our website for different devices.

CSS media query at 920px
15:33

In this lesson we are going to put in media query for screens above 1105 pixels in width in order to adjust our website for different devices.

CSS media query at 1105px
03:40
+
Adding Various Features With jQuery - BONUS lecture 2017
5 Lectures 16:31

In this lesson we are going to place in variables in our script document.

jQuery placing variables
02:22

In this lesson we are going to place in code for smart navigation which will hide or reveal according to the direction users are scrolling.

jQuery for smart navigation
03:07

In this lesson we are going to place in code for navigation function so that users can navigate through the page using navigation links.

jQuery for navigation function
03:28

In this lesson we are going to place in code so that users can toggle recent projects extra information panels.

jQuery for toggling recent projects
03:50

This is a bonus lecture to give our website a fresh and modern feel to it. We are going to add sleek and eye-catching parallax scrolling effect. And by knowing how to do it, you will be able to implement similar effects to all kinds of websites.

BONUS parallax scrolling effect lecture
03:44
+
Course Update and Finishing the Course
2 Lectures 07:00

This is an update lecture for 2017. As there have been some changes to Google Forms, which we previously used, we now will implement a new cotact form. This time around it will be even esier to make our contact form up and running.

Contact form update lecture for 2017
06:14

In this lesson we will finish this course and we will look at what exactly we did during previous lessons. And i also want to thank you for working along me and i hope that you gained the skills needed to make you better designer and developer. See you next time !

Preview 00:46
About the Instructor
Reinis Bērziņš
4.7 Average rating
28 Reviews
194 Students
1 Course
Designer, Developer and Online Educator

Hello everybody !

My name is Reinis Bērziņš. I am designer, developer and passionate online educator.

I have been designing and developing website for quite some time now and i am always trying to learn the newest trends so that i am up to date when it comes to web design and development.

I am also online educator. I have my own YouTube channel where i am constantly trying to teach something interesting to people all around the world. And now i have taken the next big step by offering full courses in Udemy to everyone who wants to gain new knowledge.

Have a happy and productive learning !