UNIT V

PROJECT CASE STUDY

Using HTML, CSS, JS or using
Opensource CMS like Wordpress, design
and develop a Website having Aesthetics,
Advanced and Minimal UI Transitions
based on the project - Host and manage
the project live in any public hosting
 Opensource CMS like Wordpress
• A content management system is software that
allows users without programming knowledge to
create, edit, and publish web content, such as text
or multimedia elements, collectively via a graphical
user interface.
• Three central application types :
• The common division is
– Between Web Content Management,
– Blog Publishing/News, And
– Social Publishing/Communities.
• Web content management
– With classic web content management, the main emphasis
is on creating and managing online content.
– It’s usually necessary that multiple editors can have
access to the backend, which in turn requires complex
sharing methods.
– It’s important that the system provides optimized
processing for a website with multimedia content.
– Other important factors include the management of user
rights, full text search capabilities, an efficient news
management system, and the ability to present necessary
content in more than one language.
• Blog publishing/news
– This type of application, as the name suggests, is mainly
focused on blogging. Preparation of content, complex
links, and sensible categorization, as well as the ability to
link to social media platforms and other web 2.0 functions,
are particularly important.
– The abilities to interact with the reader and control the
timing of publication entries can also be important
features to consider. Quickly and easily creating content is
equally, if not more important – ideally also being able to
do so directly onto a mobile device.
• Social publishing/communities
– Developing online communities and making them available
to a larger audience requires a much larger range of
functions than by a simple blog.
– This is mostly because online communities target active
user groups instead of passive readers.
– Ideally, content is created not only by the site’s operator,
but by the members as well (user-generated content).
– The basic system of social publishing solutions is usually
modular in design and can be extended by certain web 2.0
functions if necessary.
• Proprietary software vs. open source
– open source
• Numerous content management solutions by major project
communities are available open source.
• These are referred to as open source software. With open
source CMS, the system and the program code are freely
accessible, and the source code can, in principle, be viewed
by anyone.
• Users are allowed to make changes, improvements, and
extensions, and to adapt the CMS to individual
requirements.
– The opposite of open source software is proprietary software.
• Here, the CMS is developed by a particular company and
distributed as a commercial project.
• The use of proprietary management systems is usually
associated with the acquisition of a paid license. The source
code is not available to users.
Market coverage of different content
management systems:
CMS Market coverage
WordPress 64,2 %
Shopify 5,2 %
Joomla! 3,5 %
Squarespace 2,5 %
Drupal 2,4 %
Wix 2,4 %
Bitrix 1,7 %
Blogger 1,6 %
Magento 1,2 %
OpenCart 1,0 %
PrestaShop 0,8 %
TYPO3 0,5 %
Weebly 0,5 %
Adobe Dreamweaver 0,4 %
Bigcommerce 0,4 %
• The open source systems
like WordPress, TYPO3, Joomla!, Drupal, Contao, and
Neos are currently the most popular standard solutions for
professional website operation.
• Web hosting with a personal consultant
– Fast and scalable, including a free domain for the first year
and email address, trust web hosting from IONOS!
• Domain
• Wildcard SSL
• 24/7 support
 WordPress
• WordPress is the most-used open source CMS worldwide.
• Originally conceived as a blog system, several extensions are
now available for the basic installation, making it possible to
upgrade the software to a fully functional content management
system.
• its low-effort, basic installation, WordPress is good for small
and simply structured websites.
• Especially for bloggers, who want to provide their visitors with
frequently changing content in attractive layouts, WordPress is
an effective CMS with an intuitive web interface.
• As the complexity of the online project increases, though, the
user-friendliness of the software significantly decreases.
• Facts
– More than 58,000 extensions and a huge range of free
design templates
– “Five-minute installation” via Wizard
– Search engine friendly URLs
– Publishing and management tools for mobile solutions
• System requirements for WordPress 5.6
– Webserver: Every server with PHP and MySQL/MariaDB
support (recommended: Apache or NGINX)
– Middleware: PHP 7.4 or higher
– Database: MySQL 5.6 or higher, MariaDB 10.1 or higher
– Other recommendations: HTTPS support
Pros Cons
Large community CMS functions require
additional extensions

