Scribd
Upload
55 views

Web Development - Notes

This document provides an overview of HTML, CSS, and JavaScript basics for web development. It explains key HTML tags and elements for text formatting, links, images, and other content. It also covers basic CSS concepts like styling text and adding borders. The document concludes with an introduction to JavaScript variables, data types, expressions, and conditionals.

Uploaded by

rachel
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
55 views

Web Development - Notes

This document provides an overview of HTML, CSS, and JavaScript basics for web development. It explains key HTML tags and elements for text formatting, links, images, and other content. It also covers basic CSS concepts like styling text and adding borders. The document concludes with an introduction to JavaScript variables, data types, expressions, and conditionals.

Uploaded by

rachel
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/ 12

WEB DEVELOPMENT

1.HTML BASICS
HTML code tells the web browser how to display content like images, links & text on
a webpage. It is a computer markup language that structures all the webpages on the
internet.
● <button> is a opening tag. It tells the web browser we want to start a displaying
button.
● Most tags come in pair. They have opening tag and closing tag.
EG: <button>send</button>

In HTML, keywords of some tags are obvious, but there are some tags that use the
shortenend form. EG: <p> for paragraph.
Coding a paragarph is lot similar to coding a button. You need an opening tag, followed
by your text and then the closing tag.
We can create headings in HTML to emphasize certain textsThere are 6 sizes of
headings in HTML,from h1 to h6.
The heading tag emphasizes texts by making them bigger and bolder, h1 is the biggest
and boldest. H6 is the smallest and least bold.
❖ An element is what we call the opening tag,closing tag and the code in between.
❖ To create empty html page,<html></html>
❖ The HTML & body elements form the structure of the webpage. We place
elements we want to display inside of <body>
EG: <html>
<body>
</body>
</html>
STRUCTURING TEXT WITH TAGS:
We can separate lines of a paragraph with the help of the line break tag.<br>. It is an
empty tag. Eg: <p>
<raindrops are falling><br>
<sun is so bright></p>

➔ There is an element for giving emphasis to text; it makes it italic. It’s called em
element. <em> and </em>.
➔ <strong> & </strong> makes text bold.
➔ The head HTML <head> and </head> is a container for information about a
webpage, like its title. it goes before the body tag.
➔ The title of the webpage appears in the tab or window of the web browser. In the
tabs below, there are two webpage titles: my webpage and google.
➔ To give the webpage a title, we add <title> & </title> inside the head tags.
➔ Note that the title is not visible but it provides information to the browser.
➔ The doctype tells the web browser what version of HTML we are using. Without
it, the browser might not display the page correctly.
➔ Since we are using the latest <!doctype html> the doctype looks like an empty
doctype tag with an empty html attribute: <!doctype html>
➔ Attributes provide additional information to tags.

BUILDING BUTTONS:
★ With buttons, programs can change web pages based on user behavior.
★ If we want buttons to stack on top of each other, use<br>.

CREATING LINKS:
★ We use <a> and </a> to start creating a link.
★ <a> stands for anchor tag.
★ To link the text to the webpage, we add href=”” along with a uniform resource
locator (URL)
★ href is short for hypertext reference.
★ Href is an attribute. All attributes have two things in common. They provide info
and they go inside the opening tag. Attributes are added after the name of the tag
and before the > closing sign. We link a webpage using the “=” sign.
Eg: <a href=”https://getmimo.com”>Learn to code</a>

ADDING IMAGES:
➢ To add images to a webpage, we start with the <img> tag.<img> is also an
empty tag.
➢ To display an image, an image tag needs the src attribute. Src stands for
source.
➢ We set images with an”=” sign and the image’s address between double
quotes. Eg: <img src=”https….”
➢ We can use attributes to change the size of images.
➢ Width and height attributes use pixels as the default unit of measurement.
➢ If we’ve added images in a local folder named image. That means we can
access the images by just typing/image/ before the image name.
CSS (CASCADING STYLE SHEETS) BASICS:
Awesome websites don't only display images and text they have style. to
add style we use style attribute. example:<h1 style=”color:pink;”>flowers by
ana</h1>
● To change how big the text is, we use the font size property.
● We measure elements on a web page with pixels.
● To set the type of font for an element start by adding the font family
property.

USING STYLE TAGS:


● One way to add style to a group of elements is by setting a style for each element.
● we specify which elements to style with the tag selector. select the p tag.
● we then add an opening dress and followed by a closing brace{}
● when we add the opening brace followed by font familyAnd then we create a
CSS rule.
● if we want a style to be applied to the entire page, we can use the body selector.
● to make larger web pages more manageable, we can move our CSS to a style
sheet.
● to include a style sheet in an HTML file we use the link element.
● <link> is an Empty element. it goes inside the <head> element.
● to know what kind of file To include the opening link tag needs the rel attribute
set using rel equal to “stylesheet”.

