Scribd
Upload
65 views60 pages

Webdevelopment Notes

The document serves as an introduction to web design, outlining objectives such as defining web design, identifying website components, and creating simple web pages using HTML and CSS. It covers essential topics including web development, HTML structure, elements, and attributes, as well as tools for coding and validating web pages. Additionally, it provides exercises and examples to reinforce learning about hyperlinks, images, tables, and forms in web design.

Uploaded by

argrayan3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views60 pages

Webdevelopment Notes

The document serves as an introduction to web design, outlining objectives such as defining web design, identifying website components, and creating simple web pages using HTML and CSS. It covers essential topics including web development, HTML structure, elements, and attributes, as well as tools for coding and validating web pages. Additionally, it provides exercises and examples to reinforce learning about hyperlinks, images, tables, and forms in web design.

Uploaded by

argrayan3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

INTRODUCTION TO WEB DESIGN

References:
1. https://www.youtube.com/watch?v=zutb5Clb_0Y
2. https://www.youtube.com/watch?v=G3e-
cpL7ofc&t=14224s
3. https://W3schools.com

webdesign 2025 Julius-bariyo 1


Objectives
By the end of the lesson, learners should be able to:

1. Define web design and its importance.


2. Identify basic components of a website.
3. Create a simple web page using HTML and CSS.
4.Work collaboratively to complete a hands-on activity.

webdesign 2025 Julius-bariyo 2


In groups, research about;

Research about the following • Web Authoring


• World wide web/ website • Examples of Web Authoring software
• Web page • Static Vs dynamic Website
• Hyperlink • Categories of Websites
• Homepage/ index page • Advantages of Websites
• Search engine • DisadvantagesClient and server
• Search sites • Client a computer asking/request
• Protocols. • Server. A computer that gives a
response
• https vs Http
• What is an ISP and its Examples
• url and give an example
• parts of Url
• Web design
webdesign 2025 Julius-bariyo 3
How the web Works

• Browsers like chrome


• url: eg https:// www.akesu.org
• url: uniform Resource locator.
• Web resources include
• Web pages /html documents
• Images
• Videos
• fonts

webdesign 2025 Julius-bariyo 4


Web Development
• Front End Development.
Front End Development uses the following languages HTML, CSS and JavaScript.
• HTML: This is the hyper Text Markup Language’s used to define the
structure of a web Page.
• CSS: Cascading style Sheets. Used for styling web pages and making them
beautiful.
• JS: Java Script: Adding functionality to web page elements
• Back End Development.
This focuses on server and database development
• Full stack Development[Combination of Front End and Back End]

webdesign 2025 Julius-bariyo 5


TOOLS FOR HTML &CSS
These are code editors
1. Visual Studio code. Install at code.visualstudio.com
2. Sublime
3. Extensions needed for VS code
i. Prettier: Formats the code pretty well
ii. Live server: launch our website from the server
4. Google Chrome

webdesign 2025 Julius-bariyo 6


Validating web pages

• These are websites that help coders check for errors/bugs in their code.
i. Html Go to a website called validator.w3.org
ii. Css go to jigsaw.w3.org/css-validator/

webdesign 2025 Julius-bariyo 7


Lesson Two: Basic Html Structure
To get a boiler plate ,Type Exclamation mark and press enter

<!DOCTYPE html> -------------------------tells browser that its expecting html5

<html lang="en"> ………………………Language used

<head>

<meta charset="UTF-8"> ……………….... Type of character to expect – all symbols and all this is not displayed in a browser

<meta name="viewport" content="width=device-width, initial-scale=1.0"> ---------responsive designs via mobile, laptop, tabs

<title>Document</title>………………………..For SEO, how best your website ranks when searched. Sets visible title for the webpage

</head>

<body>

………………………………………………Content to be displayed to the Users appears here

</body>

</html>

webdesign 2025 Julius-bariyo 8


Comments (CTRL +/)

• These are used to Explain what the code Does/Documentation.


<!__This is a comment__>
This is not interpreted by the browser

webdesign 2025 Julius-bariyo 9


HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.

Headings: These are used to define important parts of a web page.


They come in different sizes of h1 to h6
<h1>Heading 1 (Largest)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Smallest)</h6>