Minimal effort for Plugins often have security

installation and setup gaps

Intuitive user interface Limited stability and

performance capability with
high traffic
Simple integration of plugins More frequent security
and other extensions updates lead to additional
administrative effort
 How to Create and Sell Online Courses with
WordPress (Step by Step)
• Selling online courses is a popular online business idea that you can start
with a very small investment and no technical knowledge.
• Here are the steps we will cover to help you create an online course with
WordPress:
– What do you need to create an online course
– Setting up WordPress
– Install and setup MemberPress (LMS addon for WordPress)
– Creating your first online course
– Adding sections and lessons to your online course
– Restrict course access to membership plans
– Selling your online course
– Adding links to course sign up and registration page
What Do You Need to Create / Sell an Online Course?

• A course idea where you can help others learn new

skills.
• A domain name. This will be your website’s address
(Example, wpbeginner.com).
• A WordPress hosting account. This is where your
website’s files are stored.
• An eLearning management add-on (also known as
LMS plugin) to create and manage courses.
• Your undivided attention for the next 45 minutes.
• Step 1. Setting up Your WordPress Website
– There are two types of WordPress:
– WordPress.com vs WordPress.org.
– We recommend using WordPress.org because it gives
you access to all the WordPress features that you’ll
need.
– To start a self-hosted WordPress.org website, you’ll
need a domain name ($14.99 / year), WordPress
hosting ($7.99 / month), and SSL certificate to accept
online payments ($69.99 / year).
– After purchasing hosting, head over to our guide on
how to create a WordPress website for step by step
set up instructions.
• Step 2. Install and Setup MemberPress LMS
Plugin
– Now that your WordPress website is ready, the next
step is to install and setup a Learning Management
System add-on.
– This will allow you to create your online course and
add it to your website.
– First, you need to install and activate the
MemberPress plugin.
– MemberPress is the best LMS plugin for WordPress. It
is an all-in-one solution with complete course
management, lesson plans, subscriptions, access
control, payment management, and more.
• Step 3. Creating Your First Course
– The course creation process in MemberPress makes it
super easy to create and manage online courses. It comes
with a very easy to use course builder that allows you to
create courses, add sections, edit lessons, and more.
– First, you need to visit MemberPress » Courses page
where you’ll see a button to install and activate the courses
addon.
• Step 4. Adding Sections and Lessons to Your
Course
• MemberPress also makes it easy to quickly
start adding course contents for each course
without switching to a different page.
• Step 5. Creating Course Membership
Subscriptions
• MemberPress allows you to easily sell online courses
with subscription plans. You can create as many
membership plans as you like, and users can select a
plan to pay for your online course.
• Step 6. Restrict Course Access to
Membership Plans
• The best part about using MemberPress is its
powerful access control rules. They allow you
to decide who gets access to your online
course.
• Simply, go to MemberPress » Rules page and
click on the ‘Add New’ button.
• Step 7. Adding a Link to Course Sign up and
Register Page
– MemberPress makes it easy to easily send users to
the page where they can register and sign up for
your course by purchasing a membership plan.
• Step 8. Preview & Customize Your Online Course
– You can simply go to view a course by visiting:
– https://example.com/courses/
– Don’t forget to replace the example.com with your
own domain name.
• Step 9. Selling Your Online Course with More
Powerful Features
• Both MemberPress and WordPress are super flexible.
This allows you to use them with any other tools to
grow your business and reach more users.
• Step 10. Promoting Your Online Course
– The other advantage of WordPress + MemberPress
combo is that it also makes it easier for you to
promote your online course and make money
online.
• 1. Create Landing Pages for Your Online Courses
– However, you may need to quickly create landing pages to
describe course details, showcase instructors, highlight
special offers, etc.
– Custom landing pages and sales pages are proven to
increase course sales.
• 2. Learn The SEO Basics
– Search engines are the #1 traffic source for most websites on the
internet. This is why you’ll need to learn how to make your online
course website rank higher in search engines.
• 3. Track Marketing Data
– A lot of beginners develop their marketing strategy based on
guesswork. You don’t have to do that when you can get actual data to
make informed decisions.
• 4. Start Building an Email List
– you need to start an email newsletter. This way you would be able to
collect email addresses and reach out to those users and bring them
back to your website.
– We recommend using Constant Contact or ConvertKit for email
marketing.
• 5. Convert Website Visitors into Subscribers and
Customers
– Most visitors who come to your website will leave without
enrolling into your online course. This is why it’s important
to convert those abandoning visitors into subscribers or
paying customers.
– This is called conversion optimization
 DESIGN AND DEVELOP A WEBSITE HAVING
