Module Title: - Developing Cascading style
sheets (CSS)
• Module code: EIS WDDBA3 M05 1123
• Nominal duration: 90 Hour
• Prepared by: Ministry of Labor and Skill
November, 2023
Addis Ababa, Ethiopia
Introduction to the Module
This module covers the units:
Foundations of CSS and User-Centric Design
Web page creations using CSS and HTML
web page and CSS Validation and testing
Unit one: Foundations of CSS and
User-Centric Design
INTRODUCTION TO CSS AND BASIC DESIGN
PRINCIPLES
• CSS is a stylesheet language used to control the
presentation and layout of HTML or XML documents.
• It allows for the separation of content and design,
enabling consistent and visually appealing web pages.
• This foundational knowledge is essential for creating
well-designed and user-friendly websites.
Advantages and areas of application of
CSS
• CSS (Cascading Style Sheets) offers advantages
such as enhanced website consistency, easier
maintenance, and improved page loading speed.
• It provides a separation of content and design,
making styling efficient.
• CSS is widely applied in web development for
creating responsive layouts, customizing visual
elements, and ensuring a seamless user experience
across various devices.
USER REQUIREMENTS FOR CSS
STYLE
• User requirements are the specific needs and wants of a
user that must be taken into account during the web
design quality assurance process.
• The user requirements gathering process includes
surveys,
interviews,
focus groups, and more.
Accessibility guidelines for UX design
process
• Website accessibility guidelines WCAG are a set
of best practices that help people with disabilities
use the internet.
• These guidelines help web designers to make
websites easier to use, by ensuring they are
accessible to everyone.
Those guidelines are sorted into the following
categories:
Operable
You need to make sure that every task is performable on both
keyboard and mouse, that users have enough time to complete a
task.
Perceivable
You need to ensure that all users can easily perceive your content.
Understandable
You can do it by avoiding complex words and instructions,
explaining error messages and interactive website design elements
in detail..
Robust
Through quality assurance, you need to ensure that your website is
accessible from all the different browsers and devices people use to
explore the internet
DEVELOPMENT OF CUSS TO MATCH
USER REQUIREMENTS
• Before you start writing user requirements
for a website design you need to deeply
understand your target audience.
DEVELOPMENT OF CUSS TO MATCH USER
REQUIREMENTS CONT…
Build trust with customers
As people mostly buy products and services from
businesses they trust, the e-Commerce development
process needs to be focused on building a website that
invokes trustworthiness.
Evoke emotions with visuals
Powerful way to connect with the target audience is by
including photos and videos that evoke trust across
your landing pages.
Cont…
Useful and creative content
Most users will come to your website with one goal – to
find useful information.
To improve customer retention for your business, you
need to ensure that only high-quality content ends up on
your website.
Make it easy to navigate
Before starting a user experience design process, it is
crucial to put yourself in the website visitor’s shoes.
You need to ensure that the navigation menu is simple to
understand and placed exactly where users expect it to be.
Cont…
Horizontal navigation bar
Probably the most popular navigation menu type, that is
usually located at the top of the page, just below the
header.
The horizontal navigation bar goes in the left-to-right
direction.
Vertical sidebar navigation menu
This type of menu appears on the right or left side and
usually stretches from the top to the bottom of the page.
Dropdown navigation menu
A dropdown navigation menu is a common user interface
element used in websites and applications to organize and
display a list of options in a hierarchical manner.
Cont…
Hamburger navigation menu
This is a type of navigation menu that appears when you
hover your mouse or click over a “hamburger” button.
It is the most popular menu type for mobile website
design because it occupies the least space until the user
clicks on it.
Footer navigation menu
As its name suggests, it appears at the bottom of your web
pages.
As more and more people are using smartphones and
tablets to browse the internet, your web development team
needs to ensure the mobile-friendliness of the website
during the design process.