webdesign 2025 Julius-bariyo 10


Paragraphs

Purpose:
The <p> tag is used to define a paragraph of text in HTML.
• It organizes content into readable blocks.
Basic Syntax:
<p>This is a paragraph.</p>

webdesign 2025 Julius-bariyo 11


Ordered List(OL )and Unordered List(UL)
1. Ordered Lists (<ol>): Used to display a list of items in a specific sequence.
Items are automatically numbered by the browser.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Result in the Browser:
1. First item
2. Second item
3. Third item

webdesign 2025 Julius-bariyo 12


Attributes:
Provide additional information about HTML elements.
Type: Specifies the type of numbering (e.g., 1, A, a, I, i).
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
start: Defines the starting number.
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>

webdesign 2025 Julius-bariyo 13


Unordered Lists (<ul>):
• Used to display a list of items without a specific order. Items are marked with bullets (default
style).
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Result in the Browser:
• Item 1
• Item 2
• Item 3
Attributes: type: Specifies the type of bullet (e.g., disc, circle, square).
<ul type="circle">
<li>Circle bullet</li>
<li>Another item</li>
</ul>

webdesign 2025 Julius-bariyo 14


Nested Lists: A list within a List

<ol> <li>Pepsi</li>
<Li>Water</Li> <li></li>
<ul> <li></li>
<li>Nivana</li> </ul>
<li>Spice</li> </ol>
<li>Rwenzori</li>
<li>Ice</li>
</ul>
<Li>Sodas</Li>
<ul>

webdesign 2025 Julius-bariyo 15


Hyperlinks

A hyperlink is a clickable text/graphic on a webpage that allows users to


navigate to another webpage, file, or section within the same page.
Hyperlinks are essential for connecting content across the web.
• The <a> Tag In HTML, hyperlinks are created using the <a> (anchor) tag.
• Basic Syntax: <a href="URL">Link Text</a>

Key Attributes of the <a> Tag


1. href (Hypertext Reference):Specifies the URL or path to navigate when the link
is clicked.
<a href="https://www.google.com">Visit Google</a>
2.target: Defines where to open the linked document.
Common values:_self (default): Opens in the same tab._blank: Opens in a new
tab. <a href="https://www.wikipedia.org" target="_blank">Open Wikipedia in a
New Tab</a>
webdesign 2025 Julius-bariyo 16
Hyperlinks

3. title:Provides additional information about the link (visible as a tooltip).

<a href="https://example.com" title="Visit Example">Hover Over Me</a>

4.download: Allows the linked file to be downloaded instead of opened.

<a href="document.pdf" download>Download PDF</a>

webdesign 2025 Julius-bariyo 17


Types of Hyperlinks

1. Absolute Links: Links to external websites.

