BUI-CSC 101: Introduction to Web

Development

Olaniyan Deborah O. (Ph.D)

COMP-SCI and IFT BATCH
 Principles of Lecture Etiquette

 Arrive on time and  Please refrain from

avoid disrupting the making noise. If you feel

drowsy, it's best to leave
class by coming in late.
and rest at home.
 Cell phones are not
 If you need to check
permitted.
emails or browse the
 Entering and leaving
internet, kindly do so
the room should be outside of the classroom.
done purposefully, not  Only open your computer
randomly. when instructed to do so.
 Course Curriculum
• Course Contents • Learning outcomes
– Web Development, Web – Upon completion of the course,
Applications vs. Traditional students will be able to:
Applications. – recognize the basic architecture of a
web application including the front
– Modern Web Application
end, back end, and basic importance
Architecture. of HTML, CSS, and JavaScript in a
– Programming for the Web. web page.
Writing and Running Code. – describe the parts of HTML mark-up
– Anatomy of HTML. including elements, tags, and
– Creating an HTML Web Page. attributes.
– Semantic HTML. – identify the importance of semantic
HTML in web development.
– Anatomy of CSS.
– describe the parts of CSS syntax
– Working with CSS and HTML including styles, rules, and
Together. properties.
– Anatomy of JavaScript. Writing – design web pages that uses
JavaScript for the Web. javascript
 Course Curriculum
• Course Contents Break-down
– Practical – 5marks *2 sessions=10marks
– Presentation-10marks
– Test(PRACTICAL)-10marks
– Exam -70marks

– Good luck
Introduction to Web Development

• Week 1
• What is Web Development?
Week1: Introduction to Web Development

• Web Development: The process of creating websites or

web applications.
• Building Blocks:
– HTML (Structure)
– CSS (Presentation)
– JavaScript (Interactivity)
• Types:Static Websites: Fixed content (e.g., personal
blogs, portfolios).
• Dynamic Websites: Change content in response to user
input (e.g., e-commerce, social media).
• Web Applications: Functionality similar to desktop apps
but run in the browser (e.g., Google Docs, Twitter).
Week1: Introduction to Web Development

• Types of Web Development

• Front-End Development:
– Focuses on user interface and experience (UI/UX).
– Technologies: HTML, CSS, JavaScript frameworks like React, Angular.
– Tools: Visual Studio Code, Chrome DevTools.
• Back-End Development:
– Focuses on server logic, database management.
– Technologies: Node.js, Python, PHP, databases like MySQL or
MongoDB.
– Tools: Postman (for API testing), command-line interfaces.
• Full-Stack Development:
– Combines both front-end and back-end.
– Full-stack developers handle all aspects of a web project.
Week1: Introduction to Web Development

• What are Traditional Applications?

• Definition: Software installed on a computer or
device (e.g., desktop programs).
• Key Features:
– Runs locally, does not rely on internet connectivity.
– Requires installation (e.g., Microsoft Office, Photoshop).
– OS-specific (Windows, macOS).
– Updates need to be manually installed by the user.
• Examples:
– Microsoft Word (desktop version)
– Adobe Photoshop
Week1: Introduction to Web Development

• Web Applications
• Title: What are Web Applications?
• Definition: Applications that run in a web browser,
accessible over the internet.
• Key Features:
– Accessible from any device with internet and a browser.
– No installation required, available immediately via URLs.
– Auto-updates—updates are deployed to the server and are
instantly available to users.
• Examples:
– Google Docs (online word processing)
– Facebook, Twitter (social media)
Week1: Introduction to Web Development

Web vs. Traditional Applications

Feature Traditional Applications Web Applications

Installation Yes, installed locally No, accessed via browser

Access Limited to specific device Accessible from any device

Connectivity Often works offline Requires internet

Updates Manual, user-driven Automatic, server-driven

Device Dependency Tied to device/OS Cross-platform

Microsoft Word, Adobe Google Docs, Gmail,

Examples
Photoshop Facebook

