Lesson # 11

Working on
the Project

CONTENTS
Pagination. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Alerts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Error 404. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Website Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Google Search Console. . . . . . . . . . . . . . . . . . . . . . . . . . 18

Lesson materials are attached to this PDF file.

In order to get access to the materials, open the lesson in Adobe
Acrobat Reader.

2
 Working on the Project

We have learned the basics of HTML, CSS, JS plugins,

and created a blog. Now we can improve the ready
resource by adding new functions and elements.
Let's consider the principles of navigation, alerts, as well
as the creation of 404 error page.

Pagination
Link to the project in CodePen:
http://bit.ly/step-webdev-lesson-11-1
Pagination plays an important role. It allows linking the
general content that occupies several pages.
Bootstrap 4 designs the homepage and adds interlinking
by using the Paginations component. Just imagine what will
happen to your blog after the number of posts reaches dozens
or even hundreds! The homepage will open for too long, and
no one will visit your site. Let's create a page numbering as
in Figure 1.

Figure 1

We will use Bootstrap for Paginations.

3
Lesson # 11

Create a container <nav>, and put the list <ul> in it. Every
list item <li> contains a link to a page:
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas
fa-chevron-left"></i></a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a></li>
<li class="page-item" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#"><i class="fas
fa-chevron-right"></i></a>
</li>
</ul>
</nav>

The aria-label attribute inside the tag <nav aria-

label="..."> has a description of the item.
A special pagination class was added to the list <ul
class="pagination"> to create page numbering. Every list
item <li class="page-item "> can be active or disabled
with the corresponding class.
4
 Working on the Project

As a result, this group of buttons looks as in Figure 2.

Figure 2

However, this component is easy to style with CSS styles.

Let's make the text and borders red:
a.page-link {
border: 1px solid #dc3545;
color: #dc3545;
}

Now, set red background, red border, and white text for
the elements :active and :hover.
/* active, hover */
li.page-item.active .page-link, a.page-
link:active, a.page-link:hover {
background-color: #dc3545;
border: 1px solid #dc3545;
color: #fff;
}

We will elaborate on the disabled element.

5
Lesson # 11

The disabled class is to be set for it. Let's also set color
for borders but make it darker:
/* disabled */
li.page-item.disabled .page-link {
border: 1px solid #e6979e;
color: #e6979e;
}

Finally, set a shadow for a pressed button. Use RGBA

(220, 53, 69, .5) to set the shadow, where .5 sets the
transparency of the color:
/* focus */
li.page-item.focus .page-link, a.page-link:focus {
box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, .5);
}

After this element is styled, the pagination looks com-

pletely different (Figure 3).

Figure 3

6
 Working on the Project

Alerts
Link to the project in CodePen:
http://bit.ly/step-webdev-lesson-11-2
Alerts may appear on a page in different situations, for
instance, to inform a user about a successful action or error.
In Bootstrap, this component is created with the alert
class. You can style this block by making it, say, green alert-
success.
Let's create an alert about the successful completion of
an action and add a title with an icon and text:
<!-- Success alert -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading"><i class="fas fa-check-
circle"></i> Success!</h4>
<p>This alert box indicates a successful or
positive action.</p>
<hr>
<p class="mb-0">Some text there.</p>
</div>

The wrapper tag <div class="alert alert-success"

role="alert"> has the entire text of the alert. And the
heading <h4 class="alert-heading"> has a special class:
alert-heading.

7
Lesson # 11

As you can see (Figure 4), all elements inside this tag
(a title, text, icon, and background) are designed in the same
style.

Figure 4

Warning alerts are created in the same way. They inform

the user about a problem, and this block will be highlighted
in orange. Let's add a link to the block and design it with a
special class alert-link:
<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
<strong><i class="fas fa-exclamation-triangle"></i>
Warning!</strong>A simple warning alert with <a
href="#" class="alert-link">an example link</a>.
Give it a click if you like.
</div>

The warning alert has different colors. Notice the design

of the link in this block. It is different from the standard view
and highlighted in bold (Figure 5).