CSS BASICS - SETTING SIZE AND BORDERS


Border is a property.
● Border radius is a property that rounds the corners of an element if we set
the radius to 10 PX the border curves 10 PX before the corner.
● to make an image a circle reset border radius to half the width of an image.
● selectors and its declaration is a CSS rule.

ADDING PADDING IN ONE LINE


● Any element has four paddings counter clockwise from top to RIGHT to bottom
to left.
● the border radius property with 4 values rounds the corners in a clockwise
direction starting from the top left.
● we can run the top left corner by changing the first value to 50 PX and leaving
the rest as 0.
● to take border radius to explain we can set a corner to the same value as height or
width.
For border radius property: top- left, top- right, bottom- right, bottom- left.

JS BASICS - CREATING VARIABLES

We'll take an in depth look into Javascript, a programming language that powers
dynamic websites and apps.
Dynamic websites need to remember information to display or change. For that,
JavaScript has variables.
Like moving boxes, variables have content and names that tell us what's inside.
We use let, and const to create variables. We'll use both for now and cover the
difference between them later.

Every variable needs a name. Variable names need to be single words and, therefore,
have no spaces.

To create variable names with multiple words, we use camel case. We start with a
lowercase letter and capitalize the additional words.
Variable names can contain numbers, too. Adding numbers is useful with multiple
similar variables. Let's create the variable car1 here.After creating and naming a
variable, we use the = sign to store a value inside it. Like const city = "Chicago".

To finish creating a variable, we put a semicolon, ;, at the end of the line.

The values we've been storing like "Chicago" are strings. Strings are words in double
quotes.
We use const to declare variables whose values are not supposed to change. const is
short for "constant".

If we try to update a value stored in a const variable. We will get an error.

However, we can update let variables with the assign = operator.

To make it obvious that a variable is of type const and shouldn't change, we can
optionally name it with uppercase letters.We cannot use camelCase if we use this
uppercase standard, so we use an uppercase snake_case to name variables with more
than one word.EG:
SPEED_OF_LIGHT
Both let and const are useful variables and we could use them interchangeably.
However, we should try to use const as default.
The order of the instructions matters because the computer follows the instructions
line by line.
Create step1 first, step2 second, and step3 third.
With the special instruction console.log(), we tell the computer to display a value in an
area called the console.
We can use the console.log() instruction as often as we want. The computer displays
every value on a line in the console.
We can use console.log() to display variables like greeting, too.

const greeting = "Hello, World!";


console.log();
When we display variables in the console, their values appear instead of their names. If
we log name here, it'll show its value.

USING VARIABLES
We already saw that let variables, as opposed to const can change and update the
values they store.
Use the = sign to change the value in status from "Watching Netflix" to "Relaxing at the
beach".
Script.js
We can also give variables the values of other variables by setting one variable to the
other.

We can add string values together with a + sign.


Add the values "Followers:" and "55" together.
script.js
"Followers:" "55";
We call adding together string values an expression because it creates a single string
value.
Add the expression between the parentheses of console.log().script.js
There are other kinds of values, too. Like numbers, which have no double quotes
around them.Numbers make it easier to keep track of numeric values. For example, the
number of likes on a Facebook post.
We can create expressions with numbers, too. We add numbers together with the +
sign and subtract them from each other with the - sign.

TRUE OR FALSE
There's a special value that's neither a string or a number: true.
There are no quotes around it, and it's not a numeric value.
true is great for situations like checking if a switch is on or if a feature is enabled.
Display true in the console.A ! sign in front of true makes the expression result in false.
If something is not true, it has to be false.
The ! sign is the negation operator. It turns values into their opposite.

CHECKING NUMBER EQUALITY


We learned how to create and store values, but how do we compare them?
We need to compare numbers in situations like checking a user's entered PIN matches
their saved PIN.
To compare if two numbers are the same, we use the equality operator, ===.
To check if a number isn't equal to another number, we use the inequality operator,
!==. Variables can store the result of equality comparisons, too.We can compare values
with variables and variables with other variables.
Type === to compare the contents of the variables.

HTML INTERMEDIATE:

GATHERING INPUT:
In HTML we use the input element to get all kinds of user input like email, passwords, dates
and more.
● We create input elements using the empty <input> tags.
● the placeholder attribute hints at what a user should type into the field.
● like buttons input elements need a br tag to place one below another.
● the type of attributes specify the type of input example we can hide what type for better
security with Type equal to “password”.
● The default value for type is text.