AESTHETICS

• The term aesthetics in the context of this article

covers visual, sound and interactive means of effect.
• They are the components that make websites appeal
to the eye. A visually appealing website is easy to
digest, more functional, enjoyable, and inviting,
retaining attention in that critical first 30 seconds
where users need to be engaged.
• Aspects of aesthetics include artistic design, font
choices, layout, color, image choices, and
construction of text.
• Artistic Design
– Integration of artistic imagery into the background and layout of a
website can significantly contribute to the visual appeal. Simple
related shapes or silhouettes in filler space have an enjoyable effect on
the user.
• Font Choices
– Clear text is important for webpage aesthetics. Don’t
overcomplicate text with tricky fonts or effects, and don’t
make text look tacky with poor color or sizing.
• Layout
– A good layout is critical to aesthetic design. Users will
intuitively tune out of a poor layout, and bounce rates will
increase. When a website is too cluttered or has no
structure, it is not visually appealing.
– Sidebars are important for additional information,
especially if the site is usually accessed from a PC. Visual
layout considerations need to consider both responsive
design and PC use.
• A Picture Tells a Story
– Good pictures are important for aesthetic webpage
design, they must be attractive and portray your aim. We
are drawn to effective images, and it makes us want to
read the copy associated.
• Color
– Color use should match your style, and colors must
complement each other. The interplay and readability of
colors for text, buttons, and background are important for
visual appeal.
• Text Construction
– The textual construction of your website can contribute to
aesthetics through careful placement of styled text blocks.
• Navigation
Make it easy for visitors to find what they are looking for.
Give them multiple vehicles for accessing information. Provide a
Search function, side navigation categories, footer navigation text
links, top navigation buttons or tabs, whatever will make it utterly
seamless for a user to move around your site, no matter where they
start.
• Alignment
Elements of your site should be visually connected and
balanced. Stick to a limited number of page treatments; fewer if
your site is small, more for larger sites comprised of multiple
content types.
• Consistency & Continuity
Be consistent throughout your site so that a visitor navigating from
page to page will always know where they are and how to get to the
next item of interest. Continuity is one of the single most important
elements in conversion. When a user clicks to navigate to a new
page, that page must match their expectations and deliver a
 Advanced and Minimal UI Transitions based
