Website Development and Designing: (2

days)
Web Design – A Closer Look

Web designers must always start by considering a customer's website

objectives and then proceed to an Information Architecture (IA) to specify a
site's data hierarchy and help guide the design procedure. Next, web
designers can begin creating wireframes and eventually move to the design
phase. Web designers can use several fundamental design principles to
achieve an aesthetically pleasing design that also offers exceptional user
experience.

Design Principles

● Balance​ -- It is important for web designers to make a balanced

design. In web design we refer to heavy (big and dark colours ) and
mild (small and lighter colours ) elements. Using the right proportion
of each is crucial to achieving a balanced site design.

● Contrast​ -- In color theory, contrasting colours are ones placed

opposite one another on the colour wheel (see also complementary
colours ). Web design provides some other areas where comparison
is applicable. Designers look at contrasting sizes, shapes and
textures to define and draw attention to specific sections of the site.

● Emphasis​ -- We touched on this a bit when talking contrast.

Emphasis is a layout principles based in the intentional"highlighting"
of certain significant elements of the site layout. It's important to
remember that in the event that you highlight everything on the page
you wind up emphasizing nothing. Imagine a page in a publication
where 80 percent of the content is highlighted in yellow...does
 anything actually stick out? This is the time to have a look at that
Information Architecture for leadership.

● Consistency​ -- Also referred to as repetition or rhythm, consistency

is a crucial web design principle. By way of instance, consistent and
clean navigation offers the best user experience for your site visitors.

● Unity​ -- Unity is the connection between the various areas of the site
design and the composition as a whole. Based from the Gestalt
theory, unity deals with how the human mind visually organizes
information by grouping components into categories.
Web Development – A Closer Look

Web developers, sometimes referred to as developers, take the layout

created and construct a fully functioning web site. To put it (really ) just,
consider the layout as a non-interactive"image" of a web site. Programmers
take that design and split it up into it's components. They then either use
only HTML or a more lively approach incorporating programming
languages like PHP to develop the many website pages. More advanced
web developers may opt to use a Content Management System (CMS)
such as WordPress or Joomla so as to streamline development and permit
clients a simple way to keep and update their site.

Web developers may convert a static design into a dynamic website with
content and image sliders, active countries for buttons and links, and other
interactive components.

A. Page Creation​.

Developing a WordPress page is extremely much like creating a post. Just

bear in mind that pages are designed for static content.
1. To begin adding a new page to your WordPress site, locate the Pages
menu at the WordPress Dashboard Navigation menu.

The WordPress page editor appears nearly identical to the article editor,
except for a couple of unique boxes situated on the right side of the display.

2. Add the name of the page, like About. Note: If you've pretty permalinks
set up, the name of your page are also the URL slug.

3. Then add some content.

4. The Publish section of the webpage editor is precisely the same as for
composing posts. When you are ready to print, you can either print
instantly, save a draft, or program the page to be printed later.

5. The Page Attributes section applies a parent page and template for your
new page. By way of instance, you could create this new page with
additional pages beneath it. There are no limitations to how many levels
you can nest webpages.

6. Some WordPress themes have custom page templates, so another

Template section permits you to use a template to your new page.

7. The Order box permits you to order your webpage numerically.

8. Preview the page one final time, then click on Publish. You have added a
new page to your WordPress website.

b). Menu Setup

WordPress: How To Setup Menus And Navigation

Create a New Menu

Select"create a new menu" at the peak of the page.

1. Click on the Create Menu button.

2. Insert Groups To The Menu

Now it is time to add our classes to the menu which we just created.

1. In this tab, pick the"View All" links to bring up a listing of all of the
categories.

2. Pick the categories that you would like to add by clicking on the check
box next to each category that you would like to add in the menu.

3. The first thing you are likely to notice when you add the classes into
the menu is the structure (categories / subcategories) gets lost.
Everything is about the same level!

No worries... There is a simple solution.

1. You will want to'drag' every subcategory to the right until you find the
dashed line transfer in.

Drag-and-drop describes manipulating objects on a computer using the

mouse.

1. Move the mouse pointer until it's directly over the item you wish to
manipulate.

3. With the mouse button held down, move the mouse to where you wish to
drop the item.
4. Drop the thing by allowing up on the left mouse button.

Establish The Menu Location

If your theme supports custom menus (the BlogPress default theme does),
this measure is required to really make the menu visible on your site. There
are just two places within the Menu page where you are able to set the
menu place.

(This tab won't be visible till you've created at least one menu.)