• Must include the full URL (e.g., https://). Example: <a href="https://www.google.com">Google</a>

2.Relative Links:Links to files or pages within the same website.

E,g <a href="about.html">About Us</a>

3. Anchors (Links to the Same Page):

• Used to navigate to specific sections of the same page. E.g

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

4. Email Links:

Opens an email client to send an email.

<a href="mailto:[email protected]">Email Us</a>


webdesign 2025 Julius-bariyo 18
<img> Tag https://bit.ly/4jVY7Sm

• The <img> tag is used to embed images in an HTML document.


• It does not have a closing tag (self-closing) and is essential for adding visual
content to a webpage.
• <img src="image.jpg" alt="Description of the image">
• Key Attributes of the <img> Tag
1. src (Source):Specifies the path or URL of the image. <img
src="https://example.com/photo.jpg" alt="Sample Image">
2. alt (Alternative Text):Provides a textual description of the image. Useful for
accessibility (screen readers) and when the image cannot be displayed.
<img src="image.jpg" alt="A beautiful sunset over the ocean">

webdesign 2025 Julius-bariyo 19


Width and Height

3. width and height: Define the dimensions of the image in pixels.


<img src="photo.jpg" alt="Photo" width="300" height="200">
4. title: Adds a tooltip text when the user hovers over the image.
<img src="icon.png" alt="Icon" title="This is an icon">
5. loading:Specifies how the browser should load the image.
Values:
lazy: Defers loading until the image is in the viewport.
eager: Loads the image immediately.
<img src="large-image.jpg" alt="Large Image" loading="lazy">

webdesign 2025 Julius-bariyo 20


<Table>tag
https://www.w3schools.com/html/html_tables.asp

• Tables are used to display data in a structured, tabular format consisting of


rows and columns.
• The <table> tag is used to define a table in HTML.
Basic Structure of a Table
A table is created using the following main tags:
• <table>: Defines the table.
• <tr>: Defines a row in the table.
• <td>: Defines a cell (data) in the table.
• <th>: Defines a header cell in the table.
• Colspan: An attribute that specifies a number of columns a cell should span
horizontally. Eg. <td colspan = “4”> total sales</td>
• Row span: An attribute that specifies a number of rows a cell should span
vertically.
webdesign 2025 Julius-bariyo 21
Example
<table> Table Attributes
<tr> • border: Adds a border around the table and cells.html
<th>Name</th>
<table border="1">
<th>Age</th>
<th>City</th>
</table>
</tr> • cellpadding: Adds space inside the cells.
<tr> • cellspacing: Adds space between cells.
<td>John</td> • <th> (Table Header):Makes the text bold and centers it by default.
<td>25</td>
<td>New York</td>
<th>Header Text</th>
</tr> <tr> (Table Row): Groups a row of cells together.
<tr> <tr>
<td>Jane</td> <td>Data 1</td>
<td>30</td>
<td>Data 2</td>
<td>London</td>
</tr> </tr>
</table> <td> (Table Data):Represents individual cells in the table.
<td>Data Here</td>
webdesign 2025 Julius-bariyo 22
<div> and <span> Tags

• The <div> and <span> tags are generic containers used in HTML for grouping
and styling content.
• They have no semantic meaning on their own but are essential for organizing
and formatting a webpage.
1. <div> Tag
Definition:
The <div> tag is a block-level element. It is used to group large sections of
content, such as paragraphs, images, or other block-level elements.
Key Features:
Takes up the full width of the container by default.
Commonly used for layout purposes and styling sections of a webpage.
<div>
<h1>Welcome</h1>
<p>This is a section of content.</p>
</div> webdesign 2025 Julius-bariyo 23
2. <span> Tag

• Definition:

The <span> tag is an inline element. It is used to style small portions of text or
inline elements within a block of content.

Key Features:

• Does not break the flow of content (stays inline with surrounding text).Useful
for applying styles to specific parts of text or content.

• <p>This is a <span style="color: red;">red</span> word in a paragraph.</p>

webdesign 2025 Julius-bariyo 24


SEMANTIC HTML 5 TAGS

• Semantic HTML refers to HTML5 elements that clearly define the purpose of their content.

• They provide meaningful structure to a webpage, making it easier for developers, browsers, and
search engines to understand.

Tag Description Example


<header> Represents introductory content or a set of
html
navigational links. Usually found at the top of a
<header><h1>Welcome</h1></header>
page or section.
<nav> html <nav><ul><li><a
Represents a section of navigation links.
href="#">Home</a></li></ul></nav>
<section> Represents a thematic grouping of content, html <section><h2>About
typically with its own heading. Us</h2><p>Details here...</p></section>
<aside> Represents content tangentially related to the html <aside>Related links here...</aside>
main content, such as sidebars or ads.
<footer> Represents footer content, typically containing html <footer>&copy; 2024 Company
webdesign 2025 Julius-bariyo Name</footer>
copyright, links, or contact info. 25
Special characters in HTML

webdesign 2025 Julius-bariyo 26


Exercise 1

Task: Create a simple HTML page with the following elements:


● A main heading saying "About Me".
● A paragraph describing yourself.
● An unordered list of your hobbies.
● An image of your choice with appropriate alt text.

webdesign 2025 Julius-bariyo 27


HTML Forms

• A form in HTML is used to collect user input and send it to a server for
processing.

• Forms are essential for interactive websites, enabling users to submit data like
login credentials, contact information, or preferences.

<form action="/submit" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<button type="submit">Submit</button>

</form>
webdesign 2025 Julius-bariyo 28
Key Attributes of the <form> Tag

• Action: Specifies the URL where the form data will be sent.

• <form action="/submit-data">

• method: Specifies the HTTP method to use when sending the data. Common
values:get: Appends form data to the URL (used for simple requests).post:
Sends form data in the request body (more secure).

• enctype: Specifies how form data should be encoded (used for file
uploads).Example: enctype="multipart/form-data"

webdesign 2025 Julius-bariyo 29


Common Form Elements

1. Text Input (<input type="text">)


Collects single-line text input.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
2. Password Input (<input type="password">)
Masks input for sensitive information.
<label for="password">Password:</label>
<input type="password" id="password" name="password">
3. Radio Buttons (<input type="radio">)
Allows selecting one option from a group.
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

webdesign 2025 Julius-bariyo 30


Common Form Elements

4. Checkbox (<input type="checkbox">)


• Allows selecting one or more options.
• <label><input type="checkbox" name="subscribe" value="newsletter"> Subscribe to
Newsletter</label>

5. Dropdown (<select>) Displays a list of options.


<label for="country">Country:</label>

<select id="country" name="country">


<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>
webdesign 2025 Julius-bariyo 31
Common Form Elements

6. Textarea (<textarea>)
• This can be resized by clicking on the right bottom corner
• Used when providing feedback/user experience
• Collects multi-line text input.
• <label for="message">Message:</label>
• <textarea id="message" name="message" rows="4" cols="50"></textarea>

7. File Upload (<input type="file">)


• Allows users to upload files.
<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">

webdesign 2025 Julius-bariyo 32


Common Form Elements

8. Buttons

• Submit Button: Sends the form data to the server.

<button type="submit">Submit</button>

• Reset Button: Clears all form inputs.

<button type="reset">Reset</button>

webdesign 2025 Julius-bariyo 33


Validation in Forms
HTML5 provides built-in form validation to ensure data is entered correctly.

1. required: Makes a field mandatory.

<input type="text" name="email" required>

2. maxlength / minlength: Sets the character limits.

<input type="text" name="username" maxlength="10">

3. pattern: Validates input using a regular expression.

<input type="text" name="phone" pattern="\d{10}" title="Enter a 10-digit


number">

webdesign 2025 Julius-bariyo 34


4. Input Types for Specific Validations:

• Email: <input type="email">

• Number: <input type="number" min="1" max="100">

• URL: <input type="url">

webdesign 2025 Julius-bariyo 35


Example

• <form action="/register" method="post">


• <h2>Register</h2> • <label for="hobbies">Hobbies:</label>
• • <input type="checkbox" name="hobbies" value="sports">
Sports
• <label for="fname">First Name:</label>
• <input type="checkbox" name="hobbies" value="music">
• <input type="text" id="fname" name="firstname" required><br> Music<br>

• <label for="lname">Last Name:</label> • <label for="country">Country:</label>


• <input type="text" id="lname" name="lastname" required><br> • <select id="country" name="country" required>
• <option value="usa">USA</option>
• <label for="email">Email:</label> • <option value="uk">UK</option>
• <input type="email" id="email" name="email" required><br> • <option value="canada">Canada</option>
• </select><br>
• <label for="password">Password:</label>
• <input type="password" id="password" name="password" • <label for="bio">Bio:</label>
minlength="6" required><br>
• <textarea id="bio" name="bio" rows="4"
cols="30"></textarea><br>
• <label for="gender">Gender:</label>
• <input type="radio" name="gender" value="male" required> • <button type="submit">Register</button>
Male
• </form>
• <input type="radio" name="gender" value="female" required>
Female<br> webdesign 2025 Julius-bariyo 36
INTRODUCTION TO CSS

Objectives

1. Understand the purpose of CSS in web development.

2. Explain the three types of CSS (Inline, Internal, External).

3. Apply basic CSS styles to an HTML page.

webdesign 2025 Julius-bariyo 37


INTRODUCTION TO CSS
• CSS in full is Cascading Style sheets. This is a language that describes the
style/layout of an html document.

Why Learn CSS?

● Enhance Appearance: Customize the look and feel of your web pages.

● Separation of Concerns: Keep HTML structure separate from styling.

● Responsive Design: Create layouts that work on various devices.

To start using CSS, you'll need:

1. A Text Editor: Options include Visual Studio Code, Sublime Text, or Notepad++.

2. A Web Browser: Modern browsers like Chrome, Firefox, or Edge.

webdesign 2025 Julius-bariyo 38


Ways to Add CSS to HTML
• Inline: Using the style attribute within HTML elements. eg <h1 style =“ color: blue;”>
Hello World </h1>

• Internal :Using the <style> tag within the <head> section.


<style>
h1{
Color: blue:
}
</style>

• External Stylesheet: Linking to a separate .css file.


<link rel=“Stylesheet” href=“style.css”>

webdesign 2025 Julius-bariyo 39


CSS SYNTAX
• CSS is composed of selectors and Example:
declarations. p{
• Basic Structure color: red;
selector text-align: center;
{ }
property: value;
}
● Selector: The HTML element you want
to style.
● Property: The aspect of the element
you want to change (e.g., color, font-
size).
● Value: The value assigned to the
property.

webdesign 2025 Julius-bariyo 40


Selectors

Selectors are used to target HTML elements for styling.


• Type/Tag Selector
Selects all elements of a given type.
Example:
p{
color: blue;
}
• Class Selector
Selects elements with a specific class attribute. Classes are defined with a .
(dot).
HTML:
<p class="intro">Welcome to CSS!</p>
CSS:
.intro {
font-weight: bold;
} webdesign 2025 Julius-bariyo 41
Selectors

• ID selector
Selects an element with a specific id attribute. IDs are defined with a #
(hash).

• HTML:
<p id="main-paragraph">This is the main paragraph.</p>
• CSS:
#main-paragraph {
font-size: 20px;
}