Feature Traditional Applications Web Applications

Week1: Introduction to Web Development

• Modern Web Application Architecture

• Key Elements:
– Client-Side (Front-End):
• Browser-based interface.
• Technologies: HTML, CSS, JavaScript.
• Examples: Single-page applications (SPAs) like Gmail.
– Server-Side (Back-End):
• Manages data, logic, and APIs.
• Technologies: Node.js, Python, Ruby, etc.
– Databases:
• Stores data in relational (SQL) or non-relational (NoSQL) databases.
– APIs:
• Facilitate communication between the front-end and back-end.
• RESTful APIs or GraphQL.
– Cloud Services:
Week1: Introduction to Web Development

• Components of Modern Web Applications

• Front-End:
– Technologies: HTML, CSS, JavaScript (React, Angular, Vue).
– Handles user interaction, aesthetics, and usability.
• Back-End:
– Handles business logic, database interactions, and security.
– Languages: Node.js, Python, PHP, Ruby.
• APIs:
– Connect the front-end to the back-end.
– Use RESTful APIs or GraphQL to send and receive data.
• Databases:
– Store and manage data.
– Examples: MySQL, MongoDB (NoSQL).
• Cloud Infrastructure:
– AWS, Google Cloud, Microsoft Azure.
 Week 1 – Introduction to Web
Development
• What is Client-Side Programming?
• Client-Side:
– Runs directly in the user’s browser.
– Focuses on the user interface and experience.
– Technologies: HTML, CSS, JavaScript.
– Examples:
• Adding interactivity (JavaScript buttons, animations).
• Styling web pages (CSS).
• Structuring content (HTML).
 Week 1 – Introduction to Web
Development
• What is Server-Side Programming?
• Server-Side:
– Executes on the web server before sending the result to
the browser.
– Manages data and handles backend logic.
– Technologies: Node.js, PHP, Python, Ruby.
– Examples:
• User authentication.
• Database interactions (e.g., MySQL).
• Generating dynamic content (server-rendered HTML).
 Week 1 – Introduction to Web
Development
Client-Side vs. Server-Side Programming

Client-Side Server-Side
Aspect
Programming Programming
Runs on the Runs on the web
Execution
user’s browser server
HTML, CSS, Node.js, PHP,
Languages
JavaScript Python, Ruby
User interface Business logic,
Role
and interaction data management
Depends on the Depends on
Performance
user's device server capacity
Typically more
Vulnerable to
Security secure, server-
client-side attacks
controlled
Form validation Database queries,
Examples
(JS), Animations user login
Week1: Introduction to Web Development

• Summary
– Web development involves building applications that run
on browsers using technologies like HTML, CSS, and
JavaScript.
– Web Applications: Accessible anywhere, no installation
required, and automatically updated.
– Traditional Applications: Installed locally on a device,
require manual updates, and are OS-specific.
– Modern Web Architecture: Client-server model with
APIs, cloud services, and scalable databases.
Week1: Introduction to Web Development

• Why Web Applications?

• Advantages:
– Cross-Platform: Runs on any device with a browser.
– No Installation: Instant access via a URL, no setup required.
– Centralized Updates: No need for users to install updates.
– Cost-Effective: Lower development and distribution costs.
– Real-Time Collaboration: Web apps often include real-time
features (e.g., Google Docs).
– Security: Centralized control allows developers to enforce
security updates more easily.
Week1: Introduction to Web Development

• ASSIGNMENT
– How does web development improve accessibility
compared to traditional applications?
– What are the key reasons businesses and developers are
shifting to web applications over traditional software?
– Can you think of any hybrid applications that work both
offline and online?
Overview of Web Programming Languages

• Week 2
• Overview of Web Programming
Languages
 Week 2 – Setting up a Development
