Scribd
Upload
26 views11 pages

Week 1 - Documentation

The document provides an overview of web development fundamentals, focusing on HTML, CSS, and JavaScript. It covers essential HTML elements, structure, and attributes, as well as CSS styling techniques and layout management using Flexbox. Additionally, it discusses best practices for organizing content and using selectors in CSS.

Uploaded by

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

Week 1 - Documentation

The document provides an overview of web development fundamentals, focusing on HTML, CSS, and JavaScript. It covers essential HTML elements, structure, and attributes, as well as CSS styling techniques and layout management using Flexbox. Additionally, it discusses best practices for organizing content and using selectors in CSS.

Uploaded by

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

Web development Instructors

Eddy

Dedan Okware

Objective: Understand Web Development

- Understand HTML
HTML (Hyper Text Markup Language) is used to structure web pages.
- Understand CSS for styling
- Understand JavaScript for interactivity

Code editor – VS code

HTML – Hypertext Markup Language

DOCTYPE – declares the document type of HTML

<DOCTYPE html> - declares HTML as the document type

<html> - The root element that contains all html code

<html lang= ”en”> - Language is going to be interpreted as English

<head> - Is not visible inside the code base

<meta char= ”UTF 8”> - Unicode transformation format using 8 bit (defined by unicode
standard and is used for electronic communication)

<title>PLP</title> - declares the title for the current page

</head>

<body> - declares the visible content in your web page

Heading – used to create titles inside the page

<h1> - largest,<h2>,<h3>,<h4>,<h5>,<h6> - smallest

Paragraph – creates a block of text, is denoted by <p>

<br> - is used to break a line statement and start in a new line

extensions

Live server (extension) – enables one to run html on web page

HTML preview
Lists (types)

Ordered – numbered ordered; numerics, numbers

Unordered – displays items with bullets

<ul> - unordered list

<l>Football<l>

<l>Basketball<l>

</ul>

<ol type=”A”> ordered list by default – numeric system

<l>Football<l>

<l>Basketball<l>

</ol>

<a href=”https://www.google.com” target=”_bank”- opens another tab >Google</a> - Anchor tag,


displays a link named google which when clicked directs me a new page

<header>

<nav>

<a href = “#about” >About></a>

<a href = “#contact” >Contact </a>

</nav>

</header>

<section id = “about” >

<h2> About Me </h2>

<p> I am a software developer </p>

</section>

<footer>

<p> copyright &copy; 2025 my website </p>

</footer>

Table tag
Attributes – border

<table border = “1”>

<tr>

<th>Day</th>

<th>Activity</th>

</tr>

<tr>

<td>Monday</td>

<td>Reading</td>

</tr>

</table>

<h2>My favorite Image</h2>

<img src = “image.jpg” alt = “my image”>

Form

<form action= “/submit” method = “POST”>

<label for= “name”> Name</label>

<input type = “text” id = “name” required placeholder = “Enter your name”>

<br>

<label for= “email”> Email: </label>

<input type= “email” id= “email” required>

<br>

<textarea name =”message” rows= “4” cols= “58” placeholder = “Enter message”>

<br>

<button type= “submit”>Send</button>

</form
Recap
Scrimba – HTML Crash Course by teacher Kevin Powell
<! DOCTYPE html>

<html>

<head>

<title>page title</title> - shows up the tab

</head>

<body>

Content goes here

</body>

</html>

Document structure

There are two types of elements

- Some define content; headings, paragraphs, lists


Headings
<h1>through to <h6>

Paragraphs
Regular text in your document
<p>this is a paragraph</p>

- Some organise content; inline vs block


Common Inline elements
Links
<em> and <strong>

<strong> by default it is bold. Don’t use it to for bold instead use it to add importance to the
text.

<em> adds emphasis to the text. By default, it will make the text italic.
Nesting elements

Attributes and links


Attributes
Always within the opening tag only
Used to give the browser extra information about that element

Links

Links use the <a> tag, which is short for anchor.

- Links can link to different parts within a single page.


- They also can create connections between different HTML documents.
- Links require attribute to work

Images

Links use the <img> tag

- Use the src attribute to tell the browser where the image file is.
- Use the alt attribute to provide a description of the image.

<img src=”img/photo.jpg” alt=”alternative text photo text when image fails to load”>

Lists

There are two types of lists

<ul> - unordered list – bullets by default

<ol> - ordered list – numbered by default

<li> - list item


CSS – Cascading Style Sheet
HTML is about content, CSS is all about style.

CSS is all about property: value pairs i.e color: red; - must have a colon before the value and a
semicolon to tell the browser that it is finished.

Properties

The properties are what we want to change.

- Color
- Font-size
- Font-weight
- Width

Where do CSS live?

- Inline styles
- Embedded
- External

Embedded

You can write your CSS in the head of an HTML element, placing it inside a <style> element.

<head>

<style>

P{

Color: red;

</style>

</head>

External

This is the best choice. It keeps all your CSS in it’s own file, and allows it to be shared across multiple
HTML files.

<head>

<link href=”” rel=”stylesheet”>

</head>
Inheritance and the cascade

Elements will inherit properties from their parents.

The box model


<p> has a width of 100% and 0 height by default.

The margin property

Margin is an empty space around an element.

We can control the 4 sides independently.

- Margin-left
- Margin-right
- Margin-top
- Margin-bottom

The margin shorthand

Margin: 10px- top 20px-right 30px-bottom 40px-left

Margin: 10px- All sides.

Margin: 10px- top&bottom 20px-left&right

Margin: 10px-top 20-left&right 30px-bottom

The padding property

Padding is empty space inside an element.

The syntax is the same as with margin, including the shorthands that we saw.

The big difference between margin and padding is that padding will include the background color(if
there is one)

The border property

Borders add a border around your element. If you are familiar with design software, they are similar
to a stroke.

Border properties

Border-width (default to medium)


Border-style(default to none)

Border-color(default to the text color)

Border shorthand

i.e h2 { border-width: 2px;

border-style: solid;

border-color:yellow;

is equal to

h2{

border: 2px solid yellow;

P{

border-left:2px solid pink;

Border-right: 5px dotted red;

Border-bottom: 10px double green;

Border-left: 1px dashed purple;

margin

border
padding

Content itself
To organize this content, we can use different elements.

<heading>

<main>

<nav>

<section>

<article>

<footer>

Selectors
In our CSS, there are three primary ways to select elements:

- Element selectors
- Class selectors
- ID selectors

Classes and IDs

When naming classes and IDs

- Do not use spaces


- Do not start them with a number
- Be descriptive

Classes vs IDs

- IDs can only be used one time per page


- Classes can be used over and over
- IDs will overwrite a class selector

Use classes

Most people prefer using only classes and elements for styling purposes.

Spans

Spans are inline elements, similar to <em> and <strong>, but they don’t have any default styling.

Divs

Divs are used to group content, but like a span, they have no semantic meaning.

We use them to group content in order to control our layouts, for the most part.
Centering content
We can center text, which deals with alignment, and we can center elements within the viewport.

Centering text

This is the easy one, where we can use

Text-align: center

Centering elements on the page

To center an alement on the page, we need to declare:

- A width
- Margin-left and margin-right of auto

Creating columns
Flexbox is a CSS layout tool.

When we declare display: flex on an element, all it’s direct children become columns.

.selector{

Display: flex;

Images
unlike regular images, background images are not content, they are decoration.

- Hard to control the exact positioning


- No alt text

.selector{

Background-image: url(“image_location/filename.jpg”);

Background-size: cover; - prevents the image from repeating itself

You might also like