Design and Code a Responsive Website using HTML5 and CSS3

Learn the process behind designing and developing fully functional and feature rich responsive website from scratch.
4.4 (23 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.
71 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 37
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

Take your skills to the next level with this project based, real world 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
  • Fully functional contact form
  • Various animation effects
  • Navigation features
  • Beautiful design
In this course you will learn:
  • How to prepare before designing website
  • How to design website in Photoshop
  • How to turn the design you created into responsive website
  • How to incorporate various features into website like fully functional contact form

What are the requirements?

  • Adobe Photoshop
  • Web browser (one of the latest versions of Chrome, Firefox, Safari would be advisable)
  • Code editor
  • Basic knowledge of HTML, CSS and jQuery
  • And the most important thing is the desire to learn

What am I going to get from this course?

  • Learn how to plan before designing website
  • Learn the skills needed to design beautiful websites in Photoshop
  • Learn how to turn your own designs into fully functional, responsive websites with ease
  • Learn how to add fully functional contact forms to your websites without writing even a single line of back-end code
  • Also learn how to add beautiful and eye-catching animations and effects to your websites
  • And learn how to incorporate other interesting and useful features into your websites

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
01:59

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

00:54

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

Section 2: Designing Website in Photoshop
03:39

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

06:45

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

04:31

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

09:17

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

03:53

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

11:54

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

12:05

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

11:07

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

18:53

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

07:37

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.

Section 3: Developing Website With Writing HTML
02:05

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

02:23

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

02:44

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

01:39

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

03:43

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

12:31

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

06:39

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

06:52

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

Section 4: Styling Website With CSS
11:06

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

05:36

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

07:05

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

01:50

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

03:09

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

06:31

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

08:22

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

14:33

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

Section 5: Making Website Responsive
04:37

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.

05:14

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.

15:33

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.

03:40

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.

Section 6: Adding Various Features With jQuery
02:22

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

03:07

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.

03:28

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

03:50

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

Section 7: Finishing This Course
00:46

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 !

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Reinis Bērziņš, 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 !

Ready to start learning?
Take This Course