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>
Made with Slides.com