Lec 02

Foundations of Web
Development (Part 2)
Introduction
 In Part 2 of our web development journey, we'll explore CSS,

JavaScript, Responsive Design, and Web Accessibility.
 These are crucial components in creating captivating and inclusive
web experiences.
2
CSS - Enhancing Aesthetics
 Cascading Style Sheets (CSS) is the artist's palette of web

development.
 It empowers us to customize web page appearance,
transforming HTML into visually appealing designs.
3
 CSS can customize appearance in a variety of
ways, including:
 Changing colors: CSS can be used to change body {
the color of any element on a web page, color: red;
}
including text, backgrounds, borders, and links.
For example, the following CSS code would
change the color of all of the text on a page to
red: h1, h2, h3, h4, h5, h6 {
 Changing fonts: CSS can be used to change font-family: Arial;
}
the font of any text on a web page. For example,
the following CSS code would change the font of
all of the headings on a page to Arial:
 Changing spacing: CSS can be used to change body {
padding: 10px;
the spacing around and between elements on a }
web page. For example, the following CSS code
would add 10 pixels of padding to all of the img {
elements on a page: }
animation: fadein 2s ease-in-out;
 Adding animations: CSS can be used to add @keyframes fadein {

from {
animations to elements on a web page. For opacity: 0;
example, the following CSS code would cause all }
to {
of the images on a page to fade in when the opacity: 1;
page loads: }
}
4
The Role of CSS
 To Add the "Wow" Factor:

 CSS enhances web pages by adding the "wow" factor, ensuring both
consistency and beauty.
 To Define Display of HTML Elements:
 CSS rules define how HTML elements are displayed, making them
immersive visual experiences.
5
Anatomy of CSS
 Composition of CSS Rules:

 CSS rules are composed of two main parts: selectors and declaration blocks.
 Selectors:
 Selectors are used to target HTML elements that you want to style.
 Declaration Blocks:
 Declaration blocks contain properties and values that define how the selected HTML elements should
be styled.
body {
font-family: Arial, sans-serif;
In this code snippet, you can see how selectors
background-color: #f2f2f2; (e.g., body, h1, p) are used to target specific
} HTML elements, and within each block,
h1 {
properties (e.g., font-family, color, font-size) are
color: #007bff; paired with corresponding values to define the
} styling for those elements. This combination of
p{
selectors and declaration blocks is the
font-size: 16px; fundamental structure of CSS rules.
line-height: 1.5;
}
6
CSS Selectors
 Unique Targeting with CSS:

 CSS employs various selectors to uniquely target HTML elements.
 Types of Selectors:
 CSS offers a variety of selectors, each serving a distinct purpose. These
include:
 Type Selectors
 Class Selectors
 ID Selectors
 Descendant Selectors
 Pseudo-class Selectors
CSS selectors allow web developers to precisely pinpoint the
elements they want to style, making it a versatile and powerful
tool for crafting visually appealing and responsive web designs.
7
CSS Properties and Values
 Defining Element Appearance:

 CSS properties play a pivotal role in determining the appearance of HTML elements.
 Key Properties:
 CSS encompasses a wide array of properties, some of the key ones being:
 Font
 Color
 Background
 Margin
 Padding
 Layout
 Transforms
 Media Queries
These CSS properties, combined with their respective values, allow web
designers and developers to craft visually appealing and responsive web
layouts, ensuring a seamless user experience.
8
Example - Applying CSS Styles
 HTML Structure:
 Demonstrative HTML structure comprising elements like head, title, link, /* styles.css */
body, header, h1, article, and h2. body {
 Linked External CSS: font-family: Arial, sans-serif;
 An external CSS file, "styles.css," is linked to the HTML document using margin: 0;
the <link> element in the <head> section. padding: 0;
 CSS Styling Code: background-color: #f7f7f7;
 Corresponding CSS code in "styles.css" for styling the HTML elements.
}
<!DOCTYPE html> header {
<html> text-align: center;
<head> padding: 20px;
<title>My Blog Post</title> background-color: #333;
<link rel="stylesheet" href="styles.css"> color: #fff;
</head> }
<body> h1 {
<header> font-size: 36px;
<h1>Welcome to My Blog</h1> }
</header>
<article> article {
<h2>Exploring the Wonders of CSS</h2> margin: 20px;
<p>Cascading Style Sheets (CSS) allow us to...</p> padding: 15px;
background-color: #fff;
</article> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
</body> }
</html>
h2 {
color: #007bff;
}
9
JavaScript - Breathing Interactivity
 JavaScript's Role:
 JavaScript serves as the dynamic force that transforms static HTML and
CSS into interactive and lively web experiences.
 Interaction and Responsiveness:
 JavaScript responds to user actions, enabling modifications to content
and adding a dynamic layer to web pages.
 Enhancing User Experience:
 By introducing interactivity and real-time updates, JavaScript enriches the
user experience, making web applications more engaging and functional.
10
JavaScript's Role
 Enhancing Interactivity:
 JavaScript plays a pivotal role in enhancing interactivity on the web.
 Browser-Based Operations:
 Operating within the browser environment, JavaScript dynamically