You may see how many customized menus your motif supports. (Most
topics will have 1-2 menu places to select from.)

From the drop down box, pick the custom menu that you would like to
display in this place. (For our example select"Category Menu" from the left
sidebar place.)

The next place to place the menu location is inside the menu editor .

From the area titled"Theme places", click on the check box for the place
where you want your menu to appear.

Click"Save Menu" once you have made your selection.

NOTE: Menu places will vary by subject, so in case you change topics, you
might need to reactivate or transfer your menu to another site.

You can now refresh your live website to find the menu which we just
created. The top categories will be shown, and then once you put your
mouse over the class, the subcategories will become visible. This is the
standard behavior for most themes.
C).Theme Installation and customization.

Based on the theme you are using to your WordPress site you will find
various set of changes you can make to your website from within your
admin panel. This tutorial describes how to do some of these changes to
your website using the Customization page. For the purpose of this tutorial
we'll utilize the Seventeen theme.

How to Get the WordPress Customization Page

To begin customizing your own WordPress theme, go to Appearance ->
Themes page.

On this page, find the active theme (Twenty Seventeen in our case) and
click on the Customize button beside its title.

On the left you'll find a listing of the available options and on the right a live
preview of your website and how those changes will affect it.

The theme customization page lets you modify your site's name and tagline
and find out how it will appear on your actual site instantly. To do so,
expand the Website Identity set of settings and change the text. As soon as
you're delighted with the outcome, simply click on the large Save & Publish
button.

Added WordPress Theme Customizations

Based on the theme you are using there may be additional choices in that
page. By way of instance, the Seventeen theme lets you modify header
picture, color scheme, add extra css and more. As soon as you're delighted
with the outcome, simply click on the Save & Publish button to save the
changes.
c). Understanding of Plugins and use

Which Are WordPress Plugins?

WordPress plugins are programs that permit you to add new features and
functionality to your WordPress site. Precisely the same way as programs
do to your smartphone.

There are over 48,000 free plugins available at this time on the
WordPress.org plugin directory. Thousands more are accessible third party
sites like Github.

In addition to that, there are also thousands of top WordPress plugins

which are available by individual developers and companies like ourselves.

In 2003, WordPress began as a simple tool that will assist you begin a
blog. Through time, it has developed into a powerful content management
system and program framework, thanks mostly to plugins.

What can Wordpress Plugins Do?

WordPress plugins are little software apps that incorporate and operate on
top of the WordPress software. This permits you to create just about any
type of website with WordPress (not just blogs).

For Example:-

1. Build a company directory using the best directory plugins for

WordPress
 2. Begin a coupon site like Reta in MeNot

3. Build your photography site using the Envira Gallery Plugin

4. Start your own podcast site using WordPress.

5. There's a popular expression in the WordPress community,"There's a

plugin for this".
6. Create a Wiki website using the Knowledge base plugin
7. Start your own podcast website using WordPress.

Regardless of what you're trying to do on your WordPress site, it is

possible. If the feature isn't available in default WordPress, then there's
surely a plugin available for this.

You will find WordPress plugins to enhance SEO, boost performance, add
contact forms, social networking buttons, create galleries, and much more.

Plugins can be little and provide only one tiny little feature (such as adding
a picture to sidebar).

Or they may also be quite big and act as their own platform too (Example:
WordPress eCommerce plugins or WordPress membership plugins).

More feature rich plugins may have their very own addon plugins to expand
them exactly like you'd extend WordPress.

How WordPress Plugins Work?

The WordPress plugin API delivers a robust set of filters and pins that allow
developers to modify existing WordPress performance or add new
functionality.
Plugins can use WordPress content types, taxonomies, and custom fields
which allow users to store various kinds of content not just pages and post.

You can activate and deactivate them anytime you desire.

Upon each visit, WordPress links to the database, loads the core
applications, then loads your active plugins.

How to Locate WordPress Plugins and Install Them?

You can discover free WordPress plugins by visiting WordPress.org plugin

director you might also see them directly in the WordPress admin area.

Simply head over to Plugins" Insert New page and search by typing plugin
name or operation that you wish to add.

WordPress will look for the plugin directory and display the available
plugins in a listing. You want to examine the results, and click on the install
now button next to the plugin that you want to install.

However, search results within the WordPress admin area aren't always
helpful since they're confined to free plugins only. Most beginners find it
difficult to choose which plugin is most appropriate for the job.

Another strategy is to search for plugin tutorials and recommendations on