on the project
• Our Top 9 Animation Libraries List
– Animate.css
– Bounce.js
– AnimeJS
– GreenSock (GSAP)
– Magic Animations
– ZDog
– CSShake
– Hover.CSS
– AniJS
• Animate.css is one of the smallest and most easy-to-use CSS animation libraries
available. Applying the Animate library to your project is as simple as linking the
CSS and adding the required CSS classes to your HTML elements. You can also
use jQuery to trigger the animations on a particular event if you prefer.
• Bounce.js is a JavaScript animation library that focuses on providing a selection of
unique fun, bouncy, Warner Brothers-esque animations to your website.
• AnimeJS is the newest addition to our list, but has won a great many converts since
its creation. It’s incredibly versatile and powerful and wouldn’t be out of place
powering HTML game animations.
– AnimeJS is described as a “lightweight JavaScript animation library with a
simple, yet powerful API. It works with CSS properties, SVG, DOM attributes
and JavaScript Objects”. Pretty awesome.
• GreenSock (or GSAP – GreenSock Animation Platform) is the Swiss army knife
of web animation. For sleek and sophisticated animations that run smoothly, GSAP
is ideal. You can animate anything, from DOM elements to SVGs, and its
ecosystem includes some amazing plugins that let you do all sorts of fun stuff, e.g.,
morphing SVGs, drawing SVG strokes, scrolling functionality, scrambling text, and
much more.
• Zdog is a JavaScript library for creating 3D designs and
animations by David DeSandro. With its help, you can
draw your designs using the <canvas> element or SVGs
and bring them to life in smooth animations with a sleek
3D effect.
• CSShake delivers exactly what it says on the box — a CSS
library designed specifically for shaking elements within
your web page. As you might expect, there are a number of
variations available for shaking your web components.
• Hover.css is a CSS animation library designed for use with
buttons and other UI elements in your website. It has really
nice 2D transitions, along with a host of other well-crafted
animations.
 Host and manage the project live in any
public hosting
• A web host, also called a hosting provider, is a company that
provides the tools you need to accomplish this.
• Most notably, that includes a server. Servers store website
files, and Internet browsers can communicate with them to
deliver your site’s pages to visitors. This is what makes
hosting such a key element of setting up a website – without it,
you have no way to make your site public.
• It’s important to note that there are two ways to host a
website: (1) externally/publicly, and (2) locally.
• A locally-hosted website is stored on your own machine,
while an externally-hosted site is stored on a provider’s server.
• How to host a website on the web
1. Determine the best type of hosting for your
site
– For WordPress users, there are five main
types of hosting to consider:
– Shared
– Virtual Private Server (VPS)
– Dedicated
– Cloud
– Managed WordPress hosting
2. Examine additional features available from various
providers
• In addition to hosting your website on one of its servers, many
hosting providers – especially those with managed WordPress
plans – offer handy features you may want for your site. Some
common ones include:
– Domain name registration
– Content delivery network (CDN)
– SSL certificates
– Security features such as firewalls or regular scans
– Automated backups
– Externally-hosted staging areas
– Email services
3. Look at different providers’ customer support options
– Customer support is a key element of any hosting service. Your
relationship with your hosting provider will likely be a long-term one,
so it’s important that it’s able to provide any help you may need related
to your account, server, or even WordPress itself.
4. Set a hosting budget and find a price that works for you
– Hosting is an ongoing expense. Most providers require you to pay
monthly fees, although some offer annual plans. Either way, it’s
important to consider what you’ll be able to afford on a regular basis.
• 5. Figure out how you’ll install WordPress on your provider’s server
– Some managed WordPress hosts also offer a one-click installation
option that enables you to quickly install the software on your account.
There are even plans that come with WordPress pre-installed, which is
the easiest solution.
• How to host your own website locally
1. Create a site using a local web stack
• A local web stack, such as XAMPP, is software that provides several
components needed for local development, including a web server. The
main benefit of using this method is that it gives you the most control over
your site:
• 2. Sign up for a virtual sandbox environment
– These platforms, including Local by Flywheel, enable you to easily create local
WordPress installations.
– Local by Flywheel is completely free to use. All you have to do is sign up, download the
app, and start creating sites.
 Hosting your website on Github
• Github is a company that hosts "code repositories", collections
of code for projects. Many of the code repositories are "open
source", which means they're publicly available for the whole
world to browse.
• Sign up for a Github account
• Create a Github project for your website
– Once you verify your email address, you'll see the start
page. Click "Start a project
• Upload multi-file websites to Github
• Find your project folder and select the files you want to
upload.