manipulates elements and swiftly responds to user actions.
JavaScript's ability to facilitate real-time interactions and
manipulate web content in response to user input makes it an
essential language for creating engaging and responsive web
applications.
11
JavaScript and the DOM
 The Document Object Model (DOM):

 The Document Object Model (DOM) acts as the bridge connecting
JavaScript, HTML, and CSS.
 JavaScript's DOM Interaction:
 JavaScript leverages the DOM to access, modify, and manipulate
elements within an HTML document, enabling dynamic and responsive
web applications.
Understanding how JavaScript interacts with the DOM is crucial
for creating dynamic and interactive web experiences. It allows
developers to breathe life into static web content, making it
responsive to user interactions.
12
Event Handling in JavaScript
 JavaScript's Event-Driven Power:

 JavaScript's true power shines through event handling, allowing it to respond dynamically to
user gestures.
 User Interaction Examples:
 JavaScript listens for and responds to a range of user actions, such as clicks, scrolls, and
form submissions.
<!DOCTYPE html>
<html> // script.js
document.addEventListener('DOMContentLoaded', function () {
<head> const button = document.getElementById('myButton');
<title>Interactive Page</title>
<script src="script.js"></script> button.addEventListener('click', function() {
alert('Button clicked!');
</head> });
<body> });
<button id="myButton">Click In this example, JavaScript uses event listeners to respond to the
Me</button> "click" event on a button element. When the button is clicked, an
</body> alert is triggered, demonstrating how JavaScript can react to user
</html> interactions, making web pages more engaging and interactive.
13
Interactive Forms with JavaScript
 Enhancing Form Validation:

 JavaScript empowers form validation, providing real-time feedback to enhance the user experience.
 Real-time Feedback:
 Real-time validation feedback ensures that users receive instant guidance on input correctness.
<!DOCTYPE html> // script.js

<html> document.addEventListener('DOMContentLoaded', function () {
<head> const usernameInput = document.getElementById('username');
<title>Form Validation</title> const usernameError = document.getElementById('usernameError');
<script src="script.js"></script> usernameInput.addEventListener('input', function () {
</head> if (usernameInput.value.length < 6) {
<body> usernameError.textContent = 'Username must be at least 6 characters long';
<form> } else {
<label for="username">Username:</label> usernameError.textContent = '';
<input type="text" id="username" name="username"> }
});
<p id="usernameError" class="error-message"></p> });
<button type="submit">Submit</button>
</form>
</body>
</html>
14
Dynamic Content Updates with JavaScript
 Seamless Data Fetching:

 JavaScript enables the seamless retrieval of data from sources without requiring a page reload.
 Example: Random Quote Display
 Let's explore an example where JavaScript fetches and displays a random quote without the need for a full page refresh.
<!DOCTYPE html> // script.js

<html> document.addEventListener('DOMContentLoaded', function () {
<head> const quoteContainer = document.getElementById('quoteContainer');
<title>Random Quote</title> const quoteElement = document.getElementById('quote');
<script src="script.js"></script> const fetchButton = document.getElementById('fetchButton');
</head>
<body> // Function to fetch and display a random quote
<div id="quoteContainer"> async function fetchRandomQuote() {
<p id="quote">Fetching a random quote...</p> const response = await fetch('https://api.example.com/quotes/random');
<button id="fetchButton">Get Quote</button> const data = await response.json();
</div> quoteElement.textContent = data.quote;
</body> }
</html>
fetchButton.addEventListener('click', fetchRandomQuote);
// Initial quote fetch

fetchRandomQuote();
});
15
CSS and JavaScript Collaboration
 Collaboration for Interactivity: In this example, JavaScript

JavaScript and CSS work together to create interactive effects that enhance the user experience. collaborates with CSS to
Example: Toggling CSS Classes for a Slide-In Menu
toggle the "slide-in" class on
the menu when the "Toggle
In this example, JavaScript and CSS collaborate to toggle CSS classes, creating a slide-in menu effect.
Menu" button is clicked. The
<!DOCTYPE html> .hidden { CSS class change triggers a
<html> transform: translateX(-100%); smooth slide-in animation,
<head> } demonstrating the powerful
<title>Slide-In Menu</title> synergy between JavaScript
<link rel="stylesheet" href="styles.css"> and CSS for creating
<script src="script.js"></script> .slide-in {
transform: translateX(0); interactive web elements.
</head>
<body> }
<button id="menuButton">Toggle Menu</button>
<nav id="slideMenu" class="hidden"> document.addEventListener('DOMContentLoaded', function () {
<ul>
<li><a href="#">Home</a></li> const menuButton = document.getElementById('menuButton');
<li><a href="#">About</a></li> const slideMenu = document.getElementById('slideMenu');
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li> menuButton.addEventListener('click', function() {
</ul> slideMenu.classList.toggle('slide-in');
</nav> });
</body> });
</html>
16
Responsive Design Essentials
 Crucial for Diverse Devices:

 Responsive design is essential in the modern web landscape to ensure
optimal user experiences across a wide range of devices.
 Media Queries for Adaptation:
 Media queries are the cornerstone of responsive design, allowing