GROUPING ELEMENTS:
To create a group of elements we surround with <div> and </div> tags.
We call the elements inside other elements as listed elements
There are two types: building list and ordered list.
ordered list: and ordered list displays a list of numbered items.
it is made out of <ol> and </ol> tags.
to add a list items we add text a <li> and </li> tags.
To be ordered correctly the list should be inside <ol>

Unordered lists: it display a list of bulleted items we use the <ul> tag for it
List items can also contain more than just text; they contain images, links.
Linking: we can access local web pages like trail.html by adding / before the file name,
just like with the local name. to keep dot HTML file names easy to read the lowercase
each word and place a hyphen - in between
We place .html together as folders. linking these local web pages we get to create a
website. Web pages linked together are called websites.

SEMANTIC HTML:

We can use time to indicate that a text in our HTML file is a date or time. Notice that
time doesn't change how the text displays.
We can use the address element to make the address of the party venue stand out when
reading the code. address will make the text italic.
We can use the abbr element to show that a piece of text is an abbreviation, like RSVP.
Add the code <abbr>RSVP</abbr>.
Semantic elements can define the intended structure of a web page.We use a header
element to define content at the top of the page, such as a company name. Let's use a
header element instead of a div here.We use the footer element for the content at the
bottom of the page, such as the social media information.

Unlike header and footer, which may contain similar elements across pages, main
defines content specific to the particular web page.
We use the section element to define a group of content with a single theme, like the
contact information on this page.
We use nav to define a group of elements that help users navigate away from the
current page, such as this list of social media links.
index.html

We can indicate that some text is a detailed description by surrounding the entire
content with <details></details>.
This element hides the text with a widget that must be toggled to view/hide again.
index.html
To create a summary, such as our short description of the painting, we use a summary
element inside the details element.To indicate that some text, like The Scream, is an
image caption, we group the image and text between <figure></figure> tags.Then, we
need to place the caption text between figcaption tags.

CSS INTERMEDIATE:

The <span> element is used for applying styles to parts of text.Like with other
elements, we can use the span tag selector to style all <span> tags at the same time.
span
{
color: #0078E6;
}
If there are a lot of different <span> elements on a webpage, we can use ID or class
selectors instead to apply different styles.We can then add different styles to the class
selectors to create more intuitive web pages.
Add the .teaspoon class selector.

Let's learn how to style groups of elements on a webpage with the help of <div>
elements.We can style the group of elements we created, using div as a tag selector.To
improve spacing inside and outside of the group of elements, we can add margins and
padding. Like margin: 20px;.
We learned that HTML uses something called the box model. Thing is, everything in
HTML is considered a box within another box.When we add a <div> element around
other elements, we put a bigger box around other boxes.Because the <div> element has
another element nested inside it, we call it a parent element. The <p> element inside it
is called a child element.If we add another two paragraphs inside the <div> element,
we have three child elements inside one parent element. When we style a parent
element, there are some properties which only affect the parent, like border, padding,
margin.
Let's give the <div> element a border.
But other properties, like color, are transferred to the child elements from their parent.
Set color to brown.When a child element receives a property from its parent, we call
this inheritance.

USING CLASSES FOR LAYOUT:


CSS Classes let us override inherited properties. Here, we can use the throne-successor
CSS class to change only one <p> element's font color.
ADDING COLORS TO HEX VALUES:
We can add colors with a hexadecimal value, also known as a hex value. For example,
black in hex is #000000.Hex values always start with a #.The # is followed by six
characters which are numbers from 0 to 9 or letters from A to F. For example,
#FFFFFF is pure white.With hex values, we're mixing three main colors: red, green,
and blue. Below, code the hex value #FF0000, which is red.Hex values give us access to
over 16 million color combinations. You don't have to remember them, knowing how to
code them is enough

SETTING SIZE WITH PERCENTAGES:


Setting the size of elements using absolute values, like 200px, means they are the exact
same size on any screen.We can size an element relative to its parent using a
percentage. Here, 100% means the image takes up 100% of the width of the body
element.Setting width to 50% takes up half the body element, meaning half the
webpage.Setting the image size to 50% means it will be half of its parent element's
width. That means the image is now 125px wide.

COMBINING MULTIPLE CLASSES:


We can use as many CSS classes as we want to combine styles without touching the
CSS. Add bold as a third CSS class to the same attribute.Multiple CSS classes let us
create combinations of different styles inside our HTML. Add the bold class to the third
paragraph as well.

GROUPING SELECTORS:
Sometimes we want to apply the same properties across multiple elements. Like setting
the same font-family for all buttons and paragraphs.Instead of writing a new rule for
each element, we can use a comma to style <p> and <button> elements using the same
rule.p, button is called a grouping selector since it groups different elements under one
rule.We can add selectors of any type. For example, we can use the .offer class selector
instead of the button selector.
To style elements of the theme CSS class in the same rule, add .theme to the group
selector.