websites like WPBeginner.com. We've got a WordPress plugins section
where you will get the best WordPress plugins that we've thoroughly
reviewed and tested.

You can even locate WordPress plugins in our editor's selection of the best
WordPress plugins for company sites or checkout the plugins we're using
on our site from the WP Beginner's Blueprint.
More FAQs About WordPress Plugins

I can't see or install plugins in my WordPress blog?

Most probably you're using WordPress.com. You may just set up

WordPress plugins on self-hosted WordPress.org sites. See our guide on
the distinction between self hosted WordPress.org vs free WordPress.com
blog.

How many WordPress plugins are too many?

It's NEVER too many plugins which are slowing down your website. It's
always poorly coded plugins which degrade performance. For information
see our guide how many WordPress plugins should you install? .

Should I install plugins not analyzed with my WordPress version?

Occasionally authors of free plugins don't update their plugin files on every
new WordPress release. Just because if it works, then they do not feel the
need to upgrade it. For more on this subject, see our article on installing
plugins not tested with your WordPress variant.

How to choose between free vs paid plugins?

There are thousands of free plugins and there's an excellent likelihood you
may get a free plugin offering the exact same performance as a paid
plugin. If it works great for you, then use it.

Please bear in mind that free plugins are offered as they are, with no
guarantees, and no guarantee of support. Plugin author can quit working
on a plugin at anytime they want.
If you feel you'll be needing a great deal of support, and you would like
regular updates, then paid plugins do a far better job at it.

We use a mix of both paid and free plugins on all our sites.

How do I get support for free WordPress plugins?

Free WordPress plugins can be obtained with no guarantee of support. But

most good plugins provide limited free service for their plugins via the
official WordPress support forums.

e). Widgets customization

How to Create a Custom WordPress Widget?

Do you wish to make your own custom widgets in WordPress? Widgets

permit you to drag and drop elements into any widget or sidebar ready area
of your site. In this guide, we'll show you how you can easily create a
custom WordPress widget.

What's a WordPress Widget?

WordPress widgets contain pieces of code which you can enhance your
site's sidebars or widget ready places. Think of these as modules which
you can use to include unique elements using a simple drag and drop
interface.

By default, WordPress has a standard set of widgets which you can use
with any WordPress theme.

Many WordPress plugins and themes include their own custom widgets
which you can enhance your sidebars.
Having said this, let us see how to easily make your own custom widgets in
WordPress.

Before we begin, it would be best if you make a site-specific plugin where

you'll be pasting the widget code from this tutorial.

You can even paste the code into your theme's functions.php file. However,
it will only be available when that specific theme is active.

In this tutorial, we'll create a very simple widget which just greets visitors.
Have a look at this code and paste it on your own site-specific plugin to
view it in action.

After adding the code you will need to head over to Look" Widgets page.
You will discover the new WPBeginner Widget from the list of available
widgets. You want to drag and drop this widget into a sidebar.

You can now see your site to view it in action.

Now let us study the code .

Currently there are some things which you may want to ask. By way of
instance, what is the purpose wpb_text_domain?

Widget management in the WordPress Theme Customizer

1. Navigate to the WordPress Theme Customizer.

WordPress uses gettext to manage translation and localization. This
wpb_text_domain and __e tells gettext to produce a series available for
translation. See how you can find translation prepared WordPress themes.

If you're creating a custom widget to your theme, then you may substitute
wpb_text_domain with your theme's text domain.
Widget direction in the WordPress Theme Customizer
1.

Navigate to Look → Customize and you will see a preview of your website
on the right side of the screen and a menu of customization choices on the
left.

You may already be knowledgeable about Theme Customizer. As of

WordPress 3.4, it's been a part of the WordPress Core, assisting you to
modify your site's look with a WYSIWYG user interface.

What is changed, however, are the widget places inside the customization
menu. Let us learn how to work with these widget locations.

2. Find the widget area that you want to modify.

Based upon your theme, you need to have at least one widget place on
your Theme Customizer. Some topics will have a few -- one for all the
theme's enrolled widgets.

Did you know that Surf Office, Postmatic, Yeah Dave, and more than
700,000 small businesses run their sites with Make, our complimentary
WordPress page builder. Discover the Make page builder today.

Click on the widget place that you need to modify, and you'll find a listing of
the active widgets in your subject. Now, you can edit the content of widgets
the exact same way you would from the old WordPress widget editor. The
difference is that the right side of your screen gives a real time preview of
the changes you make!
If you know your theme has multiple widget places and a number of them
do not look in Widget Management, it is probably because not all your
widget places are active on the webpage you are previewing in Theme
Customizer. By navigating to another page within the live preview -- a web
page where the other widget places are busy -- you need to see those
widget places look in Widget Management.