webdesign 2025 Julius-bariyo 42


Universal Selector
Selects all elements.
*{ Quiz Question
margin: 0;
padding: 0;
Q2: How do you select an
} element with the class name
Grouping Selectors highlight?
Apply the same style to multiple selectors. A. highlight {}
h1, h2, h3 {
color: navy; B. .highlight {}
}
C. #highlight {}
Descendant Selector
Selects elements nested within others. D. *highlight {}
ul li {
list-style-type: square;
Answer: B. .highlight {}
}
webdesign 2025 Julius-bariyo 43
Comments in CSS

• Use /* comment */ to add comments to document/ explain what a section of


the code does.
• Example:
/* This is a comment */
p{
color: green;
}

webdesign 2025 Julius-bariyo 44


Fonts and Text Styling

Font Family p{
text-align: justify;
Specify the font using font-family.
}
p{
font-family: Arial, sans-serif; Text Decoration
} Add decorations like underlines using text-decoration.
a{
Font Size
text-decoration: none;
Set the size using font-size.
}
h1 {
font-size: 36px; Line Height
}
Control the space between lines with line-height.
Font Weight p{
line-height: 1.5;
Set the thickness using font-weight.
}
strong {
font-weight: bold;
}

Text Alignment
Align text using text-align. webdesign 2025 Julius-bariyo 45
Colors and Backgrounds
• Setting Text Color div {
Use the color property. background-color: rgba(0, 0, 255, 0.1);
p{
}
color: teal;
}
• Background Color
Color Values
Use the background-color property.
● Named Colors: red, blue, green
body {
● Hexadecimal: #FF0000, #00FF00
background-color: lightgray;
● RGB: rgb(255, 0, 0)
}
● RGBA (includes alpha for opacity):
rgba(255, 0, 0, 0.5)