layouts and styles to adapt based on the characteristics of the user's
screen.
Responsive design not only enhances usability but also helps
reach a broader audience by accommodating different devices
and screen sizes, ultimately improving user satisfaction.
17
Media Queries in Responsive Design
 Foundation of Responsive Design:

 Media queries serve as the foundational building blocks of responsive
web design.
 Adaptation to Screen Characteristics:
 CSS styles dynamically adapt and respond to factors such as screen
width, height, and orientation, ensuring optimal user experiences on
various devices.
By leveraging media queries, web designers can create flexible
and adaptive layouts that seamlessly adjust to the capabilities
and characteristics of each user's device, enhancing accessibility
and user satisfaction.
18
Example - Responsive Design
This example demonstrates responsive design using media
/* Styles for desktop screens */
queries. The CSS code in "styles.css" adjusts the layout for header {
smaller screens (max-width: 768px), making it more readable background-color: #007bff;
and user-friendly. The navigation menu items are aligned padding: 20px;
text-align: center;
vertically, and the font size is reduced, ensuring a better user }
experience on various devices.
nav ul {
<!DOCTYPE html> display: flex;
<html> list-style: none;
<head>
padding: 0;
<title>Responsive Design Example</title>
<link rel="stylesheet" href="styles.css">
}
</head>
<body> nav li {
<header> margin-right: 20px;
<h1>My Responsive Website</h1> }
<nav>
<ul> /* Styles for smaller screens */
<li><a href="#">Home</a></li> @media screen and (max-width: 768px) {
<li><a href="#">About</a></li> body {
<li><a href="#">Services</a></li> font-size: 14px;
<li><a href="#">Contact</a></li> }
</ul>
</nav> header {
</header> padding: 10px;
<section> }
<h2>Welcome to Our Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nav ul {
consectetur leo vel urna varius, et iaculis velit fermentum.</p> flex-direction: column;
</section>
align-items: center;
</body>
}
</html>
}
19
Web Accessibility
 Inclusivity for All Abilities:

 Web accessibility is the cornerstone of designing websites and applications
that cater to users with diverse abilities.
 Key Practices:
 Several key practices contribute to web accessibility, including:
 Semantic HTML
 Alt Text for Images
 Keyboard Navigation
 Contrast and Color Choices
 ARIA Roles and Attributes
Implementing these practices not only complies with accessibility
standards but also ensures that everyone, regardless of their
abilities, can access and interact with web content effectively.
20
Web Accessibility Principles
 Semantic HTML for Structure:

Semantic HTML tags provide a clear and meaningful structure to web content, aiding in
understanding and navigation.
 Alt Text for Image Descriptions:
Alt text (alternative text) accompanies images, providing descriptions for users who cannot see them,

enhancing inclusivity.
 Example: <img src="image.jpg" alt="A group of diverse people working together in a collaborative
environment.">
 Keyboard Navigation for Accessibility:
Keyboard navigation ensures that users who rely on keyboards, rather than mice, can efficiently
access and interact with web elements.
 Example: <button id="ctaButton" tabindex="0">Click Here</button>
 Contrast for Readability:
Proper color contrast ensures content is legible for users with vision impairments or in various lighting
conditions.
 ARIA Roles for Enhanced Interactivity:
 ARIA (Accessible Rich Internet Applications) roles and attributes enhance interactivity and assistive
technology compatibility.
 Example: <div role="navigation">...</div>
By adhering to these web accessibility principles, designers and developers create digital
experiences that are inclusive and accessible to all users, regardless of their abilities or
assistive technology.
21
Embracing Inclusivity
 Equality and Inclusivity:

 Web accessibility is a catalyst for promoting equality and inclusivity in the
digital realm.
 Reaching a Diverse Audience:
 It ensures that web content can be accessed and engaged with by a
diverse audience, regardless of their abilities or disabilities.
 Your Impact:
 Your decisions as a designer or developer have the power to shape a
more inclusive digital world, where everyone can participate fully in the
online experience.
Web accessibility is not just a responsibility; it's an opportunity to
create a more equitable and welcoming online environment for
all users.
22

Lec 02

Uploaded by

Copyright:

Available Formats

Lec 02

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 02

Uploaded by

Copyright:

Available Formats

Foundations of Web

 In Part 2 of our web development journey, we'll explore CSS,

 Cascading Style Sheets (CSS) is the artist's palette of web

 Adding animations: CSS can be used to add @keyframes fadein {

 To Add the "Wow" Factor:

 Composition of CSS Rules:

 Unique Targeting with CSS:

 Defining Element Appearance:

 The Document Object Model (DOM):

 JavaScript's Event-Driven Power:

 Enhancing Form Validation:

<!DOCTYPE html> // script.js

 Seamless Data Fetching:

<!DOCTYPE html> // script.js

// Initial quote fetch

 Collaboration for Interactivity: In this example, JavaScript

 Crucial for Diverse Devices:

 Foundation of Responsive Design:

 Inclusivity for All Abilities:

 Semantic HTML for Structure:

 Equality and Inclusivity:

You might also like