3. Insert and preview widgets.

To add a new widget, click on the"+ Add a Widget" button under your list of
widgets that are active. Now all your widgets, inactive and active, will seem
to the right of the primary Theme Customizer area.

You don't need to drag widgets inside the Theme Customizer. Widget
Management one-ups the widget editor by permitting you to click on a
widget to make it look in the widget area you are modifying.

Any widgets you add will appear below each the active widgets on your
widget area.

As an alternative, you can click"Reorder" in the bottom of the widget region

and use the arrows to move widgets up or down based on your preference.
The icon to the left of the arrows may also allow you to move a widget into
a completely different widget area (if applicable).

Whether you use these tools to reorder your widgets or adhere to

drag-and-drop is your decision. Experienced WordPress users may find the
latter method more comfortable.

4.
Added or removed the widgets you require? Previewed all of your
modifications?

Be careful once you reach this step. If you are used to the widget editor, it's
easy to forget that the ideal side of your screen is a trailer rather than your
live site. Navigating off before clicking"Save & Publish" could mean losing
all your changes!

As far as we are concerned, Widget Management brings a valuable new

feature to WordPress. Knowing how widget content will look before
publishing it is going to enhance your editorial workflow, eliminate concerns
about publishing the incorrect content, and help you focus on creative
tasks. Keep using it if you want.

e)​.​Website Backup Planning.

How To Create a Website Backup Strategy

Why Are Backups So Important

Put simply, a fantastic set of backups can save your site when everything
else has gone wrong. If a malicious attacker decides they need to wipe all
of your site files, or if your web server has a catastrophic hard disk failure,
all of the damage can be easily reversed by restoring from your own
backups. The concept is simple. To be able to be certain our information is
secure, you create a copy of it. If something happens to the first copy you
can always use your backup copy.
Simple right? Unfortunately, it is not that easy at all and there are a variety
of factors that decide whether your copies will be useful, practical, and
secure.
Worse than having no copy?
Working with client websites, I frequently see copies of their website being
saved in the public directory (public_html, http-docs). In my view, these
copies are actually worse than having no copies in any way.

One of the things we worry here in Sucuri is the need to maintain all of the
software on your website current and fully patched (even if you're behind a
site application firewall with virtual patching, such as CloudProxy). Backups
stored online server are a enormous potential security risk since they
frequently contain old unpatched applications with vulnerabilities, and
because of their publicly-accessible location, everyone can exploit them!

If some copies are worse than having no copies in any way, what's the
suitable backup strategy?

Your copies should be stored offsite and not on the exact same server as
your site. Storing backups online server is a really bad idea because it's so
easy for the backup files to be destroyed or infected with malware. If your
web server hard disk fails, it is easy to lose all your info, live website, and
the copies.

When it comes to easy off-site copies you will find a high number of
options. Needless to say, there's the Sucuri backup service that existing
customers are able to take advantage of, but there are also a multitude of
WordPress and Joomla backup plugins which work in combination with the
significant cloud providers like Dropbox and Amazon.

Another essential characteristic of any backup system is that it ought to be

completely automated. If you can not automate the backups then you can
not guarantee the backups will get made. It is all too easy for people to
forget or get lazy when it comes to making copies, especially when your
website is fine and functioning well. If you have to, be sure that you
schedule a time to do it frequently.

Even so -- you can not guarantee that something won't ever go wrong, and
while Sucuri specializes in cleaning malware from site databases and files,
occasionally malware can be harmful, either composing over required
custom documents or only deleting them entirely. In situations such as this,
it may impossible to restore the files unless an up-to-date backup is
available.

Schofield's Second Law of Computing says that data does not exist unless
there are at least two copies of it. This means your backup strategy must
add redundancy, or in other words, backups of your backups. I know that
might seem like a hassle or on the top but if you are not 100% sure the
information will be there when you need it, what is the purpose of earning
copies in the first place?

Our clients can use the Sucuri website backup support, which is built with
redundancy in mind -- using RAID 1 with copies duplicated in numerous
locations.

The last task in establishing a secure and reliable backup method is to test
to be certain that the backup and restore really works. Begin with an empty
directory and make sure you are able to use those copies to get all your
data back along with the site back online (using a test domain name of
course) using only the files in the backup. You may be amazed how many
times people do not test their backups... only to discover at a time of need
that their backups do not really work and are unworthy.