Example:

webdesign 2025 Julius-bariyo 46


Background Images

• Use the background-image property.

body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Quiz Question
Q3: Which CSS property is used to change the text color of an element?
A. font-color
B. text-color
C. color
D. text-style
Answer: C. color webdesign 2025 Julius-bariyo 47
Font Styles

https://fonts.google.com/
@import
url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swa
p');
div.el1,
h1 {
color: white;
background-color: #0000FF;
font-family: 'Permanent Marker', cursive;
}

img {}
webdesign 2025 Julius-bariyo 48
Style the Following Buttons as they appear

webdesign 2025 Julius-bariyo 49


Quiz Question

How do you make the text bold in CSS?


A. font-style: bold;
B. font-weight: bold;
C. text-decoration: bold;
D. text-weight: bold;
Answer: B. font-weight: bold;

webdesign 2025 Julius-bariyo 50


Exercise
<h1>Cascading style sheets</h1>
<p>Coding Css is Fun</p>
<p>HTML is boring without it</p>
<div>What I like Most About CSss</div>
<ul>
<li>Colors</li>
<li>Boxes</li>
<li>Easy to apply</li>
</ul>
Question: Using the above html code update the colors of the fonts and
backgrounds. Add element Selectors

webdesign 2025 Julius-bariyo 51


