Create A Custom Responsive WordPress Website For A Client

Build a responsive WordPress website that exactly matches client expectations
4.3 (79 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.
7,444 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 47
  • Length 4.5 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 4/2014 English

Course Description

Charge your clients much more money by creating a WordPress website exactly to their requirements.

Create a custom responsive WordPress website for a client using the Genesis theme framework on the WordPress platform.

WordPress provides you with a fairly well-optimised web system. However, combining WordPress with the premium Genesis theme ($59.95) ensures an entirely future-proof, perfectly optimized and responsive web design with the latest CSS3 and HTML5 with Schema mark-up.

The course shows you everything – from the basics to fairly advanced HTML and CSS tweaking of the child theme.

After you have finished this course you will have learned how to:

· Set up a WordPress website on a host's server (both the manual and "one-click" methods)

· Create a custom "Under Construction" page to display during online development

· Set up the logo and top navigation menu with drop-downs

· Set up a blog on it's own separate page

· Set up social media profile link widgets and understand widgets in general

· Add content and images to the website's pages and the blog posts

· Create and style up new sidebar widgets

· Two ways of adding and editing an image slider with overlaid text

· Use CSS media queries to ensure the site displays correctly on all browsers and all possible devices (phones, iPods, iPads, tablets, laptops, etc.) – completely understand responsive design

· Create a contact page with a contact form

· Create an email subscription list and sidebar form with incentive to join – the most important tactic of internet marketing

· Display a "favicon" for your site for the browsers's address bars (as well as for iPod Touch, iPads and iPhones)

· Display a higher resolution logo for retina screens

· Plus much more!

I would advise anyone taking this course to have the Genesis theme framework although it isn't 100% necessary.

This course is ideal for anyone wishing to create a website for themselves or other businesses – for which you could charge $3000+. I have gone into everything in great detail so there's no need to worry if you have very little knowledge of WordPress, HTML, CSS and/or PHP.

The course would be particularly useful for people who wish to run their own web design business as you would be able to charge four-figure fees for creating a bespoke website like this.

What are the requirements?

  • Genesis theme framework
  • Computer & internet

What am I going to get from this course?

  • create a WordPress website
  • create an email list and email capture signup form
  • learn about browser's Developer Tools, HTML and CSS
  • understand how to get WordPress to show any sort of page you like
  • be able to create a website for a client and charge $3000+
  • understand media queries and making a website responsive

What is the target audience?

  • those wanting to produce websites for other people and charge four-figure fees
  • those wanting to be able to set up a WordPress website for themselves

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
02:18

An introduction to the course.

Background music credit: http://www.danosongs.com/

Section 2: Installation and Introducing WordPress
06:19

Using Vidahost as my host, this shows you how to easily install WordPress with one-click.

05:18

Using Vidahost as the host, this shows you how to easily install WordPress manually.

04:02

Adding a plugin in WordPress to make sure that there is an "Under Construction" page there for visitors to see.

04:57

Using the plugin from the last lecture to set up a custom "Under Construction" page with an image.

03:48

In the left hand side of the WordPress backend there are two tabs one called Pages the other called Posts. The pages are for static WordPress pages, for example, the About page or the Contact page. The posts are for the blog articles.

Section 3: Introducing Genesis and beginning customization
07:42

Click here to get the Genesis theme framework.

05:26

This is how to make your child theme (and therefore the theme that you use) doesn't look like the Genesis Sample Child Theme. So we change the name and the image that you see in the WordPress > Appearance > Themes screen.

03:46

Introduction to editing the main Setting in WordPress, this time the site title and the tagline

03:52

A PSD is attached here which is similar to the finished website.

Setting the home page and the blog page in the WordPress > Settings > Reading

05:08

Creating a top navigation menu with Genesis

10:07

Click the Add Media button on a WordPress Page or Post. Further tutorials on this later in the course.

04:28

Further tutorials on this later in the course.

04:03

Widgetized areas in WordPress are areas of the site (to the right of the header, in the sidebar, in the footer, for example) where you can add widgets. Widgets are easily customised pieces of web code or software that can perform certain functions on your website (latest posts widget, calendar widget, search bar widget, email signup form widget, etc.) They make web development easy!

01:54

Showing how the site responds to different device widths

04:08

How to edit what goes in the footer of each page using the Genesis theme.

08:37

Using a widget to add links to Twitter, Facebook, etc

07:11

Mailchimp is an email marketing company. You can create a list of up to 2000 people on Mailchimp for free.

Section 4: Tools of the trade
04:05

There is a simple tool that exists on most computers that will help you understand web design. It’s called Developer Tools.

What are Developer Tools?

Every browser comes with Developer Tools. They allow you to see the nuts and bolts that make up a web page and make changes “on the fly” without having to get your hands dirty editing code files. These changes won’t be seen by anyone – Developer Tools are an environment to test, explore and learn.

Getting Developer Tools to display depends on the browser and system you are using and, sadly, this won’t be possible on tablets or smartphones.

If you’re on a Windows PC, try hitting the F12 key and they’ll pop up at the bottom of your browser window. This may not work on Firefox where you could try Control-Shift-I . If you are on a Mac, Command-Alt-I will bring them up in every browser. To get rid of them, simply hit the same keys.

And, as you can see in the video, you can also right-click on any element on a web page and select “Inspect Element” – the Developer Tools will pop up with the relevant element selected.

Using Developer Tools

It takes a bit of practice to use Developer Tools. But you should try to isolate an element on a web page you’d like to inspect and then see how you can edit it.

Selecting the element, again, depends on the browser and system you are using. You can select a magnifying glass icon in Chrome’s Developer Tools or a cursor tool in Internet Explorer’s Developer Tools. In Firefox, you can select items on the page just after bringing up the Developer Tools, however you have to click on the Style button to inspect the styles on a PC. Again, a simpler way is to right-click on any element and select “Inspect Element”.

Let’s do it now!

Once you have mastered this ability to inspect elements in Developer Tools, you can learn a great deal about HTML and CSS. You can see in the HTML (the larger pane on the left of the Developer Tools) normal body text is wrapped in a <p> tag.

The p stands for paragraph. And you can see in the CSS (the smaller pane to the right of the Developer Tools) the various styles that affect the body text on RobCubbon.com. The first line of the style that affects the <p> tag (or.entry-content p) is “margin: 0 0 25px;” – this adds space (or margin) to the bottom of each paragraph. There is a checkbox next to it, go ahead and uncheck it. You will notice the paragraphs all close up and the space between them disappears. You can even click on that “25px”, change the value and see the paragraphs with greater or lesser space between them. Pretty cool? And, if you get yourself into a pickle, you can simply refresh the page and all the styles will be set back to the way they were.

Editing your theme’s CSS file

So what’s the point of all this? This will help you improve your website design and development skills. But I would encourage you to take baby steps with this if you’re not used to editing your themes files.

Always back up your website before making any changes to the WordPress theme files.

If you’re all backed up and you want to change some style on your website then you may do so by going Appearance > Editor in the WordPress administration area. This will usually take you to the editor for your “styles.css” – the file mostly responsible for the way your website looks. You can make edits to this document but, further down the line, you will prefer to use a good code editor along with an FTP program for uploading.

But, for now, you may like to play around with your basic typographical styling. Is your body text too small? Could your mother read it without her glasses? Maybe it could do with another few pixels on the font-size. After you’ve done that, are the body text lines too close together? If so, you may have to increase the line-height. Is there sufficient space above and below your subheadings? You could add a few pixels to the padding or margin above or below your h2 or h3 tags.

Why CSS?

It stands for Cascading Style Sheets, so called because the style declarations are set generally and specifically and cascade down with the more specific style declarations taking precedence over the general ones.

This can mean if you change one style to affect one element you can find it affecting other elements in your site that you didn’t want to change. The way to avoid this is to set more specific styles – but that will have to be a lesson for another day. In the meantime, just play with it.

Keep copies of your styles every step of the way so, if something goes wrong, you can always revert back. If possible, practice on a test site first. But, it’s fun! You’ll be geeking out on CSS in no time.

You can do it!

You can improve the design of your website. You will be rewarded with a more engaged audience who spend longer times on your site. You could also play around with Developer Tools to gain a greater understanding of HTML and CSS and improve your website’s formatting globally. If you have any questions, I’d be happy to help.

Section 5: More advanced customization
06:50

Adding a bespoke logo to our Genesis Child Theme.

08:57

Some CSS editing to change colors

12:24

More CSS editing to change the links style in the top nav menu

06:42

A different way to create a MailChimp form, this time by adding HTML from the Mailchimp site to a text widget in the sidebar.

04:26

Editing the HTML of the form to get rid of the bits we don't want and to move around the order of the form's elements.

10:37

styling the signup form with css

07:33

Making sure the header widget element on the right of the header lines up with the logo on the left in the way that we want it to.

Changing the font weight of the subheadings
04:09
03:34

Create a new user in WordPress and a discussion on WordPress user roles

05:49

More styling on the email signup form's button

04:20

This uses the CSS property "line-height" to add more space between the lines of the headings

06:03

Using the WordPress plugin Contact Form 7 to create a contact form that gets sent to the client's email when filled out.

Section 6: Improving the website's responsivity to different devices (phones, tablets, etc)
07:09

Showing how the media queries in the CSS file control the way the website responds to different sized devices

07:13

Making sure our large logo is visible on smaller devices by putting in a smaller version of the logo in the narrower widths of media queries.

05:57

Adding a logo especially for retina screen devices like the new MacBook Pro's.

Section 7: Training the client in using WordPress
03:02

Training the client to use WordPress. This is a live training session where we get to grips with the WordPress Page editor.

04:08

Training the client to use WordPress. This is a live training session where we get to grips with adding sub-pages or drop-downs to the main navigation menu.

Section 8: Further improvements
03:30

Changing the color of all the text links in the posts and pages of the WordPress website

06:52

The favicons are available as supplementary material.

This is what you paste in the head:

<link rel="shortcut icon" href="http://nurahnash.com/favicon.ico" /> <link rel="apple-touch-icon-precomposed" href="http://nurahnash.com/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://nurahnash.com/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://nurahnash.com/apple-touch-icon-114x114.png" />

02:31

How to change the background of the dropdown menus.

09:09

More info here: The Ultimate Guide To WordPress Blog Post Formatting

01:56

Going live means deactivating the Under Construction plug-in

Section 9: Adding image sliders
07:49

How to use the Cyclone Slider

07:36

Responsive Layer Slider from CodeCanyon

06:00

Get this LayerSlider from CodeCanyon here.

Section 10: Further WordPress Page and Post formatting tutorials
02:39

How to add subheading to your WordPress Posts (and Pages)

04:06

Everything you'll need to know about adding images to a WordPress Page or Post

Section 11: Special Offers!
07:15

Designing A Website in Photoshop, Illustrator (& GIMP)

Creating a Business Website with a Responsive Design

Build Your Brand: Blogging, SEO, SocialMedia & Relationships

Creating a Business Website with a Responsive Design

More Special Offers: robcubbon.com/free

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Rob Cubbon, Bestselling author, entrepreneur, web and graphic designer

I have over 15 years experience in graphic design, web design and marketing. I have run my own business since 2005.

I am an Amazon bestselling author of seven books, bestselling Udemy instructor and all-round good guy who wants success for you and your business.

Being your own boss is an incredibly liberating experience but it can be difficult as well. There never seems to be enough time for what we want to do.

I'm driven to help people experience the positive side of entrepreneurship, not the negative.

I also build brands, create websites and run marketing campaigns for my clients.

My mission statement: I want to help and inspire people to build sustainable online businesses, earn passive income and experience greater freedom and happiness in their lives.

Ready to start learning?
Take This Course