HTML

Websites

We know how to make websites, but how can we make good websites?

What is a web page?

CTA
1.9.1 Example Picture from Backlinko

A normal web page have several different disired actions. They want the user to click on different links (CTA). You might want the user to fill out a contact form of make them sign up for a free trial. The same story for blog posts, about pages and so on.

What is a landing page?

A landing page are designed to do a single action, such as making a purchase, filling out a form, signing up for a free trial og entering an email address.
It is called a landing page, because it is a page, where the user 'land' after clicking on a link in a Facebook post, Google Ad, Instagram post og any other traffic source.
The difference from a web page is that a landing page usually have ONE goal and ONE call to action.

How to make a landing page

A landing page have focus on ONE thing.
It could be

Email signup page

A email signup page is a page where you can collect emails in exchange for a ebook, report og newsletter.

email signup page
1.9.2 Example Picture from Backlinko

Sales page

Sales pages are used to sell online courses, one-on-one training, event tickets and so on.

Sales page
1.9.3 Example Picture from Backlinko

Free trial page

The main goal to a free trial page is to get someone into your sign up flow.

Free trial page
1.9.4 Example Picture from Backlinko

Font Awesome

- Wow that is some pretty icons! Did you make it?
No I used Font Awesome
- What is that?
Font Awesome is a font and icon toolkit based on CSS. It helps you make icons on a site in a easy way.
Insert the link in the head of your document

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Example 1.9.5

Find the icon(s) you want and insert the shortcode in your HTML

<i class="fas fa-camera"> </i>
Example 1.9.6

Menu with icons

See the Pen Menu with icons by Dominoeffekten (@dominoeffekten) on CodePen.

Example 1.9.7

Hamburger menu

A hamurger menu is the three horizontal lines you see at the top corner of the screen on apps and responsive websites. Designers call it "hamburger menu". It is the icon which is used to collocate a load of menu options in one slide menu and stow them away.
The first time we saw the hamburger menu was in the 1980's where Norm made it. Nobody belived in the hamburger menu, so nobody used it. When the phone came, did designers find it again, and began to use it.
The hamburger menu is first visible when we go on the phone. When we look at the desktop will we see a normal menu.

hamburger

Many sites use them on there phone version or apps. These companyes are using the hamburger menu:

When do we NOT use it?

We DO NOT use it..

When DO we use it?

We DO use it..

How can we make it?

To make it we are going to use some HTML, CSS and JavaScript.
A hamburger menu can be at the right or left. When you are on the site are you reading it like a F. Therefore have menus been places on the left site. But with smartphone devices, whose screens seem to get bigger every year, it’s more of a stretch for the user to bring their thumb up to the top left of the screen, causing them to have to change their grip. Placing it to the right slightly reduces this physical workload

Pure CSS

See the Pen Hamburger menu - CSS by Dominoeffekten (@dominoeffekten) on CodePen.

Example 1.9.8

HTML,CSS & JavaScript

See the Pen Hamburger menu - CSS & JS by Dominoeffekten (@dominoeffekten) on CodePen.

Example 1.9.9

Dropdown menu

Lets make a dropdown menu

HTML

<header>
<nav class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
<img src="https://images.unsplash.com/photo-1607872337059-c0b5c0afb829?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1770&q=80" alt="">
</div>
</nav>
</header>

CSS

header ul {
list-style-type: none;
margin: 0;
padding: 0;
}

header .dropdown-content img{
width: 300px;
height: auto;
right: 0;
top: 0;
position: absolute;
}

.dropbtn {
background-color: lightblue;
color: black;
padding: 16px;
font-size: 16px;
border: none;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100%;
width: 500px;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: darkblue;
color:white;
}
Example 1.9.10

See the Pen Untitled by Dominoeffekten (@dominoeffekten) on CodePen.

script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">