CHROME DEV TOOLS

A set of web development tools built in chrome browser that allow web
developers to inspect, debug and profile web apps.
Uses of chrome dev tools
• See webpage underlying html and css
• View and interact with Javascript
• Information about network requests
Right click on a browser and select Inspect

webdesign 2025 Julius-bariyo 52


The Box Model

• The CSS box model is a box that wraps around


every HTML element, consisting of margins, borders,
padding, and the content itself.

Components of the Box Model


1. Content: The actual content (text, images, etc.).
2. Padding: Clears an area around the content
(inside the border).
3. Border: A border that goes around the padding
and content.
4. Margin: Clears an area outside the border.
webdesign 2025 Julius-bariyo 53
Setting Padding, Border, and Margin

div {
padding: 20px; Quiz Question
border: 2px solid black;
Q5: Which CSS property adds space
margin: 10px; inside the border and around the
} content?
• Box Sizing • Answer: B. A. margin
Control box sizing using box-sizing. • B. padding
● content-box (default): Width and • C. border
height include content only. • D. spacing
● border-box: Width and height Answer: padding
include content, padding, and border.
div {
box-sizing: border-box;
}
webdesign 2025 Julius-bariyo 54
Web Page Layout
• Websites often display content in multiple columns (like a magazine or a
newspaper).

webdesign 2025 Julius-bariyo 55


CSS Layout Techniques

There are four different techniques to create multicolumn layouts.


• Each technique has its pros and cons:
• CSS framework
If you want to create your layout fast, you can use a CSS framework,
like W3.CSS or Bootstrap.
• CSS float property
Float is easy to learn - you just need to remember how the float and
clear properties work. Disadvantages: Floating elements are tied to the
document flow, which may harm the flexibility
• CSS flexbox
• Use of flexbox ensures that elements behave predictably when the
page layout must accommodate different screen sizes and different
display devices.
• CSS grid
• The CSS Grid Layout Module offers a grid-based layout system, with
rows and columns, making it easier to design web pages without
having to use floats and positioning.
webdesign 2025 Julius-bariyo 56
Layout and Positioning
• CSS provides properties to control the layout and positioning of elements.

Display Property
Defines how an element is displayed.

● block: Starts on a new line and takes up full width.


● inline: Flows inline with text.
● inline-block: Like inline, but allows setting width and height.
● none: Hides the element
span {
display: inline-block; width: 100px;
}

webdesign 2025 Julius-bariyo 57


Position Property
Specifies how an element is positioned in the document.
● static: Default position.
● relative: Positioned relative to its normal position.
● absolute: Positioned relative to its first positioned ancestor.
● fixed: Positioned relative to the viewport.
● sticky: Toggles between relative and fixed.
div {
position: absolute;
top: 50px;
left: 100px;
}
webdesign 2025 Julius-bariyo 58
Flexbox Grid

• A layout model that allows • A two-dimensional layout


responsive alignment of elements. system.
.container { .grid-container {
display: flex;
display: grid;
flex-direction: row;
grid-template-columns: 1fr 2fr;
justify-content: center; grid-gap: 10px; }
align-items: center;
}

webdesign 2025 Julius-bariyo 59


Float
• Used to wrap text around images.
img {
float: left;
margin: 10px;
}
NB: Whenever Float is used, clear must be used;

Clear Clears floated elements.

.clearfix::after {
content: "";
clear: both;
display: table;
}

webdesign 2025 Julius-bariyo 60

You might also like