TYPES AND COMPARISONS:

COMPARING NUMBERS:
Greater than, less than symbol concepts.
Less than or equal to greater than or equal to concepts.
COMPARING STRINGS:
To check if a string isn't equal to another string, we use the strict inequality operator,
!==.
Otherwise same concepts like comparing numbers…(===-equality operator)

DISCOVERING TYPES:
The type boolean contains only two values: the special values true and false. (+) is the
joining or adding sign. When joining two variables, we can get different results
depending on their types.
Join the values and take a look at the difference between using + with strings, and with
numbers.

LOGICAL OPERATORS:
The AND operator && returns true only if all the conditions are true.The && operator
will return false if one or more conditions are false. In the code, assign false to the
isSwitchOn variable.
When operands and operators compute a boolean value together, it forms a logical
expression, like isBatteryOn && isSwitchOn.
For such conditions, we use the OR operator ||, which returns true as long as at least
one of the conditions is true.If all the conditions are false, then the || operator returns
false.We know that the NOT operator ! negates a boolean value. That means that it
returns true if a condition is false and vice versa.

HTML ACCESSIBILITY BASICS:


Accessibility is the practice of ensuring websites are accessible to the largest number of
users possible.
Some users may need assistive technologies like screen readers or zooming devices that
need coding support to access content.But accessibility is not only about screen
readers. It also helps users who use different devices or have slow internet connections.
One of the ways to code accessible websites is by using semantic HTML. Let's start
coding!
Generic HTML tags like div and span are containers. However, they don't provide
context. Other tags are meaningful, like h1 , ul or body.
Can you code the meaningful HTML tag to create an unordered list?
Screen readers have to be able to interpret HTML elements to function properly. A
<button> is a better option than this div element.
We'll learn what we can do when we encounter these meaningless containers in future
lessons.
HTML order is important for accessibility. Skipping heading ranks can be confusing, so
we should always order them sequentially.Another key implementation for accessibility
is that webpages must only have one h1 heading.We've seen how keeping our code tidy
and contextualized is a great way to contribute to accessibility.
But we can do more! We can also include relevant HTML tags and attributes to help
improve accessibility.
It's important to use descriptive action calls for buttons and links so that users know
what will happen if they interact with them.
Add appropriate texts to indicate the action of the button and the redirection of the
link.Alternative texts give context to screen readers and provide useful descriptions
when images fail to load. Fill the image's alt attribute.Another helpful attribute is lang.
When we define it correctly in the html tag, it helps screen readers know what language
to use.

WAI-ARIA Accessibility
Now that you know the basics of Accessibility, let's learn about accessibility standards.
WAI-ARIA stands for Web Accessibility Initiative-Accessible Rich Internet
Applications and it's a specification for accessibility standards.

Meeting specific standards helps diverse users access content. As we saw, semantics is
an important standard for accessibility.
However, sometimes we might not be able to use the HTML tags we wanted. Let's learn
what to do in those cases!
Meaningful HTML tags like button or li help screen readers interpret content. But we'll
find code that uses generic elements like div .
In these cases, we can improve accessibility with the role attributes. Add the attribute
role with an empty value.Role attributes provide meaning to the assistive technologies
but don't change anything visually.
They help attach meaning to elements, like this "banner" role that tells the screen
reader it is the header of the page.
role also helps assistive technologies to identify blocks that need to be considered as a
single block.
If we want screen readers to identify these images as a single image, we can assign the
"img" role to the container.
The comment role implies a reaction to some content. Add this role to the div element
to turn Chris' opinion into a comment.
Index.html .The "contentinfo" role indicates that there's a footer at the end of the page.
It contains copyright, contact, or privacy information.

index.html

Additionally, roles can provide further information. The "alert" role warns users about
events or changes in content. Add it to the div element.Sometimes, we include visually
attractive content that might distract screen readers. In these cases, we can use the
aria-hidden attribute.
It'll hide content to assistive technologies, but it will still be visible on the page.
Sometimes, we include visually attractive content that might distract screen readers. In
these cases, we can use the aria-hidden attribute.
It'll hide content to assistive technologies, but it will still be visible on the page.
When screen readers go over elements with the attribute aria-hidden, they won't read
their content to the user.
We must not use aria-hidden in interactive elements, such as buttons or links, because
users won't be able to interact with them.
We need to ensure we are using ARIA roles when we need them.
For instance, this "banner" role is interfering with the real purpose of the ul, which is to
show a list. So we shouldn't code it here.

You might also like