Responsive Html5 Theme Development

Lets build a blog theme using html5 and css3 technologies like media queries, which could easily be ported to wordpress.
4.4 (4 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.
1,517 students enrolled
25% off
Take This Course
  • Lectures 12
  • Length 1 hour
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 6/2014 English

Course Description

Responsive web design has gained a lot of momentum within the past 5 years. In today's market of countless mobile devices, you are one step ahead in terms of web marketting when you have a responsive mobile website. In light of that, why not take the opportunity to learn how to get started with transitioning from building old, non-responsive website to the modern web world of fluid and engaging mobile-friendly web designs.

In this course, using direct approaches, I will teach how to build such websites. This is a very focussed course and I intentionally removed unnecessary material which I believe only distracts students from what they need to know. I know this from experience, and hence the reason the course is not that long. So lean back , relax and come along this exciting journey which is responsive web design.

Please donot forget to give feedback so I can improve future courses and also I'll know how I am doing with this course. I'll appreciate it and plus it'd take less than a minute, so go on click that feedback button.

What are the requirements?

  • Any text editor will do
  • A modern browser, chrome recommended
  • A basic knowledge of html and css

What am I going to get from this course?

  • Learn How to get started with responsive design by doing
  • Learn about some of the decisions you have to make when building a responsive website
  • Get an idea of what responsive design is

Who is the target audience?

  • This course is by default targetted at beginners who have knowledge of html but want to get started building responsive websites.
  • More advanced users could benefit from it as well because there is emphasis on clean code, class names, css organisation and such.

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.


Section 1: Bootstrapping

In this video, introducing the course and what we'll be covering.


In this video, well prepare the starting html for our theme.


No, we'll introduce a grid system. I'll show you how to download the custom grid I made and how to insert it into the theme.

Section 2: The Main Content and Sidebar

Now we'll start applying the grid system to the main content and sidebar. This will create two columns, one for main content and another for sidebar. They will also become responsive as a result of this.


Here we'll style the main content. We'll style each individual item then the whole container.


Here, we'll be styling the sidebar. Also, we'll style the individual widgets in there and prepare them for possible wordpress usage in the future.

Section 3: The Header

We'll be making the header content aligned with the rest of the main content by applying the grid there as well.


We'll now style the logo and float it to the left, give it a height and vertically center it.


We'll be styling the navigation elements, float them to the right and vertically center them. We'll also make them responsive by using custom media queries outside of the grid system.

Section 4: The Footer and Pagination Links

Lets style the footer by centering it and add some margin.


Here, we'll create a page which looks similar to the homepage but it will be slightly customized for a single blog post instead of a list. then we'll conclude the course here.


Lets add pagination links and style them.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lamin Sanneh, Freelance frontend developer and writer at

A frontend developer, my name is Lamin Sanneh, a recently graduated Computer Science student. I love to dive into pretty much everything web related. I've been doing this programming stuff for almost 8 years. At a young age, I have always been interested in technology. When I finally finished high school, I jumped onto a java programming course. Here, I learned a great deal about the possibilities of programming. It was not until University that I actually realized that I just did not want to programming, but that I wanted to focus on web development. I did a web project in my first year of University. After the project, because I was so excited about web programming, I offered to make a website for free for a group of friends of mine.

After that, I started doing freelancing just so I could learn. I later realized that I learn better with videos, so I went on youtube, watched as much as I can. A couple of years down the road, I thought to myself, it is probably not just me who learns better with videos, so I decided to share my knowledge to give back to the community. I started a youtube channel at last year where I teach various topics on web development and you know what they say, the rest is history from there. Nowadays, I play football and make tutorials by day and at night I'm wrestling with client projects or blogging at my personal website lswebapps.

I hope you enjoy my courses and would welcome any feedback. Cheers.

Ready to start learning?
Take This Course