Create a Responsive Business Website with WordPress

Step by step WordPress! Easily design and develop a responsive business WordPress website for a client
4.0 (64 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,546 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 38
  • Length 5.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 3/2013 English

Course Description

Charge your clients more money by being able to create a WordPress website exactly to their requirements.

This Responsive Website Design course will enable you to create a Responsive Website for a business using the Genesis theme framework on the WordPress platform.

WordPress is the most ubiquitous CMS (Content Management System) on the internet today. It provides you with a fairly well-optimised web system. However, combining WordPress with the premium Genesis theme ensures an entirely future-proof, perfectly optimized and responsive web design.

After you have finished the Responsive Website Design course you will have learned how to:

· Layout a website visual in Photoshop and present it to your client

· Install WordPress locally on your computer to ensure faster development

· Set up a website using WordPress on a host's server

· Upload a local site to a remote site

· Create an "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

· Change the website's text, use different fonts and create beautiful web typography

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

· Create and style up new sidebar widgets

· Add social media (Twitter, Facebook, LinkedIn, etc.) profile links and icons

· Create page templates

· Add and style a jQuery slider

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

· Design and layout a blog archive page with featured image thumbnails

· Create a contact page with a contact form

· Create an email subscription list and sidebar form with incentive to join

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

· Plus much more!

I would say that 35-45% of the course is Genesis-specific so I would advise anyone taking this course to have the Genesis theme framework (which is only $59.99).

This Responsive Website Design course is ideal for anyone wishing to create a website. 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. Similarly, if you are already a web designer this course will teach you How to Make a Responsive Website by digging into the theme's code to enable you to get a WordPress site looking and acting exactly how you want it to.

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 business website like this.

What are the requirements?

  • Photoshop, GIMP or some sort of image editor
  • Dreamweaver, Coda, TextMate, TextEdit, Notepad or some sort of text/code editor
  • IMPORTANT: Genesis theme framework ($59.95)

What am I going to get from this course?

  • Set up a business website from design to finished product
  • Understand WordPress
  • Understand the Genesis theme framework
  • Continue in your understanding of HTML, CSS and PHP
  • Continue in your understanding of using Photoshop and Illustrator to create web graphics

What is the target audience?

  • Web designers
  • Graphic designers
  • People wishing to work on the web
  • People wishing to provide web design and development services

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: Preparation
05:58

Welcome to my course. By the end of this course you'll be able to design and develop a responsive business website with blog, slider, contact page, etc., all in the highly optimized, expertly coded and awesome Genesis theme framework on WordPress.

You can download the Photoshop documents used in the video!

This first lecture explains about designing the visual of the website in Photoshop or any graphics program.

I also explain about what the different areas of the site are there for.

I also mention a very good logo course you can do here on Udemy. If you follow this link you'll get the course for only $22 - over 50% off

Cd 3.psd (7.73 MB) is the home page

Cd Page 1.psd (3.44 MB) is the about page – and the main template for the site.

It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

Getting started

Create a large Photoshop document. In the video we created one 1352 pixels wide. 1152px with 100px margins either side. The width and height can be increased or decreased later with Canvas Size. Make sure it's RGB at 72 dpi.

I usually center the design within canvas. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can't see the rulers go Cmd(Mac)/Ctrl(PC)-R.

Zoom in [Cmd(Mac)/Ctrl(PC)-plus]. Zoom out [Cmd(Mac)/Ctrl(PC)-minus]. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document's window.

Use vectors, Shapes and Smart Objects

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo's size multiple times without worrying about it's quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven't found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

10:47
This is about how to layout a page in Photoshop.

  • Using Guides
  • Using layers
  • Difference between Vector Smart Object and a normal rastered layer
  • Copying and pasting between documents
  • And much more!

07:37


This lecture explains, if you are working for a client, how to best display the website visuals to the client so that he/she passes the design. 

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:





Home page visual number 1




You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.


Section 2: Local Development
04:39

MAMP (Stands for Mac Apache MySQL PHP) 

This video shows you how to install WordPress locally on your own computer at home. This is used primarily for testing sites and creating themes. It's so useful for amending CSS in themes because the changes are instantaneous and you don't have to wait for the server to update, or even to flush cache which can be a pain in the bum.

So, download MAMP, install, start, create a new database on PHPMyAdmin, download WordPress, put the folder in /Applications/MAMP/htdocs/ find the WordPress folder with your browser by typing "localhost:8888/wordpress" run through the configuration process.

Database name: "wordpress" in the example of the video lecture but it can be called anything

Username: root (MAMP default)
Password: root (MAMP default)

Leave all the rest.

That's it. You're done!

For those of you without Macs and who are using good old Windows PCs:

Desktop Server from ServerPress is really good. As is XAMPP  

07:06

Another way to install WordPress locally – for PCs as well as Macs – is XAMPP

11:32

      • You can purchase and download the Genesis theme framework here. Free sample child theme here added as extra lecture material to this lecture.Here I explain the crucial difference between a child theme and a theme framework.Always change or edit the child theme – never edit the theme framework (the "Genesis" folder)!I often ask the visitors at my website what they would like to me write about and the most common subject people mention is making your own WordPress theme.WordPress is a powerful publishing platform which can be made to act and look like just about any kind of website.What are WordPress themes and how do you make them?Themes are a collection of PHP, CSS and image files that change the design or “skin” of your website. But they also do much more than that. They can also change the way the site behaves and the interface, producing different templates for different pages, etc.There are two main ways to create a new theme for WordPress:
        • First you get use an existing simple theme like Starkers and modify it to produce your own theme
        • Secondly, and this is the method I recommend, you can get a theme framework like Genesis or Thesis and create a child theme to run on top of the framework.
        Setting up a child theme on a framework sounds more complicated but it actually simplifies the process of creating a website.Using a theme framework makes your WordPress website future proof as these frameworks will be updated along with the WordPress core updates so there's no way your site will suddenly stop working when you update WordPress.Theme frameworksThe benefit of using a framework is that the core theme coding is already done and done right. When you create your own custom theme, you are responsible for everything – so if anything goes wrong it's up to you to fix.Many of the leading lights in website management advocate Genesis.Matt Mullenweg, WordPress founder developer: “Child themes are the only way you should build your WordPress site on top of a framework, and Genesis has great support for child themes and other WordPress functionality.”I used to create WordPress themes from scratch but when I wanted to add improvements to them, like nested comments for example, I found it would conflict with another element of the theme and fixing it would mean starting again from scratch.Even if you think you know everything, you will always be asked to do something you're not quite sure how to accomplish. When using a WordPress theme framework like Genesis you have the support of thousands of top quality developers – and amongst them there is bound to be someone who knows the exact and best solution to any query.Here are some other advantages of using theme frameworks:
        • Good for SEO. Frameworks such as Genesis and Thesis are much better structured for SEO. WordPress SEO expert Joost de Valk gives Genesis 5 out of 5 for SEO. The SEO controls are so good you don't even need an SEO plug-in, although if you do want one it's fully compatible and transferable with Yoast's WordPress SEO plug-in and others.
        • Quicker to develop with. Because it is all expertly coded and follows best practices it allows you to cherry pick the best elements (drop down menus, post thumbnails, jQuery sliders) and drop them into your design.
        • WYSIWYG controls. Theme frameworks have robust settings sections and widgetized areas, enabling drag-and-drop control over the website's elements, allowing design changes without coding.
        The reasons I use GenesisI've been using Genesis for over two years and I can honestly say that I'll never go back to writing themes on my own again. I can do everything I want with Genesis and I can do it quicker.Yes, I'm using affiliate links in this article so if you make a purchase through one of the links I may get a commission. However, I would never recommend something to you that I don't use myself. And this is why I use Genesis:
        • Support. The documentation and developer support is awesome. You can ask how to do something through their forums and an expert developer will tell you within hours.
        • Future-proof. Studiopress are always looking to the future. The next release, Genesis 1.8, will be responsive and create different device-dependent versions of the site for mobiles, iPads, tablets, etc. This is a big winner for me because the mobile web is going to be huge and so far the WordPress mobile plug-ins are not very customizable.
        • Compatibility. It's totally compatible with all the major WordPress extensions such as Gravity Forms, bbPress, WordPress Multi-Lingual, etc.
        • Price. It is, actually, rediculously cheap. And cheaper than Thesis or Headway. Just $60 for the framework – which is all you need. You can create as many sites as you want and have access to the support. $60 is a small price to pay for total certainty in SEO, security, and website development.
        Darren Rowse – Founder ProBlogger.net:“Genesis lets me sleep easy. Knowing my blog is well optimized, secure and easy to update lets me get on with developing content, community and building a business from my blogging.”Creating a child theme on the Genesis framework for WordPressHere is another video where I create a Genesis child theme for WordPress.
</b>
03:42

You can purchase and download the Genesis theme framework here.

Once you have WordPress up and running you need to install your Genesis theme framework and your child theme. You will get your copy of Genesis as soon as you make the purchase. Un-zip it and put it in the /themes/ folder which, as you know, can be found in /wp-content/ amongst your WordPress files. No need to touch that folder ever again – all your theme changes will go in your child theme.

And then to load your child theme download a sample child theme from the StudioPress website or here:

You may want to re-name the child theme by changing the folder name and editing the style.css and the functions.php, but put the child theme next to the Genesis theme in the /theme/ folder and activate it in the WordPress back-end.

90% of the changes you make to the child theme will be to the CSS file. The other 10% – adding custom page templates, removing certain elements from certain pages, adding widgetized areas, etc., these changes can all be put in the functions.php file. Here is the functions.php file of the above sample child theme.

<?php ;

/** Start the engine */ ;

require_once( get_template_directory() . '/lib/init.php' );

/** Child theme (do not remove) */ ;

define( 'CHILD_THEME_NAME', 'Sample Child Theme' );

define( 'CHILD_THEME_URL', 'http://www.studiopress.com/themes/genesis' );

If you add any code to the above, make sure it's below the '/lib/init.php' ); line and that there are no spaces after the last character in the file.

Don't worry about getting your hands dirty with PHP. The solution to any requirement you have of Genesis will either be in the documentation or will be sorted out in the forums. There are also a couple of Genesis plug-ins (Simple Hooks and Simple Edits) which further simplify the process. And once you start pasting in PHP you begin to understand the logic behind it.

07:21
What you need for developing websites:

09:36
You can purchase and download the Genesis theme framework here

Lots to get through here:

  • Genesis theme settings 
  • Default layout
  • Custom header and custom background – setting these in CSS
  • Choose an image logo in the header rather than dynamic text
  • Adding a background image to the theme folder
  • Saving out images from a PSD (Photoshop document)
  • Introduction to style.css
  • Introduction to developer tools for Chrome
  • Setting a background image in CSS
  • Editing code in a text editor
Phew! Important course!

11:45
Using the WordPress menu system to create the top navigation menu bar on a website. Using Genesis theme in WordPress .

Create the pages in WordPress (pretty easy, just go Pages > Add Pages!), create a primary navigation menu and drag the pages to where I want them to go in the menu.

  • CSS: font-size, font color, and web fonts!
  • Using Google webfonts.
  • Distinction between rems and pixels as size for type.

A lot in here. Important lecture!

Creating the top navigation menu

Top navigation menus (or “navbars”) used to be the bane of my existence but now, with Genesis and WordPress menus, I have developed a really easy system of creating them which takes seconds as opposed to hours.

Genesis already has in place the ability to have a Primary and Secondary Navigation Menu. For this particular example, I got rid of the Primary and Secondary Navigation Menu using the Genesis Theme Settings and added the Menu in the Header widget.

There is also the ability to change the style of the current page links, the hover links, the sub-page links and the sub-sub-page links.

With Genesis, you can easily have drop-down menus for sub-pages (or child pages) and then fly-out links for sub-sub-pages (or grandchild pages). You can have these on both the Primary and Secondary Navigation menus.

Here is my video where I add new pages to the WordPress menu so that they appear in the navigation menu as pages, child pages (as drop-downs) and grandchild pages (as flyouts).

You can choose a page to be a child or grandchild page under Parent in the page editor. And when you look at the pages (under Pages > All Pages) the child and grandchild pages are indented underneath their parent. Doing this will also give them a logical URL (for example,www.site.com/music/jazz/charlie-parker where the page “Charlie Parker” is a child of “Jazz” which is a child of “Music”).

Creating a navigation menu with drop-downs and fly-outs

To get these pages to appear in the navigation menu correctly, you just have to drag and drop them into their respective positions in Appearance > Menus. Again, child pages are indented under their parent. Don't forget to give the menu a name (like “navbar”, for example) and set it to be the primary navigation menu.

So, arranging pages in the WordPress Appearance > Menus area like this…

… will create a drop-down menu with fly-outs like this:

Please see the video above for a demonstration of this.

</p>
03:45

This is being created on the Genesis theme framework on WordPress.

I create a static home page and a separate blog page by changing the settings in Settings > Reading in WordPress.

A discussion of the difference between a static page and a blog page for the home page.

Enabling a full width page in Genesis.

12:08

This is being created on the Genesis theme framework on WordPress.

I create a some sub-pages that become drop-downs in the menu. Making sure child pages have the correct directory structure in the URL

NB. You can actually make sub-sub-pages as flyout pages from the drop down pages using exactly this method!

06:19

As we don't have a background on this site we haven't set one. But I explain how to do this anyway!

  • Explaining about hexidecimal colors
  • Explaining about padding and how to set padding on the top, on the right, on the bottom, on the right. 
  • Adding background images in CSS
  • Repeating images vertically and horizontally

06:23

Google Webfonts

Lots more CSS and explanation here!

Find and replace to change the links color in CSS

Modifying a menu item

Giving a page a different title to the main heading – usually they are the same.

11:16
Lots of really important stuff here about adding the meat of the page – the content. So, not the sidebar, not the header or the footer – the actual content!


  • Difference between paragraphs and line-breaks
  • Editing in Visual and HTML/Text editor in WordPress
  • Save for Web and devices in Photoshop. Very important! How to keep your image sizes as low as possible. 
  • Importing images to WordPress
  • SEO for images, very important as well!
  • Difference between heading tags in HTML H1 and H2
  • Unordered lists – bulleted lists

13:47

This is being created on the Genesis theme framework on WordPress.

The first time I saw WordPress widgets I thought “what on earth are these useless pieces of dog's do?” Now I think that widgets are awesome website building devices that should have pride of place in any website designer's toolbox.

What are WordPress widgets?

WordPress widgets are self contained bits of website code that can be applied to a widgetized area via an easy-to-use intuitive interface.

A fresh install of WordPress will give you some bog-standard widgets that you can drag-and-drop into your sidebar. For example:

  • Search widget adds a search box
  • Categories widget lists your blog categories
  • Recent Posts widget lists the x most recent blog posts you've written (you decide how many)

… and many more. As you are no doubt aware, the Recent Posts widget is one of the most widely used WordPress widgets!

But you can also add other amazing widgets in your sidebar by way of certain plugins. For example:

  • Latest Tweets lists your last x tweets (you decide how many)
  • Facebook Like Box shows how many people like a certain Facebook page (the fan page for the site) and which of your friends like it
  • Newsletter Signup Box enables visitors to join a mailing list

The list is endless. I use Genesis theme framework (affiliate link) which adds a lot of useful widgets. One widget can, for example, show featured or recent posts with thumbnail images.

Why should you use WordPress widgets?

Ease of use is the reason you should be using widgets. Not because it's easy for you to use; but because it's easy for your clients to use.

I always try to design websites that the client can edit because constantly updated quality content is the key to a successful website.

Of course, using WordPress as a CMS (Content Management System) is a great way to enable a client to create, edit and delete pages easily. But widgets allow another level of client interaction where they can control other, traditionally static, areas of the website such as the header, sidebar and footer. Here is an article I wrote about adding to a header widget in WordPress.

With widgets, clients can determine how many posts in which category get listed, decide on an article to be featured with thumbnail image and choose the running order in which all these elements appear. And all this is controlled within an intuitive back-end – let's face it, it doesn't get much more easy that the widget area!

How do you use WordPress widgets?

Well, as I've said, WordPress widgets are almost too easy to use that they don't bear explaining!

If you go into Appearance > Widgets on the left-hand side of the back-end you will see a large list of Available Widgets in the central area and a selection of widgetized areas on the right (for example Primary Sidebar or Header Right).

And to place a widget in a particular area – you've guessed it! – simply drag the widget from the Available Widgets area to the Primary Sidebar (or the desired area). Then you can choose the title of the widget (for example, you may like to title the Latest Posts widget “My recent articles”) and choose the various settings of the widget (for example, you can choose the number of posts or category in the Latest Posts widget).

Note: if you leave the title area in the widget blank; the element appears on the page without a heading.

So, for example, here is a screen shot of me moving a Genesis Featured Posts widget in the first of my three footer widget areas (it's just the same as if you're moving widgets into the sidebar widget area.

And here are the easy to use settings. As you can see, I set the heading to be “Latest Articles” and get it to display the 5 most recent posts with a 40 pixel square thumbnail image:

If you want to get rid of a widget, simply drag it from the widgetized area back to the Available Widgets area. If you want to take it away from the widgetized area but would like to save the settings as you may want to use it again, drag it to the Inactive Widgets area underneath and it'll sit there until you want to use them again.

How do you style WordPress widgets globally?

I use – my eternal favorites – Chrome Developer Tools and Firebug add-on for Firefox to find out what selector is used for the widgets. For example here are some styles for all the widgets on my site:

#sidebar .widget {<br>background-color: white;<br>border: 1px solid #E6E6E6;<br>margin: 0 0 15px; }

And here is the style for the widget headings:

.widget-area h4 {<br>background-color: #F8F5EE;<br>border-bottom: 1px solid #E6E6E6;<br>font-size: 16px;<br>padding: 5px 5px 5px 10px;<br>margin: 0 0 10px;<br>color: #783D00;}

Obviously the font-family of the h4 is determined elsewhere in the stylesheet.

What do you think?

Do you find widgets difficult or easy to use? Is there anything you want to be able to do with widgets that you haven't found out how to do yet? If so, I want to know.

I think widgets are a great way to add client control over website areas that have traditionally been “no go”!

02:38

This is being created on the Genesis theme framework on WordPress.

How do you style individual WordPress widgets?

But, what if you want the heading or background of one of the widgets to be different to the others? No problem! By using the Chrome Developer Tools (View > Developer > Developer Tools) or the Firebug add-on for Firefox, you can identify the div id that the widget is wrapped in.

So, for example, the Recent Posts widget on this blog is wrapped in div id="recent-posts-3". This is a completely unique identifier for this particular website element. (So if, for the sake of argument, you wanted to have a second Recent Posts widget on the same site, WordPress would give that a different id – “recent-posts-4″, for example).

So if you wanted to change the color of the heading (in this case the h4) of this particular widget you would add this to the CSS.

.widget-area #recent-posts-3 h4 {color: red;}

In the CSS code the dot represents a div class (in this case “widget-area”) and the hash represents a div id (in this case “recent-posts-3″). In this case the div class called “widget-area” comes before the div id “recent-posts-3″ because that’s the order they appear in the HTML.

What’s the difference between “class” and “id” in CSS? The id should be applied to an element that is unique whereas class can be applied to multiple elements on the same web page.

So how do you put something else in the sidebar that’s not a widget?

Simple, use Text Widgets! Maybe you want to add a message in the sidebar to alert potential clients that you are taking new projects? Simply drag a text widget over to the Sidebar and type!

Text Widgets can take HTML so you can add images, forms, JavaScript, whatever! I’ve used Text Widgets for my “Connect with me” links box (Twitter, Facebook, YouTube, etc.), sign-up form box, Adsense code, and all sorts of sidebar goodness!

What if you want different widgets appearing on certain pages?

You may think that this system of widgets is inflexible. I would say that the opposite is true – it actually adds flexibility.

You can use the Widget Logic plugin which uses WordPress conditional tags to specify which widgets go where. So you can can control the appearance (or not) of a certain widget on the home page, a single blog post, a blog post from a particular category, a particular page, etc.

Also, you can put a specific message on each page’s sidebar by using the PHP Code Widget plugin.

And, with the Genesis theme framework, you can use Simple Sidebars plugin to create multiple, dynamic widget areas, and assign those widget areas to the sidebar on a per post, per page, or per category basis.

09:22

THE HTML AND CSS IN THE DOWNLOADABLE COURSE MATERIALS IS DIFFERENT TO THE EXAMPLE IN THE VIDEO. THIS IS BECAUSE I MADE THE ICONS TOO BIG HERE AND THEY WILL BE CORRECTED IN A LATER LECTURE.

PLEASE DOWNLOAD THE DOWNLOADABLE MATERIALS BECAUSE THEY CONTAIN A PSD AND PNG OF AN IMAGE SPRITE WITH 30 X 30 PIXEL SOCIAL MEDIA ICONS (INCLUDING PINTEREST!)

Think speed!

As you will already know, Google takes loading speeds into account when ranking pages. Also, I hate waiting for sites to load. So I wanted to create these header buttons with a minimum amount of HTML, CSS and, more importantly, HTTP requests.

Here I have social media icon images and all of them have rollover states. That means there could potentially be 14 HTTP requests for images just for these little buttons. The images themselves maybe small but it's the separate requests to get the images that can severely increase page load.

So how do we cut down those image requests? Simple, by creating one big image.

Say hello to my best friend – the image sprite

Here is the image sprite I used to create the social media buttons and their hover states:

As I'm using the Genesis theme for WordPress, I enter the HTML into a text header widget.

Finally here is the list of buttons. Why don't you join me in one of these places?

  • Google+ This is the social network which has the greatest trajectory for improvement. Google rules the search engines so it's going to try to push this social network as far as it can. I write quite a lot here, contribute to discussions, arrange hangouts and post my latest blog posts
  • RSS Feed You can subscribe to all my blog posts by a feed-reader such as Google Reader
  • Subscribe Here you can subscribe to my newsletter and get a free copy of my e-book “How to Market Yourself Online”
  • Facebook This is really coming along, we're having great discussions and I post my latest posts here as well
  • Twitter Here I tweet out my latest stuff plus all the stuff I read everywhere. I can tweet up to 10 times a day!
  • LinkedIn This is my LinkedIn profile. But I love LinkedIn Groups and I have one called Niche Site Marketing
  • YouTube This contains about 50 tutorial videos about web design and internet marketing – more to come here soon!
What do you think?

Do you have social media links in your sidebar or header? How did you create them? What do you think of mine? Are they the right shape and in the best position?

09:05
As we are using the Genesis theme, we can edit the footer with the Simple Edits plugin.

More CSS to style up the footer.

08:30
The fantastic blog post will help you here: How to Make a Genesis Page Template That Uses Widgets

And also, as supplementary materials to this lecture we have the functions.php, front.php and style.css as they were at the end of the lecture video.

This is a really important video as it introduces us to using PHP in the functions.php of the child theme to change the way the theme works. You can get the site and/or any of it's pages to look and behave differently without touching the core Genesis files. (Of course you never touch the core Genesis files as they get updated). 


03:38
Supplementary materials to this lecture we have the functions.php and front.php as they were at the end of the lecture video.

Adding another widget area to the home page in order to add our Genesis Responsive Slider plugin widget in order to get started. 

05:18

(Remember this will only work if you have the Genesis theme framework).

In the last lesson we activated the Genesis Responsive Slider and then drag the Genesis – Responsive Slider widget into the Home Slider widget area. Then all you have to do is go Genesis > Slider Settings to get it to work as you want.

Bear in mind the slider pulls in the first image from the post or page it features. Create all the images the same size to avoid confusion. 

Create 3 pages

We quickly add three pages with images in the correct size. And set up the slider to display them. 

10:59
Here we mainly use CSS to get the responsive slider looking how we want it. 
05:34
Another widget on the home page, this time we add a Text Widget – which can take HTML.

Discussion of usage of h1, h2, h3 and h4 headings and SEO

More CSS to style them up. 

17:58

THE CSS OF THE MEDIA QUERIES IS AVAILABLE AS A DOWNLOADABLE COURSE MATERIAL ON THIS LECTURE.

This is a really essential lecture because it explains everything about how to create a responsive design.

More and more of our online experience is being accessed by handheld devices.

Many of us have been stuck with a website of maybe 900 to 1000 pixels wide which smaller devices would reduce in size. The mobile users would have to constantly zoom in and out to access various parts of the site (read: navigate away from the site never to return!)

Should your website be responsive?

In a word, yes. A web design should respond to a visitor's needs rather than the other way round.

I know of no other single website tweak that I've made in the last 6 years that has meant over 100 more visitors daily, but this is what happened after I installed Genesis.

Is your website responsive to handheld devices?

The simplest way to test a website against different sized screens is to simply re-size your browser's window and see what happens. Go ahead and narrow the browser window on this website and see the design respond to the width of the browser.

Have a look at this great free tool to test your website's responsiveness. Yes, “responsiveness” is a word, just not a very nice one.

One of the best responsive websites, in my opinion, is Chris Coyier's CSS-tricks.com, here it is on that tool:

And here is my website tested with the tool:

If you're seeing any horizontal scroll bars with your site, you might start thinking about responsive design.

How to make your website responsive – generally, this isn't specific to this Udemy course!

Well, simply install a theme by Genesis and tweaked accordingly. I like the Eleven40 theme which has a much wider design on the monitors that can handle it of, guess, 1140 pixels!

However, there are a couple of changes necessary to make a website responsive. This isn't the only way of doing it but it is the best and simplest I've come across.

First of all you need to add this to the head to stop the iPhone from scaling the whole website to fit it's screen.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

I show this is added in the functions.php so that it comes out in the head of every page source.

Other than that it's a question of adding media queries to your CSS to adapt your website to different sizes of browser window.

CSS media queries

In CSS you need to change the styles of different elements as they adapt to different widths. This is, strictly speaking, “adaptive design” but I think people are more comfortable with the term “responsive design” so that is what I'm using to describe this process.

This website is 1152 pixels wide when viewed on a large monitor. If the site is viewed on a device narrower than 1152 pixels the design would be inappropriate. Let's pretend the first media query we add is for 960px.

The whole website is sitting within a containing div called #wrap.

#wrap { width : 960px; margin: 0 auto; }

This #wrap div, along with many other elements, is set to change as soon as the browser window narrows to less than 960 pixels wide by this media query:

@media only screen and (max-width: 960px) { #wrap { width: 100%; margin: 0; } }

So now the website will squeeze or stretch to fix the width of the browser if it is less than 960 pixels wide.

Images and video

With responsive sites everything has to respond. Getting the images to size to the window is easy, put this in the main CSS:

img { height: auto; max-width: 100%; }

And for the videos, I used a WordPress plugin called FitVids.

Also there are great article here about responsive web design and media queries by Chris Spooner.
Section 3: Uploading the Site to the Host Server, More Development and Going Live!
03:28
The cheapest company to register a domain name is GoDaddy. And I host this site with a fantastic host from the UK called Vidahost.

  • In this lecture we change the NameServers on the domain name registrar. 
  • See up a new account on WHM
  • Set up a new website!

03:22

WordPress is the most common CMS on the internet and with great popularity comes increased risk of attack. Installing WordPress manually is much safer than using a script like Fantastico!

Many one-click WordPress installs include hundreds of unnecessary themes and plugins increasing the likelihood for vulnerability. For example, a certain host provider's one-click install included the Tim Thumb vulnerability which led to thousands of WordPress blogs being hacked.

I know what you're thinking: I don't want to spend all that time manually installing WordPress when I can do it in a few seconds.

Well, as you can see from another video of a WordPress manual install, it literally only takes a few minutes. And, it has the added advantage of increasing your knowledge of WordPress.

Side note: WordPress set ups that have been manually installed can still be updated with the auto-updater inside WordPress as usual.

How To Install WordPress Manually

The best way to learn how to install WordPress manually is to consults the Codex – either the 5 minute install version or the more detailed instructions. As always, this process looks more complicated than it actually is.

You can also see in my video how to install WordPress using cPanel.

All you have to do is:

  • Download WordPress
  • Create a MySQL database and user and add the database to the user
  • Copy down the database name, username and password
  • Edit the wp-config-sample.php file in the /wordpress/ folder you have downloaded filling in the above database name, username and password
  • Save wp-config-sample.php with these new edits as wp-config.php
  • Run the install – which will be at http://yoursite.com/wp-admin/install.php
  • That's it!
Creating a MySQL database

WordPress “communicates” with the MySQL database to extract data and display it through web pages. However, most WordPress users will have no direct involvement with the database.

How you create a MySQL database depends on your host. Popular hosts like Hostgator use cPanel and I show you in the video how to create the MySQL user and database and connect them together through the cPanel.

Editing the wp-config.php

When editing the wp-config.php file you must remember to open the file in a plain text editor like TextEdit (Mac) or Notepad (Windows). Do not use a word processing package like Word to edit PHP files (or other web files such as HTML, CSS, ASP, for that matter).

If you are using TextEdit on a Mac go Cmd-Shift-T to toggle between plain text and rich text editing. The plain text interface doesn't have any formatting icons.

Trouble shooting – what to do if WordPress can't find the database

You may need to contact your host to get the correct name for the entries needed in the wp-config.php. It's possible that some prefix to the name is needed.

What do you think?

I'm looking forward to your comments as always.

06:09

Uploading the local site to a host

I’ve been doing everything locally so far and I have the site more-or-less how I want it so it’s time to put it on the client’s host.

Here is another video on I export the WordPress and Genesis settings, copy all the files to the host’s server, set up WordPress there and finally import the WordPress and Genesis settings.

There are other ways of doing this – by exporting and importing the MySQL database, for example – but this method works for me.

Basically, you have a WordPress install locally and a WordPress install remotely, you just copy the files and export and import both the WordPress and Genesis settings. 

18:12
It may take you a few weeks to develop a new WordPress site. In the meantime it's great to put up an Under Construction page so that you and your client can prepare the site for launch in private while logged in.

To do an Under Construction page you need the Under Constuction plugin.

Lots of tweaks to do (and this is always the case with new sites). 

  • Sorting out the easing and transitions on the image hovers
  • Sorting out the h2's – h2 are used as general subheadings but also the headings of all 10 post on the blog archive pages.
  • Amending your WordPress profile to get rid of the black bar at the top and how to keep you login name secret and from being displayed on the blog as the author of the blog posts.
  • Re-doing the social media icons to be half the size they were. So that each are 30 x 30 pixels now. 


11:23
The code in functions.php and front.php is added as Supplementary Material to this lecture.

This is being created on the Genesis theme framework on WordPress.

Same as adding the Genesis Responsive Slider as well as the titles on the home page. Here we add three Featured Posts widgets. 

First thing we do is create a new featured image size which we can add to the functions.php

If you want to create a different size of feature image (other than the defaults of 150 pixels square and 300 pixels by 235 pixels) you can by adding the following to the functions.php of your child theme:

/** Add new image sizes */
add_image_size( 'home-featured', 367, 210, TRUE );

The above creates a featured image of 367 pixels wide by 210 pixels high of every image added to posts from now on. The featured image has the name in the widgets of “home-featured”. We’ll be coming on to widgets later.

Set up your widget areas

OK. What on earth are widgets? Widgets are user-friendly ways of adding content to various parts of a WordPress website. The usual area where people use widgets is the sidebar but I’m increasingly using widgets in other areas of a WordPress site as their usage is easy to explain to clients.

So, in order to create our three widgets with featured images, headlines and excerpts on the home page, we first need to create three widget areas. And we do that by adding the following code in the functions.php.

/** Register widget areas */

genesis_register_sidebar( array(
'id' => 'home-left',
'name' => __( 'Home Left', 'crea8ive' ),
'description' => __( 'This is the left section of the homepage.', 'crea8ive' ),
) );

genesis_register_sidebar( array(
'id' => 'home-middle',
'name' => __( 'Home Middle', 'crea8ive' ),
'description' => __( 'This is the middle section of the homepage.', 'crea8ive' ),
) );

genesis_register_sidebar( array(
'id' => 'home-right',
'name' => __( 'Home Right', 'crea8ive' ),
'description' => __( 'This is the right section of the homepage.', 'crea8ive' ),
) );

The above code creates three (at the moment empty) widget areas that will be visible on the right hand side if you go into Appearance > Widgets in the WordPress backend, see below:

Exactly the same, otherwise. Create three new widget areas. And allow them to be displayed on our home page template. 


Displaying widgets on custom page templates

I have to say at this point that I owe a huge debt of gratitude to Lee Hodson and his amazing article How to Make a Genesis Page Template That Uses Widgets.

In order to create a custom home page we created a text file called front.php and added it to our child theme folder.

And inside this text file we now have the following:

Template Name: Front

*/ ?> 

add_action( 'genesis_meta', 'cre8tive_front_genesis_meta' );


function cre8tive_front_genesis_meta() {

        if ( is_active_sidebar( 'home-title' ) ) {

                remove_action( 'genesis_loop', 'genesis_do_loop' );

                add_action( 'genesis_loop', 'cre8tive_home_slider' );

                add_action( 'genesis_loop', 'cre8tive_home_title' );

                add_action( 'genesis_loop', 'cre8tive_home_left' );

                add_action( 'genesis_loop', 'cre8tive_home_middle' );

                add_action( 'genesis_loop', 'cre8tive_home_right' );

                add_filter( 'body_class', 'add_body_class' );

                function add_body_class( $classes ) {

                        $classes[] = 'cre8tive-front';

                        return $classes;

                }

        }

}

function cre8tive_home_slider() {

        if ( is_active_sidebar( 'home-slider' ) ) {

                genesis_widget_area( 'home-slider', array(

                        'before' => '

',

                ) );

        }

}

function cre8tive_home_title() {

        if ( is_active_sidebar( 'home-title' ) ) {

                genesis_widget_area( 'home-title', array(

                        'before' => '

',

                ) );

        }

}

function cre8tive_home_left() {

        if ( is_active_sidebar( 'home-left' ) ) {

                genesis_widget_area( 'home-left', array(

                        'before' => '

',

                ) );

        }

}

function cre8tive_home_middle() {

        if ( is_active_sidebar( 'home-middle' ) ) {

                genesis_widget_area( 'home-middle', array(

                        'before' => '

',

                ) );

        }

}

function cre8tive_home_right() {

        if ( is_active_sidebar( 'home-right' ) ) {

                genesis_widget_area( 'home-right', array(

                        'before' => '

',

                ) );

        }

}

genesis();


We then add 3 more posts to the blog with an image in them. 

We then add the Featured Post widget in the three new widget areas we put on the home page.

Adding the widgets

Lastly, you actually add content to the widgets via the Appearance > Widgets section in the WordPress backend.

You can drag what you want into these widget areas – menus, tag clouds, category listing, a calendar, a search bar, whatever. However, here we are using the Genesis Featured Posts widget that comes with Genesis.

And...

The above are the settings I used to get the three widgets areas to each display a featured image (in our custom size), headline and excerpt.

The only difference between the three Genesis Featured Posts widget settings was in the “Number of Posts to Offset:” field, circled above. Here I entered 0 in the first, 1 in the second and 2 in the third, ensuring we get a different post each time.

Also circled above is our “home-featured (367×210)” custom featured image size which we specified in the functions.php.

This is dynamic, it will change overtime you make a new post.  

09:21
Using more CSS to get the 3 Feature Posts widgets on the home page to look like they do on the Photoshop design.

And using Media Queries to make sure they look OK on different devices. 

07:07

This is being created on the Genesis theme framework on WordPress.

Genesis theme settings > Content Archives to get the blog to show excerpts rather than the full post.

And choosing Numeric for Post Navigation Technique.

Edit the Post Info and the Post Meta by using the Genesis Simple Edits plugin. 

05:28
This basically shows you how the very excellent Contact Form 7 plugin works. 
Creating an Email Subscription List & Sidebar Sign-up Form
14:57
06:28

THE TEXT THAT YOU ENTER TO THE HEAD OF YOUR WEBSITES TO CREATE ALL FOUR SIZES OF FAVICONS IS ATTACHED TO THIS LECTURE AS A DOWNLOADABLE MATERIAL

The “halo effect”, as I mentioned in an article about why I'd never use cheap website builders, suggests the way we look, dress, speak and the sort of homes we live in influence other people's impressions of us.

This is why, when you're designing a website for yourself or a client, you should take care on all the little details – including the favicon!

What is a favicon?

A favicon (or favorite icon), also known as a shortcut icon, is an image file containing a small icon associated with a particular website. Below are a few you may recognise:

And look at that one at the end there! Ugly isn't it? You don't want to be the owner of that website. So read on …

Create your favicon in Photoshop or in any other image editor

Although there are free favicons you can download in the web, it's always best to have an original favicon for your site. It's good to design the logo of a site with the favicon in mind because you need to isolate an element from the logo that is square.

I have an extra symbol on my logo which I use for the favicon for my site at RobCubbon.com :

This is a 16 x 16 pixel square document in Photoshop:

Now, save the image that will become the favicon as a GIF or a PNG-8 or a PNG-24. The important thing is that it has a transparent background. Once saved as a “favicon.png” amend the file name to “favicon.ico” – even though it isn't technically an ICO file.

However, if you want to create a real ICO file direct from Photoshop you need to download this ICO file format plugin for Photoshop or you can use an online favicon generator. But I find it works fine appending the file extension from GIF or PNG to ICO – however I believe this may not work with some really old versions of Internet Explorer.

Once you have created the “favicon.ico” you need to upload it to the root of the server – where your index.html or index.php, or, if you're using WordPress, this is where all the “wp-” files and folders are.

Even if, in the next step, you specify your favicon.ico to be in another directory I would still advise you to also put it in the site root. This is because social sites, like Google+, when your posts are shared, will just look for a favicon.ico on the root and will put up an ugly default one if they can't find yours.

HTML to get the browser to recognize your Favicon

In order to get your favicon to appear in the browser, you have to put the following in the <head> section of every page of your website.

<link rel="shortcut icon" href="http://www.crea8ivedesigns.com/favicon.ico" />

<link rel="apple-touch-icon-precomposed" href="http://www.crea8ivedesigns.com/apple-touch-icon.png" />

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.crea8ivedesigns.com/apple-touch-icon-72x72.png" />

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.crea8ivedesigns.com/apple-touch-icon-114x114.png" />

If you are using WordPress you can put the above in the header.php file between the <head> and the </head> tags. Some themes, like Genesis, for example, already have a favicon. It's located in the wp-content/themes/child theme name/ folder. You should overwrite this file with your new favicon.ico as well as putting it on the root of the server.

My favicon's not updating! What do I do?

Once you've changed your favicon it often stubbornly refuses to show and the browser uses the old cached version instead, even after refreshes. If this happens simply paste your favicon's address in the browser (eg.http://robcubbon.com/favicon.ico) and then hit refresh. After this the favicon should show up correctly.

</p></p>

Section 4: Conclusion
02:16

Please let me know if you have any questions about this course. I'd be happy for absolutely any feedback.

After you've designed a website, in some ways that's the easy bit – now comes the hard bit – you have to get traffic and get people contacting you from the website or buying products. 

I'm going to be doing a new course about that soon were I'll be talking about how to use Google Webmaster Tools, sitemaps, on page SEO, Google Analytics, etc., to make your site more visible to the search engines. And I'll be talking in real detail about how you can use blogging, social media and online relationships to grow your website and your business.


Section 5: Extras!
15:04

Calls to move to HTML5 are increasingly hard to ignore. And, if you’re on the Studiopress platform, their recent upgrade to Genesis 2.0 provides a compelling motive to make the switch.

Benefits of HTML5

First let’s run through all the usual advantages to upgrade to the most recent version of the language that marks up web pages:

  • is more future proof
  • has several improvements in usability and user experience,
  • it was build around web apps and has features like offline storage and geo-positioning
  • better for mobile devices, because of the previous point
  • has better support for audio and video embedding
  • provides cleaner more semantic markup

… and it’s the last point above that’s a real biggie. More later. However, now we’re on the subject we might as well list the drawbacks…

Disadvantages of HTML5

Not all web browsers offer full support for HTML5. Our old friend, Internet Explorer, is unfortunately the main culprit. Add the following code to the of all your HTML5 pages to ensure they display properly on the browser all developers love to hate:

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
Let’s talk semantics

Semantic markup means using special HTML tags to describe the kind of content they contain.

So, whereas the old HTML4 tags may have been div id="thingy"; the new HTML5 semantic tags of

,
09:08

http://robcubbon.com/cre14 <<<--- click here to get my Build Your Brand course for $14 – how to market yourself properly with blogging, SEO, social media and business relationships.

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