Frank Merema

Lead Frontend developer @ FrontValue

Frontend development

What is frontend?

Frontend refers to a website or application that the user interacts with. This can include elements such as buttons, menus, forms, and many more.

Frontend development involves languages such as HTML, CSS, and JavaScript to create the visual and interactive elements of a website or application.

HTML

CSS

JavaScript

So what is backend?

The backend refers to the part of a website or application that runs behind the scenes and is not visible to the user. This includes the server, database, and application logic that handles tasks such as processing user input, storing data, and retrieving data. Also backend development can be done in Javascript these days

JavaScript

PHP

Java

HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language used for creating web pages. It is used to structure content and define the layout and appearance of a web page. HTML uses tags to define elements such as headings, paragraphs, links, and images.

HTML Tutorial on W3Schools

HTML Guide MDN Web Docs

To display the world's most famous "Hello World" on webpage using HTML, you can use the following code:

Basic markup

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

<DOCTYPE html>: It's information to the browser about what document to expect.

Break it down

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Note*: In older documents (HTML 4 or XHTML), the declaration is more complicated because it must refer to a DTD (Document Type Definition).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype MDN Web Docs

<html>: The HTML tag represents the root of a document and is the container for all other HTML elements

Break it down

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

HTML tag MDN Web Docs

<head>: The head tag is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
It's content is not displayed

Break it down

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Head tag MDN Web Docs

<body>: The body tag contains all the contents of the HTML document.

Break it down

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Body tag MDN Web Docs

Note*: There can be only one <body> element in an HTML document

HTML - Elements

What are Elements?

HTML Elements are defined by tags. It begins with a start tag, some content in between, and an end tag. This content can be anything from regular text to other elements.

HTML Elements on W3Schools

HTML Elements MDN Web Docs

HTML Elements

Paragraph

<p>: represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines

<p>
  Some paragraph
</p>

HTML Elements

Headings

<h1-6>: h elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

<h1>This is a headline.</h1>
<h2>This is a headline.</h2>
<h3>This is a headline.</h3>
<h4>This is a headline.</h4>
<h5>This is a headline.</h5>
<h6>This is a headline.</h6>

HTML Elements

Span

<span>: the span element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes.

<p>This is a <span>span</span> element.</p>

HTML Elements

Div

<div>:

<div>
  <p>This is some text.</p>
  <p>This is some more text.</p>
</div>

HTML Elements

Image

<img>: The image tag is used to embed an image in an HTML page, using the src attribute to specify the URL of the image

<img src="image.jpg" alt="An image">

HTML Elements

Button

<button>: The button tag is used to define a clickable button element. It's able to submit / reset forms or behave as button and mostly Javascript will handle the click.

<button type="button">Click Me!</button>

HTML Elements

Ordered List

<ol>: The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. It always is used together with the <li> tag to create ordered lists.

<ol>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ol>

HTML Elements

Unordered List

<ul>: The <ul> tag defines an unordered (bulleted) list. It always is used together with the <li> tag to create unordered lists.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML Elements

Unordered List

<ul>: The <ul> tag defines an unordered (bulleted) list. It always is used together with the <li> tag to create unordered lists.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML Elements

Many more

HTML Element tags on W3Schools

HTML - Inline styling

What is inline styling?

Inline CSS is used to apply a unique style to a single HTML element. The style property contains specific style information for this element.

HTML Elements on W3Schools

HTML Elements MDN Web Docs

HTML Inline styling

<p style="color: red;">
  This text is red.
</p>

<p style="font-family: Arial; font-size: 20px; font-weight: bold;">
  This text is bold and in Arial font with 20px size.
</p>

<p style="background-color: yellow;">
  This text has a yellow background.
</p>

Assignment

Assignment 1

Github repo with assignments