JCA WD Lesson 09 2019 1558431754 PDF

Lesson # 9
Creating Blog:
Fonts and Media,
Additional Functions
CONTENTS
Web Font Embedding Service . . . . . . . . . . . . . . . . . . . . . . . 3
Applying Fonts for Various Page Elements. . . . . . . . . . . 5
Contact Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Creating a Contact Page . . . . . . . . . . . . . . . . . . . . . . . . . 13
Adding a Map to the Website. . . . . . . . . . . . . . . . . . . . . 15
Creating a Feedback Form. . . . . . . . . . . . . . . . . . . . . . . 17
Creating an Order Form. . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Adding Video to the Site. . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Optimizing Pages for Social Networks. . . . . . . . . . . . . . . 34
Lesson materials are attached to this PDF file.

In order to get access to the materials, open the lesson in Adobe
Acrobat Reader.
Creating Blog: Fonts and Media, Additional Functions
Web Font Embedding

Service
Fonts help style your website and make it stand out. Let's
consider ways of using fonts on a page.
We are going to use Google Fonts (https://fonts.google.
com). Fonts are on the left, and filters that speed up the search
on the right.
For instance, we can select a language to which we will
apply the font, type of font (serif or sans serif), and other
parameters (Figure 1).
Figure 1
Also, Google Fonts allow you to test the font.
3
Lesson # 9
For this, click on the font you like (Figure 2).
Figure 2
Then specify the font size, look at its parameters, and

test the styles (Figure 3).
Figure 3
4
Now you can view various combinations with other

fonts (Figure 4).
Figure 4
Applying Fonts for Various Page

Elements
Link to the project in CodePen:
http://bit.ly/step-webdev-lesson-9-1
Let's add fonts to the website. We will use Barlow Semi
Condensed and Roboto as an example.
Go to the page with fonts and add the first font by
pressing Select This Font (Figure 5).
Figure 5
5
Lesson # 9
Next, go to the list of popular combinations and select

Roboto (Figure 6).
Figure 6
The selected fonts appear at the bottom of the window

(Figure 7).
Figure 7
You can open and configure this list (Figure 8).