Figure 5

8
 Working on the Project

Let's create a Danger alert that alerts the user to a critical

error. This block is red because it has to draw attention. Add
the cancel button (a cross). It will allow closing the alert. The
alert-dismissible must complement this block, it adds
extra padding for the button on the right of the screen:
<!-- Danger alert -->
<div class="alert alert-danger alert-dismissible
fade show" role="alert">
<strong><i class="fas fa-exclamation-circle"></i>
Danger!</strong> This alert box indicates a warning
that might need attention.
<button type="button" class="close" data-
dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

The tag <div class="alert alert-danger alert-

dismissible fade show" role="alert"> has the alert-
dismissible class added. The animation of the window
closing is created with the fade class.
This block must have the <button> button. It requires
the attribute data-dismiss="alert". Design the button in
the shape of a cross.
You can find many symbols at w3 (https://dev.w3.org/
html5/html-author/charref).

9
Lesson # 11

The cancel sign is specified with special characters

@times; (Figure 6).

Figure 6

This block closes after the button is clicked (Figure 7).

Figure 7

Error 404
Link to the project in CodePen:
http://bit.ly/step-webdev-lesson-11-3
There is nothing worse than an error for visitors! This is
the most annoying thing that a user can see.
And imagine that your visitor tries to go to a page that
you have already deleted, she sees an error and cannot go
10
 Working on the Project

back to your site (Figure 8).

Figure 8

This is unacceptable, especially since this page refers to

the hosting. This is bad because the above page does not carry
any information: no links to your website or information
about how the user ended up here.
Look at how this was implemented on other sites (Figures
9 and 10).

Figure 9

11
Lesson # 11

Figure 10

Now create this for your site. First, develop the 404 page
using the template, as we have done before. We will stick to
the general style of the site: let's leave the header and footer
so that the visitor understands that he is on the right site.
Place an image and the info about why the user is on this
page in the center so that it corresponds to the general style.
It would be nice to add a button with a link to the homepage.
Create the file 404.html in the project folder and, as it
was already mentioned, leave the header and footer. Change
the title:
<title>Error 404</title>

Add an image and text in the main part of the page. Use
columns to split the page content into two equal blocks. Place
the picture in one column, text and the button with a link to
the homepage in the other one.

12
 Working on the Project

Because there is not much content, the page will look

rather compressed, which gives a bad visual. Set the row
height to 600px and center it vertically using the class align-
items-center so that the content is at the equal distance
from header and footer:
<div class="row align-items-center" style="height:
600px;">
<!-- Image -->
<div class="col-md-6">
<img src="img/404.png" class="img-fluid"
width="400" alt="404 error">
</div>
<!-- /col-md-6 -->
<!-- Text -->
<div class="col-md-6">
<h2 class="display-2">UH OH! 404</h2>
<h2>Sorry but the page has not been found</h2>
<div class="py-4">
<a class="btn btn-primary" href="index.html">
Back Home</a>
</div>
</div>
<!-- /col-md-6 -->
</div>
<!-- /row -->

13
Lesson # 11

As a result, we created an error page. Notice that it has a

header, footer, and link to the homepage (Figure 11).

Figure 11

After the page is created, add it to the hosting. For this,

open the htdocs folder and upload the 404.html page. Next,
create the .htaccess file with its rules. For this, select New
File at the bottom of the page (Figure 12).

Figure 12

14
 Working on the Project

Then enter the name .htaccess and click OK to create a

file (Figure 13).

Figure 13

To edit it, click on the drop-down menu and select Edit

(Figure 14).

Figure 14

Enter this string:

ErrorDocument 404 legoadventures.epizy.com/404.html

15
Lesson # 11

But notice that the website address must be the registered

one (Figure 15)!

Figure 15

Let's go back to the root folder on the hosting. It also has

the .htaccess file, but it is closed for editing. You can open it
and look at how the default error pages are designed. Open
the edit file as we did before (Figure 16).

Figure 16

As you can see (Figure 17), it has all error pages (400,
401, and so on). You can take this document as a basis and
customize every page like we did it with the 404 error page.

