Frontend
101
Sefa Said Deniz
Frontend?
The user interface is the part of a website or application that users interact with directly. It includes all the visuals, design, and interfaces rendered in a web browser.
Parts of Website
How to build website?
Website
Website
HTML
HTML (HyperText Markup Language) is the standard markup language used to create and structure sections, links, and blocks of content on the web.
Definition
HTMLÂ
Syntax
HTMLÂ
Head - Body
<!DOCTYPE html>
<html>
<head>
<title>Simple Html Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This paragraph is a child element of body element</p>
<div>
<p>Here is another paragraph element</p>
</div>
</body>
</html>Hello world
Training 1
HTML Tags
Heading tags
<body>
<h1>Sefa Said Deniz</h1>
<h2>Features</h2>
<h3>Habitat</h3>
<h4>Education</h4>
<h5>Consultant</h5>
<h6>Features</h6>
</body>
HTML Tags
Paragraph
<body>
<h1>Hello World</h1>
<p>This paragraph is a child element of body element</p>
<div>
<p>This paragraph is a child element of body element</p>
</div>
</body>HTML Tags
Division
<body>
<h1>The Brown Bear</h1>
<div>
<h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</div>
<div>
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
</div>
<div>
<h3>Countries with Small Brown Bear Populations</h3>
<div>
<h2>Media</h2>
</div>
</div>
</body>HTML Tags
Image
<body>
<img src="https://frontvalue.nl/frontvalue_white.png" width="450px" height="250px"/>
</body>
HTML Tags
Links
<body>
<a href="https://google.com">Click Here</a> to go google
</body>HTML Tags
Unordered Lists
<body>
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
</body>HTML Tags
Ordered Lists
<body>
<ol>
<li>Preheat the oven to 350 degrees.</li>
<li>Mix whole wheat flour, baking soda, and salt.</li>
<li>Cream the butter, sugar in separate bowl.</li>
<li>Add eggs and vanilla extract to bowl.</li>
</ol>
</body>HTML Tags
Training 2 - Portfolio
CSS
Cascading Style Sheets
Stylesheet language used to describe the presentation of a document written in HTML, including colors, layout, and fonts.
CSS
Selecting Element
<head>
<title>Hello World</title>
<style>
/* class selecting applies elements has class="red" */
.red{
color: red;
}
/* id selecting applies only to id */
#id{
color: blue;
}
/* element selecting applies every p element in document */
p{
color: yellow;
}
</style>
</head><p style="color: red;">Frontend Engineer @FrontValue</p>CSS
Basic Styling
<head>
<title>Hello World</title>
<style>
/* class selecting applies elements has class="red" */
.red{
color: red;
}
/* id selecting applies only to id */
#id{
color: blue;
}
/* element selecting applies every p element in document */
p{
color: yellow;
}
</style>
</head><p style="color: red;">Frontend Engineer @FrontValue</p>Frontend 101
By sefa said