If you change your mind, you can delete the selected
fonts in the Embed tab of the Your Selection section.
The Embed Font section gives you the code that you
should add to your project. There are two ways to do this:
Standard and @Import.
The Specify in CSS section describes how you can add
fonts to your project.
6
Figure 8
Go to the Customize tab.
7
Lesson # 9
You can set multiple typefaces for each of the fonts. For
Barlow Semi Condensed set the value 300, 400, 600, and for
Roboto 300, 400, 700 (Figure 9).
Figure 9
It is time to embed fonts in your code!
8
Go back to the Embed tab and select @Import (Figure

10).
Figure 10
Paste the copied code in the CSS block as the first line:
@import url('https://fonts.googleapis.com/css?
family=Barlow+Semi+Condensed:300,400,600|
Roboto:300,400,700');
After you import fonts, you can configure them for

various elements. Apply styles to headers, paragraphs, and
buttons.
9
Lesson # 9
Apply Barlow Semi Condensed and typeface 700 to

headers:
/* Headings */
h1, h2, h3, h4, h5 {
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 700;
}
Set the Roboto font and typeface 400 for paragraphs:

/* Paragraph */
p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
Finally, set the font Barlow Semi Condensed and type-

face 600 for all links and buttons and increase the letter
spacing:
/* Link & Buttons */
a.btn, button {
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 600;
letter-spacing: 2px;
}
10
See how these fonts look on your website!

Let's take a page with the dummy text, headers of various
levels, and buttons (Figure 11).
Figure 11
11
Lesson # 9
Contact Page
Many websites have a contact page. These pages usually
have a feedback form, information about the company,
contacts, and a map if needed.
The contact page helps to get feedbacks: users can
leave an application, opinion, complaints, proposals for
collaboration, etc. (Figure 12 and 13).
Figure 12
12
Figure 13
Creating a Contact Page

Let's proceed with creating a contact page. We will add a
map and a feedback form that the user can fill.
Place the container split into two columns in the main
part of the Contact page. One column will contain a map,
and the second will contain a feedback form.
Divide the page content into two equal parts using the
tag <div class="col-md-6">, after this start working on the
content:

<main class="py-3 mb-3">
13
Lesson # 9
<div class="container">
<div class="row">


<div class="col-md-6">

…
…
</div>


<div class="col-md-6">

…
…
</div>
</div>

</div>

</main>
The main page content inside the <main class="py-3

mb-3">…</main> tag has paddings py-3 and a margin mb-3 so
that this block does not overlap other elements.
14
Adding a Map to the Website

Let's add a map to the Contact page. Place it in the left
part of the window in <div class="col-md-6">…</div>.
First, select the address on the map. Go to Google Maps
(https://www.google.com/maps) and select the location or
address, then press Share (Figure 14).
Figure 14
Now add this map to the page.
15
Lesson # 9
For this, open the item Embed a map, select the map
size, say, Medium, and copy the code by clicking Copy
HTML (Figure 15).
Figure 15
Add a block and insert the generated code:


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1
m12!1m3!1d3022.15270489381!2d-73.98024868453376!3d40.7586
6597932692!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m
2!1s0x89c258fec4f48e93%3A0x1a2ac0c533db6ec2!2sThe+
LEGO+Store!5e0!3m2!1sen!2sua!4v1543332341437"
height="600" style="width: 100%; border:0"
allowfullscreen></iframe>
16
Note how the width and height of the map were changed
<iframe… height="600" style="width: 100%; border:0" …>
</iframe>. The map is displayed in full width now: width:
100%. Our map is responsive now (Figure 16).
Figure 16
Creating a Feedback Form

Moving on to the second block with the feedback form.
We will add headers, contact info, such as email and phone
number, and text fields.
17
Lesson # 9
To design headers, use a special property available in

Bootstrap—display-x. Instead of x specify a number from 1
to 4. This way the text will appear bigger (Figure 17).
<h3 class="display-1">Display 1</h3>
Figure 17
Let's start creating the form. It is in a separate column

and includes text information and fields wherein the user
will be able to enter data.
First, add text using the header and paragraph tags, as
well as icons:

<h2 class="display-3">
Contact me
</h2>
18
<div class="mb-1">
<h4>
<i class="far fa-envelope"></i>
Don't hesitate to contact me
</h4>
</div>
<h5>
Ready for offers and cooperation
</h5>
<p class="text-muted">
Phone: +1 (0) 000 0000 000 <br>
Email: <a href="#">contact@mail.com</a>
</p>
So we created a paragraph and several headers. The code

<i class="far fa-envelope"> adds an icon , and the
paragraph with the contact info <p class=" text-muted">
is grey now text-muted (Figure 18).
Figure 18
19
Lesson # 9
Let's create a feedback form. When you develop this

component, pay attention to the appearance and design
because an inconvenient form that is not working leaves a
negative impression.
Create the form using the <form> tag with all form
components inside. Create an input field (a string where you
can enter your name and email) with the <input> control.
Style this element with the form-control class that contains
main styles of its appearance and field size.
Note that by setting the <input type="text"> attribute,
you create an input field; but if you change it to <input
type="file">, you create an element for file upload (Figure
19).
Figure 19
Create a feedback form as follows:


<form>
<div class="row">

<div class="col-md-6 pb-3">
<input type="text" class="form-control input"
name="name" data-form-field="Name"
placeholder="Your Name" required="">
</div>
20


<input type="tel" class="form-control input"
name="phone" data-form-field="Phone"
placeholder="Phone" required="">
</div>

<input type="email" class="form-control input"
name="email" data-form-field="Email"
placeholder="Email" required="">
</div>

<textarea class="form-control input"
name="message" rows="3" maxlength="6000"
data-form-field="Message" placeholder="Message"
style="resize:none"></textarea>
</div>
<div class="input-group-btn col-md-12">
<button type="submit" class="btn btn-outline-dark
btn-form display-4">Send Message</button>
</div>
</div>
</form>
Now we have input fields added. The Name field is creat-

ed after the comment . The <input> tag creates
a form where the user can enter her name. The type="text"
attribute specifies which data types are to be entered (text,
symbols, numbers). This controls data that the user enters.
This field must display the relevant text like Your Name, and
21
Lesson # 9
the placeholder="Your Name" implements this. Similarly,

create the Phone field (Figure 20).
Figure 20
Repeat the above steps and add the input form for the
email address. The attribute type="email" checks the value
that the user enters in this field (Figure 21).
Figure 21
The feedback form must contain the text field

(). HTML has a special tag for this:
<textarea>. Add this code, and the corresponding block
appears. Put a limit for the maximum number of characters:
maxlength="6000". Also, forbid resizing this field with
style="resize:none" (Figure 22).
Figure 22
22
Now you have a contact page (Figure 23)!
Figure 23
Creating an Order Form

Let's create an form for ordering unique Marvel comics
for our blog.
You can create it based on the contact form by adding a
drop-down menu so that the users could select the item they
like.
23
Lesson # 9
Place this form inside the block and give it a shadow and
rounding:
<div class="row">
<div class="col-md-5 m-4">
<form class="p-3 shadow bg-white rounded">
<h3>Buy Comic Books</h3>
<div class="row">
...
...
<div>
</form>
</div>
</div>
Our block is ready. The form <form class="p-3 shadow

bg-white rounded"> has paddings p-3, shadow, white
background bg-white, and rounded corners.
Let's create the form. First, add fields to input a name,
phone number, and email address for the user (Figure 24):
Figure 24
24
Complete it with the drop-down list of countries and a

box to input an address. You can do this with the <select>
tag and embedded <option> tag. Every <option> tag is a
drop-down item (Figure 25):

<select class="custom-select" id="country"
required="">
<option value="">Country</option>
<option>United States</option>
</select>
</div>

<input type="address" class="form-control input"
name="address" data-form-field="Address"
placeholder="Address" required="">
</div>
Figure 25
25
Lesson # 9
Because this form is designed for ordering comics, create

a drop-down list with the available comic books (Figure 26):

<select class="form-control">
<option>Avengers: Wakanda Wild Side #01</option>
<option>Avengers #01: Brain Games</option>
<option>Ultimate Spider-Man: Spider-Verse #06
</option>
<option>Black Panther Comics</option>
</select>
</div>
Figure 26
Also, add a choice of the payment method (see Figure 27

on page 28):

<h4 class="mb-3">Payment</h4>
<div class="form-check">
26
<input class="form-check-input" type="radio"

name="exampleRadios" id="exampleRadios1"
value="option1" checked>
<label class="form-check-label"
for="exampleRadios1">
Credit card
</label>
</div>
value="option2">
Debit card
</label>
</div>
value="option3">
PayPal
</label>
</div>
<hr>
</div>
27
Lesson # 9
Figure 27
Such forms usually have a checkbox. If the user checks

the label checkbox, she confirms that she has read the
information and allows processing personal data or saving
data for the future orders.

<div class="form-group form-check">
<input type="checkbox" class="form-check-input"
id="exampleCheck1">
for="exampleCheck1">Save this information for
next time</label>
</div>
</div>
The order form looks as in Figure 28.
28
Figure 28
29
Lesson # 9
Adding Video to the Site

The Bootstrap toolkit allows adding videos to the site
and opening them only after clicking the corresponding
button in a separate window.
Let's see how this is implemented through the example
of the video about the LEGO universe. First, open this video
on YouTube and click Share (Figure 29).
Figure 29
30
Then select Embed to embed this video in your website

(Figure 30).
Figure 30
Copy the code by pressing Copy. Note that you should

check the Start at checkbox for this video if you want it to
play from the beginning (Figure 31).
Figure 31
Add a button that opens the modal window. Modal

window opens on top of the main page. Create it with the
<button> tag that is the button that opens. The content that
opens is inside the <div> tags.
31
Lesson # 9
Let's add the button and a link to the video:


<button type="button" class="btn btn-outline-success"
data-toggle="modal" data-target="#modal-1">Batman
Saves Bricksburg</button>

<div id="modal-1" class="modal fade bd-example-modal-
xl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<iframe height="315" src="https://www.
youtube.com/embed/Dl4JcAsf5Vk" frameborder="0"
allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</div>
To create a modal window, the tag <button type=

"button" class="btn btn-outline-success" data-toggle=
"modal" data-target="#modal-1"> must contain the toggle=
"modal" attribute that specifies opening of a moodal window.
Make sure to set the data-target="#modal-1" property that
has an identifier. As you know, the identifier is a unique
value, in this case it is modal-1. This id must be assigned to
the tag that will open on click.
32
The block <div id="modal-1" class="modal fade bd-

example-modal-xl" tabindex="-1" role="dialog" aria-
hidden="true"> has an identifier mentioned above
id="modal-1". Also, the following classes are set for this
element: class="modal fade bd-example-modal-xl". The
fade class makes the window open smoothly. The class
bd-example-modal-xl sets the size of the opened window. It
can be extra large (bd-example-modal-xl), large (bd-example-
modal-lg), or small (bd-example-modal-sm).
After adding video <iframe…>, delete the width attribute,
then it will open to full width on different screens.
So we created several buttons, and each of them is a link
to a specific video (Figure 32).
Figure 32
33
Lesson # 9
Optimizing Pages for Social

Networks
You have probably heard of SEO (search engine opti-
mization). SEO makes the website take top positions in the
search results.
Search results is a page with a list of websites that
correspond to the entered request. For instance, if your
request is Lego, Google will display all websites that mention
Lego. Top search results are websites that the user sees first.
Users often find the information they need on the first
pages (Figure 33).
Figure 33
If your website is on the 10-th or 20-th page, users will

not even see it.
Let's think about how you can optimize your website

and improve its rating (Figure 34).
34
Figure 34
1. Structure the text.

When you create a website, remember that users do not
perceive a linear, unstructured text. Try to structure your
texts, add meaning to them. This will have a positive effect on
the users and the position of your site in the search results. If
necessary, add titles, subtitles, lists, quotes, split the text into
paragraphs, etc. (Figure 35).
Figure 35
35
Lesson # 9
2. Add multimedia.
Multimedia is an important component. Multimedia
elements make your website visually appealing and add
emphasis (Figure 36).
Figure 36
Images, videos, diagrams may be interesting to visitors,

and they will spend more time on your website. This will
also have a positive effect on the search results.
3. Links to external sources.

A good practice is to add links to reputable sources. This
will also have a positive effect on the search results.
But do not overdo them. You should also use only rele-
vant links (Figure 37).
36
Figure 37
4. Optimize images.
When you add images to a page, do not ignore the
alt="" attribute because its content helps search engines to
analyze the image content:
<img src="images/logo-LEGO-white.png" alt="Lego
logo" id="center">
37
Lesson # 9
5. Add social share buttons.

Social networks have become an integral part of search
engine algorithms. Social share buttons that refer to popular
social networks may increase the level of sharing your
content, thus increasing the number of visitors (Figure 38).
Figure 38
6. Improve the loading speed.

It is very important for a website to load quickly. Low
loading speed negatively affects users and the position in
search results. To improve the loading speed, optimize
images and make sure that your hosting is working fine.
38
You can use various online services to check your web-

site for optimization. Some of them are:
■■ Sitechecker (https://sitechecker.pro) (Figure 39).
Figure 39
■■ SEO Web Page Analyzer

(http://www.seowebpageanalyzer.com) (Figure 40).
Figure 40
39
Lesson # 9
Creating Blog: Fonts and Media,
Additional Functions
© 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.

JCA WD Lesson 09 2019 1558431754 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

JCA WD Lesson 09 2019 1558431754 PDF

Caricato da

Copyright:

Formati disponibili

Lesson # 9

Lesson materials are attached to this PDF file.

Web Font Embedding

Also, Google Fonts allow you to test the font.

For this, click on the font you like (Figure 2).

Then specify the font size, look at its parameters, and

Now you can view various combinations with other

Applying Fonts for Various Page

Next, go to the list of popular combinations and select

The selected fonts appear at the bottom of the window

You can open and configure this list (Figure 8).

Go to the Customize tab.

It is time to embed fonts in your code!

Go back to the Embed tab and select @Import (Figure

After you import fonts, you can configure them for

Apply Barlow Semi Condensed and typeface 700 to

Set the Roboto font and typeface 400 for paragraphs:

Finally, set the font Barlow Semi Condensed and type-

See how these fonts look on your website!

Creating a Contact Page

The main page content inside the <main class="py-3

Adding a Map to the Website

Now add this map to the page.

Add a block and insert the generated code:

Creating a Feedback Form

To design headers, use a special property available in

Let's start creating the form. It is in a separate column

So we created a paragraph and several headers. The code

Let's create a feedback form. When you develop this

Create a feedback form as follows:

Now we have input fields added. The Name field is creat-

the placeholder="Your Name" implements this. Similarly,

The feedback form must contain the text field

Now you have a contact page (Figure 23)!

Creating an Order Form

Our block is ready. The form <form class="p-3 shadow

Complete it with the drop-down list of countries and a

Because this form is designed for ordering comics, create

Also, add a choice of the payment method (see Figure 27

<input class="form-check-input" type="radio"

Such forms usually have a checkbox. If the user checks

The order form looks as in Figure 28.

Adding Video to the Site

Then select Embed to embed this video in your website

Copy the code by pressing Copy. Note that you should

Add a button that opens the modal window. Modal

Let's add the button and a link to the video:

To create a modal window, the tag <button type=

The block <div id="modal-1" class="modal fade bd-

Optimizing Pages for Social

If your website is on the 10-th or 20-th page, users will

Let's think about how you can optimize your website

1. Structure the text.

Images, videos, diagrams may be interesting to visitors,

3. Links to external sources.

5. Add social share buttons.

6. Improve the loading speed.

You can use various online services to check your web-

■■ SEO Web Page Analyzer

Potrebbero piacerti anche