16
 Working on the Project

Figure 17

Website Optimization
You already know that site optimization is an important
stage (Figure 18). It helps websites take top positions in the
search results, which is cool because more people will visit
your site!

Figure 18

17
Lesson # 11

Google Search Console

There are many optimization tools. Google Search
Console will help you to configure your website for the
Google search engine.
It analyzes and provides statistics about the number of
times that the visitors clicked on the link to your site per day
and month. This way you can track the statistics after you
add a new post or a new section. We can also find out which
query users usually enter that leads them to the website. This
will help you to optimize it better and increase its rating
position. In addition, you will get emails if there are problems
related to the site or pages.
Let's get started!
Open Search Console (https://search.google.com/
search-console/about). All features and the purpose of the
service are described on the start page. The information is
accessible and clear, so read more about it. Click Start Now
to get started (Figure 19).

Figure 19

18
 Working on the Project

After this. you should enter your Google Account login

and password. If you do not have an account, click Create
account and register. It does not take much time.
So, enter your account data and click Next (Figure 20).
Then the system will offer you to enter a password. After you
are logged in, proceed to the next step.

Figure 20

Now it is time to register your site in Google Search.

Note that the website must be on the hosting, not on your
computer. Enter the full link to your site in the input field.

19
Lesson # 11

Make sure that the link format is http:// or https:// followed

by the website address. Next, click Add Property (Figure 21).

Figure 21

A window with instructions will appear (Figure 22). We

are offered here to verify the website using one of the options.
Use the recommended one: download the file and upload it
to your project folder.
So, follow the instruction described in the previous
window. Open the hosting with your project and go to the
htdocs folder. Add the downloaded file here (Figure 23).
We completed the two first steps according to the
instruction. Now click Verify to complete the verification.
(Figure 22).

20
 Working on the Project

Figure 22

Figure 23

21
Lesson # 11

You will see the Ownership verified window. Open

settings — Go To Property (Figure 24).

Figure 24

Now a tab with all kinds of settings should open. Select

the drop-down menu on the left part of the page and look
at all available options. The Overview tab will display the
current statistics. There will be no information immediately
after the website connection (Figure 25).

Figure 25

22
 Working on the Project

The Performance tab gives detailed statistics of visits

for different time intervals, different pages, countries, and it
allows you to export data to your device as a file (Figure 26).

Figure 26

This is the basic information that you will need to analyze

your site.
Do not forget to visit Google Search Console now and
then to control changes. Check your email every day. If there
is a message about troubles on the site, you can always fix
them quickly.
Visit the statistics page in Google Search Console at
least once a month to monitor the visits. This is how you can
quickly learn about changes on the site, such as an increase
or decrease in clicks.
You can effectively monitor the attendance of every page,
priorities by pages, countries.

23
Lesson # 11

In the Settings, you can learn the verification status and

configure access (Figure 27).

Figure 27

Go to Users and permissions. Here you can configure

permissions and add a new user (Figure 28).

Figure 28

Now you know how to work in Google Search Console

and optimize your website.

24
Lesson # 11
Working on the Project

© STEP IT Academy
www.itstep.org

All rights to protected pictures, audio, and video belong to their authors or legal owners.
Fragments of works are used exclusively in illustration purposes to the extent justified by
the purpose as part of an educational process and for educational purposes in accordance
with Article 1273 Sec. 4 of the Civil Code of the Russian Federation and Articles 21 and 23
of the Law of Ukraine “On Copyright and Related Rights”. The extent and method of cited
works are in conformity with the standards, do not conflict with a normal exploitation of
the work, and do not prejudice the legitimate interests of the authors and rightholders.
Cited fragments of works can be replaced with alternative, non-protected analogs, and
as such correspond the criteria of fair use.
All rights reserved. Any reproduction, in whole or in part, is prohibited. Agreement of the
use of works and their fragments is carried out with the authors and other right owners.
Materials from this document can be used only with resource link.
Liability for unauthorized copying and commercial use of materials is defined according
to the current legislation of Ukraine.