Environment
• Setting Up a Web Development Environment
• Text Editors:
– Choose a powerful text editor to write and manage your
code.
– Popular options:
• Visual Studio Code: Free and feature-rich with extensions.
• Sublime Text: Lightweight and customizable.
• Atom: Open-source with GitHub integration.
• Browsers for Testing:
– Use modern browsers for development:
• Google Chrome: Includes Chrome Developer Tools for debugging.
• Firefox: Developer-friendly features.
• Safari and Edge: Additional testing for compatibility.
 Week 2 – Basic Structure of HTML, CSS,
JavaScript
• HTML (Hypertext Markup Explanation
Language) is used to structure
content on the web. <!DOCTYPE html>: Declares the
• Basic Structure of an HTML document type.
Document: <html>: Root element of the
• <!DOCTYPE html> page.
<html>
<head> <head>: Contains meta-
<title>My First Web Page</title> information, such as the title.
<style></style> <body>: Contains the visible
<script></script>
content (e.g., headings,
</head>
<body> paragraphs).
<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p>
</body> </html>
Week 2 – Basic Structure of HTML, CSS,
JavaScript
 Week 2 – Running Your HTML, CSS, and
JavaScript in Browsers
• How to Run HTML, CSS, and JavaScript:Create a New HTML
File:
– Save your HTML code with a .html extension (e.g., index.html).
• Open in a Web Browser:
– Open the .html file in your browser (double-click the file or right-
click and choose Open with).
• Link CSS and JavaScript:
– CSS: Add a <style> tag in the <head> section.
– JavaScript: Use a <script> tag at the bottom of the <body> section.
• Check the Results:
– Observe how HTML structures the content, CSS styles it, and
JavaScript adds interactivity.
 Week 2 – Overview of Web Programming
Languages
• Core Web Programming Languages
• Example
• HTML (Hypertext Markup
Language): • HTML: <h1>Welcome
– Structures the content of web pages.
– Defines elements like headings, to My Website</h1>
paragraphs, images, and links.
• CSS (Cascading Style Sheets): • CSS: h1 { color: blue;
– Adds styling and layout to HTML
content.
text-align: center;}
– Controls colors, fonts, spacing, and
positioning.
• JAVASCRIPT:
• JavaScript: document.getElement
– Adds interactivity and dynamic
features to web pages.
ById("demo").innerHT
– Manipulates HTML and CSS in real-
time.
ML = "Hello World!";
 Week 2 – Role of HTML in Web
Development
• HTML: The Structure of Web Pages
• Purpose:
– Defines the structure and content of web pages.
– HTML elements are the building blocks of web pages.
• Common HTML Elements:
Headings: <h1> to <h6>
Paragraphs: <p>
Images: <img>
Links: <a>
Lists: <ul>, <ol>, <li>
Tables: <table>
 Week 2 – HTML, CSS, JavaScript, Running and
