Lesson 1 Flashcards
is the process of creating the
visual and functional aspects of websites. It
involves planning, conceptualizing, and
arranging content intended for the internet.
Web design
goes beyond aesthetics
to include the website’s overall functionality.
Modern web design
Key Components of Web Design
Layout
Color Scheme
Typography
Images and Graphics
Navigation
The arrangement of elements on a webpage, including headers, footers, navigation menus, and content
areas.
Layout
The selection of colors used throughout the
website to create a cohesive and visually appealing look
Color Scheme
The choice of fonts and text styles to ensure readability and enhance the website’s aesthetic.
Typography
The use of photos, illustrations,
icons, and other visual elements to support content and
engage users.
Images and Graphics
The system that allows users to move through the website, including menus, links, and buttons.
Navigation:
Principles of Good Web Design
Simplicity
Consistency
Responsiveness
Accessibility
User-Centered Design
Keep the design clean and uncluttered to make it
easy for users to navigate and find information.
Simplicity
Use consistent design elements, such as
colors, fonts, and layouts, to create a cohesive experience.
Consistency:
Ensure the website looks and functions
well on various devices, including desktops, tablets, and
smartphones.
Responsiveness
Design the website to be usable by people
with disabilities, following guidelines such as the Web Content
Accessibility Guidelines (WCAG).
Accessibility:
Focus on the needs and preferences
of the target audience to create a user-friendly experience.
User-Centered Design:
Example of a Bad Web Design
Bad Navigation
Outdated
Bad Fonts/Typography
Cluttered
No Mobile Responsiveness
Bad Color Scheme
No White Space
Confusing
Bad Visuals
The standard language
for creating web pages.
HTML (HyperText Markup Language):
Used to style and layout web
pages.
CSS (Cascading Style Sheets):
A programming language that adds interactivity
to websites.
JavaScript
Tools like Adobe XD, Figma, and
Sketch for designing and prototyping websites.
Web Design Software
Platforms like
WordPress, Joomla, and Drupal for building and managing
websites.
Content Management Systems (CMS)
Steps to Design a Website
Define the Purpose and Goals:
Research and Plan
Design
Develop
Test
Launch
Maintain
Understand the website’s
objectives and target audience.
Define the Purpose and Goals
Conduct research on competitors and gather
inspiration. Create a sitemap and wireframes.
Research and Plan
Develop the visual elements, including layout, color scheme,
typography, and graphics.
Design
Write the HTML, CSS, and JavaScript code to build the
website.
Develop
Check the website for functionality, usability, and compatibility
across different devices and browsers.
Test:
Publish the website and promote it to the target audience
Launch:
Regularly update the content and fix any issues that arise
Maintain
is the standard language for creating webpages. It is used to structure content on the web and to add elements like text, images, links, and more.
HTML (HyperText Markup Language)
HTML is not a programming language but a markup
language that defines the structure of web pages. (True or False)
True
Websites are built using HTML, CSS, and
JavaScript, where HTML provides the content and
structure. (True or False)
True
True or False (Basahin lang yan)
HTML allows us to display content on a web
browser, making it essential for any website.
It is the foundation of every webpage you
visit.
True
Every HTML document starts and ends with
the <html> tag, and it contains several key
parts:
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Declares the document type
and version of HTML being used (HTML5).
<!DOCTYPE html>
This is the root element that wraps the
entire HTML content.
<html>
</html>
Contains metadata (e.g., title,
character encoding) and is not directly visible on
the page.
<head>
</head>
Specifies the character
encoding to support different languages and
characters.
<meta></meta>
The title of the webpage shown on the
browser tab.
<title>Page Title</title>
This contains the content of the webpage
that will be visible to users.
<body>
</body>
Header tags
<h1> to <h6>
</h6></h1>
is the
largest heading
<h1>
</h1>
is the smallest heading
<h6>
</h6>
Paragraph tag for text
<p>
</p>
Bold text.
<b></b>
Italic text
<i></i>
Underlined text
<u></u>
Used to create hyperlinks.
<a>Link text</a>
Embeds an image into the webpage.
<img></img>
purpose of alt
provides alternative text for images when they can’t be displayed
Unordered List example
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List example
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Used to create tables.
<table>, <tr>, <td>, <th>
</th></td></tr></table>
Tables examples
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
OUPUT
Name Age (naka bold since TH)
John 25 (Not Bold)