Testing Code in Browsers
• Writing Code in CSS Explanation;
• CSS (Cascading Style Sheets) • Selectors (e.g., h1, p): Target
is used to style HTML HTML elements to apply
content.
styles.
• Basic CSS Example:
h1 {
• Properties (e.g., color, font-
color: blue; family, text-align): Specify the
font-family: Arial, sans-serif; styles.
text-align: center;
}
• Values (e.g., blue, Arial,
p{ center): Define the specific
font-size: 16px; style settings.
line-height: 1.5;
 Week 2 – Role of JavaScript in Web
Development

• JavaScript: Adding function validateForm() {

Interactivity to Web Pages
• Purpose: x=document.getElementById
– JavaScript brings web ("fname").value;
pages to life by adding
interactivity and dynamic if(x==""){
content. alert("Name must not be
– Can manipulate both
empty!")
HTML and CSS using the
DOM (Document Object }else{alert("You entered " +
Model). x)}
• Examples of JavaScript
Features:
}
 Week 2 – HTML, CSS, JavaScript, Running and
Testing Code in Browsers

• JavaScript adds interactivity Explanation;

and dynamic behavior to • document.getElementById():
web pages. Selects an HTML element by its
ID.
• Basic JavaScript Example: • Event Listener (onclick): Detects
document.getElementById("myButton").onclick = function()
{ alert("Button was clicked!"); when the button is clicked.
} • alert(): Displays a pop-up
• HTML with JavaScript message to the user.
<button id="myButton">Click Me!</button>
<script src="myscript.js"></script>
 Week 2 – Common Rules
Feature id class
• In HTML and CSS, both
class and id are used to Can be
Uniquenes Unique, used on
apply styles or identify
s used only multiple
elements, but they serve once elements
different purposes and have
CSS .class-
distinct rules for use. Selector #id-name name
• In practice, use id when Style or
you need to uniquely Identify a group
identify an element for Purpose single multiple
element elements
styling or scripting, and
use class when you want Reusable
to apply common styles or Reusability Not across
reusable elements
behavior to multiple
 Week 2 – Common Rules
// Change the header's background color
<!DOCTYPE html> document.getElementById('header').style.ba
<html> ckgroundColor = 'red';
// Change the background color of all menu
<head> items
<style> const menus =
document.getElementsByClassName('m
#header { background-color: blue; } enu');
.menu { color: green; } for (let i = 0; i < menus.length; i++) {
</style> menus[i].style.backgroundColor =
'lightblue';
</head> }
});
<body>
</script>
<div id="header">This is the header</div> </body>
<div class="menu">Menu 1</div> </html>
<div class="menu">Menu 2</div>
<div class="menu">Menu 3</div>
<script>
// Ensure the code runs after the page is
fully loaded

document.addEventListener('DOMCon
tentLoaded', function() {
 Week 2 – Testing Code in Web Browsers

• Common Browsers for Web Development:

– Google Chrome
– Mozilla Firefox
– Microsoft Edge
– Safari
• How to Test Code:
– Open the HTML file in your browser.
– Test responsiveness by resizing the browser window.
– Check the functionality of buttons, forms, and interactive elements.
• Cross-Browser Compatibility:
– Always test your code in multiple browsers to ensure compatibility.
– Different browsers may render CSS and JavaScript differently.
 Week 2 – Testing Code in Web Browsers

• What is Debugging?
• Debugging is the process of finding and fixing errors (bugs) in your
code.
• Common issues: syntax errors, logic errors, and runtime errors.
• How to Debug HTML, CSS, and JavaScript:
• View the Console:
– Use browser Developer Tools (right-click and choose Inspect) to open the
console.
• Check the DOM:
– Use the Elements tab in DevTools to inspect your HTML structure.
– See how CSS styles are applied and override them in real-time.
• Fix the Code:
– Use the information from DevTools to identify and fix issues in your code.
 Week 2 – Testing Code in Web Browsers

• Inspecting HTML and CSS:

– Right-click any element on the page and choose Inspect.
– See the CSS applied to each element and make live changes to
test new styles.
• JavaScript Breakpoints:
– Set breakpoints in the Sources tab of DevTools to pause
JavaScript execution and inspect variables at specific points.
 Week 2 – Common Web Development
Errors
• HTML Errors:
– Missing closing tags (e.g., <p> without </p>).
– Incorrect nesting of elements (e.g., putting a block-level
element inside an inline element).
• CSS Errors:
– Forgetting to use semicolons (;) after each property.
– Incorrect use of units (e.g., mixing px and %).
• JavaScript Errors:
– Syntax errors (missing brackets, semicolons).
– Undefined variables or accessing elements before they are
loaded.
 Week 2 – Web Development

• Summary
• Key Web Technologies:
– HTML provides structure.
– CSS adds style.
– JavaScript enables interactivity.
• Setting Up a Development Environment:
– Use text editors like Visual Studio Code to write and organize code.
– Test your web applications in modern browsers with developer tools.
• Writing Code: You’ve learned how to write and organize code
using HTML, CSS, and JavaScript.
• Running Code: You know how to run and test code in web
browsers.
• Debugging: You’ve been introduced to debugging tools and
 Week 2 – Assignment
On a 2-page A4 paper, design this login page, print out the
webpage design on 1page and print the code with your name
boldly written on it on another page.

Replace this image with your

picture.