Front End Developer

The Front-End developer is a specialist in charge of designing the user interface of websites. It
uses information and communication technologies to capture content so that users can make the
most of it. It can turn any website into a global phenomenon.

Introduction
As a Front-End developer you must create graphical interfaces for websites. Their success
depends on you since the number of visits is proportional to the ease of use and the style you
have decided on. In this training you will learn to:

• Take the client's requirements to design the custom website

• Create navigation maps and wireframes that help you with coding
• Code in HTML to organize website elements
• Styling your website with CSS to make it more eye-catching
• Include animations using Javascript
• Make changes to the development to add new functionality
• Maintain the website so that it works for a long time

You can also optimize development time using tools such as:

• Framework. Specialized text editors

Finally, you will be able to evaluate the success or failure of the website at the beginning or
end of its development to propose improvements in all the elements that positively transform the
user experience when browsing the site.

Level 01
Lesson 01
Web design
Create proposals using web design.

Since the first website was created, the need arose to have professionals to design them.

Web design process

Creating and maintaining a website requires the use of a variety of computer tasks, database
management, server management, front-end development, back-end development and graphic
design.

To design a website, follow the following process:

Obtaining customer requirements

Design of the appearance of each of the pages that will compose it

Programming your interface in the web browser

 Design of your database

Programming its functionalities

Rent or purchase the server that will host it, along with the database

Development testing development change management

Your productive administration

End user devices

The website must be adaptable to all devices, computers, cell phones, tablets. Each device
has at least one web browser to view the site, regardless of the operating system it uses, this
makes web design the perfect alternative, initially for multi-platform development.

It is important that you differentiate between a website and a mobile application, since the
former can be run on all devices via an internet browser, and the latter requires specific
development for each operating system to be viewed.

In general, a website is more universal and its design is more complex.

Web development
Learn about the different types of paths involved in web development.

The development of web design is a very important process, since in this, the ideas and
requirements take the final form that the user will experience on the website. The development is
divided into two major processes:

• Front-End Development. This translates the design of the appearance of the website
into the code that will be interpreted by the device, with which the end user will interact,
interprets the client's requirements into development objectives, accommodates the
previously defined content, adds images, audio or video, structures the information,
creates navigation menus, adds links between pages of the same site, adds fonts,
adds color palettes, communicates with the back-end layer. All these activities are
achieved using programming languages, such as HTML 5, CSS 3, Javascript, these
languages together make the website display possible and even attractive to users.

• Back-End Development. The functionalities that the client has on the website are
implemented, for example, if it is an internet sales site, the user has to register on the
site by entering their personal data, classify users by region, accept payments by
internet, have a record of what each user has purchased and more. All of these
functions are performed in other, more powerful programming languages, such as C#,
Java, Python, PHP, and Ruby. Back-end developers generate code that connects to a
database, for example, when you are in an online store and perform a product search,
the back-end code checks the database for the searched products and delivers the
results in the front-end layer so that the user can view it from the same website.
The two types of development require different skills, one is more oriented to programming
logic and databases and the other is oriented to visualization and user interfaces.
 Lesson 02
User interface desing
Take into account best practices for user interface design.

As a front-end developer, you must design the user interface, whether for a web environment
or an application, this must be focused on the user experience and interaction that is achieved
with graphics, pictograms, color combinations and striking symbologies, This way the success of
the website is guaranteed.

User interfaces. The interface design is located in front-end development, which follows the
models:

Designer model. This combines the needs and ideas of the user and the tools available to the
programmer, to design the interactivity of the platform.

User model. It focuses on the behavior of the site, performing usability tests.

From both models, the architect decides what functionalities can be carried out with the
available programming resources.

Principles for interface development

To achieve a successful user interface, follow these principles:

• Anticipation. Anticipating user needs, for example, reduces clicks to reach relevant
content.

• Autonomy. The user must be given a flexible environment so that they quickly learn
how to use the application, for example, it generates several paths to reach the same
content.
• Default values. The default configuration should allow the user to easily explore the
interface, for example, leaving filled examples of web forms.
• Modularity. It makes it easy to grow the platform, for example, create a general site
template that you can rely on when coding all web pages.
Keep in mind that designing your interface following these principles will reduce the
appearance of errors in the following phases of the process.

User experience
Generates an interface based on the user experience.

As a front-end developer, one of your tasks is to support the design of interfaces that meet the
user's needs, making their browsing experience pleasant, and thus visit the website more often,
and even recommend it to other users. .

Importance of user experience

The user interface must be designed taking into account the user experience and interactivity,
since the more visits the site receives, the greater the probability that users will acquire the
products or services that it offers. By having many visits, other companies see the opportunity to
disseminate their services and can hire advertising space on the site, thus generating another
source of income.

Using buttons

On a website, buttons are the main interaction with the user, they allow confirmation actions,
so you must take care of three aspects:

• The shape of the button must be the same throughout the site
• The word that the button contains must be characteristic of the action it will perform
• State change animation, when the user hovers over the button

These aspects must allow the user to handle the page intuitively, even if it is the first time they
visit it. Links are essential on a website, because they allow navigation between its pages. They
can be in the text, in an image, anchored. to a button, among others.

They must have the following characteristics:

• Differentiated from the text

• The status of a link must be anchored to its color

• They must lead to an explanatory text
Use of other interactive elements

There are other interactive elements with which the user can enter information to a website,
the best known are:
• Text area. The user can enter text to give their opinion about the page or frequent
topic.
• Check button. Mark multiple options according to the user's taste.
• Radio button. Mark the most appropriate option for each user.
The forms on a website use these elements for users to register on your page. It is a good way
to know the type of users who visit your page and in this way make changes to your site that
improve the user experience. .

Usability assurance
Promotes the assurance of usability in all web projects.

One of the most important objectives in front-end development is for the user to use and
acquire the services of the website. To do this, you must facilitate the usability of the site, that is,
for the user to understand and use its functionalities almost intuitive, usability is closely linked to
user experience and interface design, for example, a sales website could not be successful if its
purchasing procedure is not easy to follow, quite complex programming mechanisms are involved
in this process , which the front-end designer must simplify for the user.

Usability factors

For usability to be effective, take into account the following key factors:

• The time it takes for a user to learn how to use an interface

• How quickly the user remembers the particular procedures of each function
 • Recognition of key features to use the system in the future
• User assistance in case of problems
• The degree of user satisfaction when they have used the system
In order to measure these factors, usability tests are carried out; if the interface does not pass
these tests, it must be redesigned or optimized.

Usability improvements
To improve the usability of the website:
• The user must know what the website does from the first visit to it
• The information must be organized grouped into navigation menus and emphasizing
main messages.
• The contents must be developed clearly and without confusion
• Graphic design must support the content of the site

An interface designed in usability and how the user thinks is necessary, so that the user can
consult it again, the hierarchy of information is perhaps one of the most important aspects,
knowing that the majority of users do not read all the texts, but rather that skips through the
content until you find what you are looking for.

Level 02
Lesson 01
Front-End Development Process
As a front-end developer you can participate in two complementary aspects of work to create a
website.

Design

If you get involved from the site planning, you should consider the following points:
• Taking client requirements. Translate client needs into design objectives
• Navigation map design. Model the number of web pages the site will require and their
hierarchy.
• Wireframe Design. Determines how the content of each page will be displayed, color
palette, animations, images, among others.

In this stage you will support consulting graphic designers and web experts in the design of the
site. If the navigation map is already designed with the wireframes for each page, your work will
focus on coding the site.

Coding
• Encode the content of each page in HTML5 following the corresponding wireframe.
• It encodes the style of web pages in CSS, using font types, colors, frames and more.
 • It codes in Javascript to add interactivity to each of the pages, using animations and
functionalities, such as communication with databases, information query, generation
of graphs and tables.

• Apply SEO techniques so that the most used web search engines find the website
easily and thus increase visits.
• Manage changes to functionality, pages and content.

By finishing these five steps, the website will be ready. In each step you must ask for the
client's approval to avoid having to work, their feedback is invaluable.

Requirements of the client

Obtains project objectives based on client requirements.

The identification and analysis of the client's requirements requires that you previously
evaluate the problem, so you can formulate recommendations and decide what to do to address
and resolve them according to the available resources and existing conditions.

Definition of the project

The client's requirements will always be the guideline to define the dimension of the website,
generally the following aspects must be defined:

• It will be complementary to another website or developed from scratch.

• What geographic area is it aimed at, districts, states, nationally or globally.
• It will be private, public or open.
• What institution will administer it, for example, universities, the state, companies or
others.
Regardless of these requirements, the client must also be involved in the graphic design of the
site, and will also have to validate the content and the way in which it will be transmitted.

Solution for online sales website

An online sales website must have the following requirements:

• Worldwide
• Open
• Its operational control can be carried out by private companies
• Fully online

In general, these types of sites have slight variations of these requirements and depend
entirely on the technology that the client thinks or can use in its development.

Since the client is involved in the design, it is essential to show him the graphic work and
content of the site, in order to comply with all the requirements. In the event that the client
proposes a pertinent or possible change, this is included in the design. .

You cannot move on to the development part if you do not have the requirements very clear
and approved.
 Navigation maps and wireframes
Supports the creation of navigation maps and wireframes.
The information architecture on a website must necessarily be user-oriented. Whether it is a
website or an application, it must have an understandable structure, simple menus and efficient
navigation.
Interface design
Follow these steps to begin the website information architecture process:
1. Classify the information into categories, in order to create an index of contents, this will be
the beginning of a navigation map.
2. It hierarchizes the content in a global scheme, in such a way that the content is ordered
from most to least relevant, using the previously created index.
3. Whether the site is dynamic or static, design elements that communicate the global
scheme to each content unit of the web page in such a way that the elements are
structured and functional.
4. Finally, the various actions that the user will perform on the website are modeled. In
general, it is a scheme that relates the user to the system interface. Three deliverables are
obtained from this process:
Navigation maps. It is the graphic representation of the organization of content on a platform,
its creation includes:
The design of spaces and plans to communicate information in such a way that the user takes
paths virtually when visiting the site, based on the information, paths are structured that will be of
interest to the user. A good map will graph all the hierarchy and sequence relationships and allow
the team to develop user behavior scenarios.
Wireframes. They are the diagramming of objects, using sketches of each of the screens of
the web page, their objective is to define the content and position of the various objects that make
up the site, in this way the navigation schemes for users are defined. Each professional area of
your work team will look for the following information in wireframes:
Development. This area provides an approach to the functionalities to be programmed on the
website.
Design. It gives you the visual style and user interface that the platform should have.
Project management. Estimate work times and budgets.
Contents. Define where each element will go, what relevance it will have and the appropriate
format.

Interaction Scores. Interaction design on a website or application can make or break a project
if it is not able to respond to the needs of those who browse it. A great tool for interaction design is
the creation of models with visual language, these models are called interaction scores. Each
score works with these layers in mind:

• User actions. Ultimate objective of the user who will access the site.
• Direct contact. Specific elements of the interface with which the user interacts.
• Process. Functions and behavior of the system, to respond to the user
 The scores help each professional to unify their ideas and have a visual reference on how the
platform will look. Based on the scores, the client can give their point of view.

Lesson 02
Web language
Understand front-end development using the language of the web.

In order to do your job, you must know how the Internet works and how you can access a web
page from any computer or mobile device. Every computer system must be unique on the web to
be able to access the Internet, which is why companies that offer Internet service assign unique
and unrepeatable addresses to computers, these addresses are called Internet Protocol (TCP IP),
to access Internet browsers use the World Wide Web (WWW) service, along with the Hypertext
Transfer Protocol (HTTP).

The Internet works under the client-server model, in which all mobile devices or computers are
the clients, and the servers are computers with greater storage and processing capacity that host
web pages, when a computer requests the server to view a page. web, it responds by sending the
web page to the IP address of said computer, through the HTTP Communication Protocol. At this
point the machine only has the web page as a hypertext file, so what the browser does is a
translation of this file resulting in what you see on the browser screen, this file has an HTML
extension which means HTML. Hypertext Tagging, taking into account the above, it is necessary
to create an HTML file, so that when uploaded to a server, users can view it as it was designed.

To create an HTML file

Open a notes blog on your computer and click on File, click on Save as and select all the files,
in Encoding (Below the window) click on UTF-8, giving the file a name with dot HTML extension,
save the file wherever you want.
Since you have a blank HTML file, add information that you want to appear in the browser by
writing the following:
<html>
<head>
<Title>
Proof
</title>
</head>
<body>
</h1>
Hello World
</h1>
</body>
 Save the file, then close the file and double click on it, a browser window that you have defined
by default will appear with the web page you just created.
HTML files have three main parts that are differentiated with three tags:
<html> Indicates the language to be used throughout the file.
<head>…</head> Anything between these two tags will not be displayed on the web page, it
usually contains settings and files that will be used in the code.
<body>…</body> Everything that goes here will be displayed on the web page, the content
goes here. Within <body> most tags are used to accommodate the content, for example inserting
a paragraph of text (<P>…</P>), main heading (<H1>…</H1> tapering down to <H6>…</H6>, is
a tag used to enter titles, the lower the number, the lower the importance of the title). It is
important that you notice that almost all HTML tags have a closure marked by a diagonal like /
and this closure delimits the tag.
HTML is a language of predefined tags and have different functions to accommodate the text
on the website.

Use of links and images in HTML

Relates web pages through the use of links and images in HTML.

When a website is created, the pages that make it up are disaggregated, so you must join
them together using links.

File addresses

To be able to make links between web pages of a site, you must know exactly the address on
the server that hosts them, for example, your website is located in a folder on a server, if the
pages you want to join are on the same level than your main page, you only have to reference the
name of the file, generally, the website pages are divided into classifications according to the topic
whose location will be in other folders within your main folder, to create a link to a page that is
inside a folder, follow this syntax <FolderName>/<FileName>. If the link is in a folder that is within
classification and this in turn is in a main folder, follow this syntax
<FolderName1>/<FolderName2>/<FileName>.

Generation of links on web pages

To create a link on a web page you have to use the following tag <a href=”address”> Text
</a>. Address is the place on the server where the HTML file of the other web page is located and
the Text is the one that is anchored to the link. For example, in the folder of a music site there
must be a genre link within the main page of the site, the Genres page is in the Classification
folder, therefore the Address that must be placed on the label is next
<FolderName1>/<FolderName2>/<FileName>.

All links must be in the Body section of any web page.

It is possible that on the website you make a link to a page that is in a higher folder, for
example, you want to make a link that returns you to the main page from the Genres page, for this
follow this syntax <a href =”../principal.html”>See genres</a>. The colon (“..”) climbs the folder
hierarchy so if your file is very high up, you can use ../../../<FileName>

Insert image into web pages

 The procedure is the same as for the links, what changes is the label, as you can see this label
does not have a closure, this is because the image does not include any type of text, but the
system only inserts the image where you insert it. As you indicate, the treatment with addresses is
the same as with links, only that the type of file will be an image point BMP, point JPG, point PNG,
etc. Test the links to check that they work and are correct, double click on your page so that it
opens in the browser and then carry out the relevant tests.

Insert lists and tables in HTML

Communicate ordered data by inserting lists and tables in HTML.
Adding lists and tables is the most common when creating a web page, and they are also the
most used elements when extracting information from the back-end.
In HTML, there are three types of tags to insert lists:
Sorted list
unordered list
List element, this always goes inside the ordered or unordered list tag
Each type of list must be in the Body and usually inside a tag, for example:
<body>
<h2>AlbumTitle </h2>
<P>
<OL>
<LI> Song01 </LI>
<LI> Song02 </LI>
<LI> Song03 </LI>
</OL>
</P>
</body>
Run the HTML in the browser to see the results.
The following tags are used to create tables within a web page:

• A table is started
• The table is named
• A line is added to the table
• The name of each column in the table is indicated
• Each of the data in the table is added

Tables must always be inside the Body and not necessarily in a paragraph, for example to
insert a table:
Write <table> in the <body>, then write <Caption> and name the table (like “Data”), then close
with </Caption>, add a row with <tr> and then the column names with < th>First name</th>,
<th>Last name</th>, <th>Age</th> and when you are finished close the row with </tr>. Add the
data as you added the column names, only instead of using <th> use <td>, <td>Miguel</td>,
<td>Mendez</td>, <td>27</td >, </tr>, when you have finished filling the table, close the table
with </table> and close the content with </body>.

<body>

<table>

<caption> Data </caption>

<tr>

<th> Name </th>

<th> Last name </th>

<th> Age </th>

</tr>

<tr>

<td> Miguel </td>

<td> Mendez </td>

<td> 27 </td>

</tr>

</table>

</body>

Run the HTML in the browser to see the results.

Websites use lists and tables to organize their information visually.

Structure in HTML
Learn the shape of a website by managing the HTML structure.

It is important that you understand the structure of HTML files, in order to make it easier for the
browser to translate the code into visual elements. In HTML there are different types of versions,
and a browser must identify which version of HTML it should work on, the first tag indicates it, for
example, to work with an HTML5 file, the first tag must say <!DOCTYPE html>, If it does not say
the word DOCTYPE it means that you are working with version 4.01, after the first tag the
</HEAD> tag is placed which integrates the page configuration, here you always have to indicate
the encoding that the file has, for example This reason uses the <META> tag as follows <META
charsat = “UTF-8”>, this refers to the encoding you chose when creating the html file, then there is
the body, where all the information or content is integrated that you want to display on the page,
but generally the body is also divided into different sections. If the body is the container of all the
visible information, it must be classified so that in the future the graphic style is easier to apply,
these new sections are:

The header of the page that can carry the business logo
 • The title or name
• The navigation menu on the site
• The content column on the right side of the page
• Footer that can carry help, contacts, privacy policy and more.
• Thematic group, in which you can build your own sections and each of them, provide a
different visual design.

<BODY>

<HEADER>… </HEADER>

<NAV>… </NAV>

<ASIDE>… </ASIDE>

<FOOTER>...</FOOTER>

<SECTION>… </SECTION>

</BODY>

All these tags are used in web pages, each of these must be displayed as boxes, some
separate and others that contain other boxes, for example the BODY box contains the HEADER,
FOOTER and SECTION boxes, the HEADER box contains another SECTION box, this is
represented in HTML like this:

<BODY>

<HEADER>

<SECTION>

</SECTION>
</HEADER>

</BODY>

One box cannot half contain another, so this type of coding is prohibited.

Now you know the basics of coding HTML and organizing the content of your web page and
thus start building the site.

Video and audio with HTML

Improve the user interface by adding video and audio with HTML.
On many occasions, you will use videos to give more interactivity to the website.
The video tag is very similar to the image tag, only this one does have a closing tag:
Write video in body, write the width of the rectangle that will contain the video with width, write
the height of the rectangle that will contain the video with height, then write src in quotes, add the
address of the video, end the tag with </video>
<BODY>
<VIDEO width=”512” height=”288” src=”videoaddress”>
</VIDEO>
</BODY>
This tag has many attributes like:
Controls. Defines whether the video box will have the Play, Pause, Volume, Indicator Bar
buttons, among others.
Autoplay. Starts the video automatically after loading the web page.
Poster. Add the image of your choice to display when the video is not yet playing.
Width/height. Defines the pixel sides of the rectangle that will contain the video.
SRC. Determine the direction of the video.
Loop. Defines whether the video will restart when it ends.
After applying some attributes to improve the view of the video, this is how the label can look
like:
<BODY>
<VIDEO controls autoplay loop
width=”512” height=”288”
src=”videoaddress.mp4”>
</VIDEO>
</BODY>

It is extremely important to choose a video with an extension compatible with the browser you
want to use, since not all of them support any format, for example, the most common formats for
HTML are: MP4, WEBM, OGG. To avoid compatibility issues with any browser, create all three
formats in the site folder, usually a folder dedicated to videos.

Open the video tag with the attributes you want, open the source tag and add an src attribute,
type type to indicate the extension, repeat the source tag for each format type, close the video
tag:

<VIDEO controls autoplay loop

width=”512” height=”288”>

<source src= “movie.mp4”

Type=”video/mp4”>

<source src= “movie.ogg”

 Type= “video/ogg”>

<source src= “movie.webm”

Type=”video/webm”>

</VIDEO>

In this way, the browser uses the video in the format that is compatible. It is very difficult for a
browser to not be compatible with any of these three formats, so the video will always be
displayed. Adding videos to your web pages is a great idea, since they increase the number of
page visits because they are so eye-catching, it all depends on the website you are building.

Lesson 03
Generate visual style to the website
Improves the user interface by generating visual style to the website.

To present the website to the user, it is not enough to structure the information but to give it a
visual style defined by the graphic design team. To develop the appearance of the website, you
must use the CSS or Cascade Style Sheet language, with this you can configure colors,
backgrounds, font type and size.
The style settings should be in the HTML file, inside the HEAD tag, write the syntax correctly
to add style to each tag:
<hmtl>
<head>
<meta charset=”UTF-8”>
<title>Starbuzz Coffee</title>
<style>
LabelName {Settings}
</style>
</head>

Tags that have this style setting will look different when you view them in the browser:
<hmtl>
<head>
<meta charset=”UTF-8”>
<title>Starbuzz Coffee</title>
<style>
tagname1 {Settings}
 labelname2 {Settings}
</style>
</head>
For example, to change the paragraphs of a web page, in the HEAD of an HTML file type
STYLE, then type P and open a curly brace, type BACKGROUND COLOR: RED; and close the
key, finally close the tag with the STYLE closure:
hmtl>
<head>
<meta charset=”UTF-8”>
<title>Starbuzz Coffee</title>
<style>
P{

background-color: red;

</style>

</head>

Observe in the browser what the paragraphs of the web page look like. There are many style
rules that you can enter in the configuration part to separate them using semicolons.

In very complex pages, the STYLE section may be very extensive, making the HTML code
very difficult to understand, so it is better to separate the CSS part of the HTML file, creating a
CSS file, which is referenced in the HTML.

To create a CSS file, follow these steps:

• Open a notepad and write down all the style rules you need
• Save notepad with CSS dot extension
• Save the file in the same folder as the HTML file
• Write the syntax in the HEAD in the HTML, to differentiate the CSS file

In this way the two files are separated, and the developer simplifies programming by not
having many codes in a single HTML file.

You should always be in communication with the graphic team and attentive to the wireframes,
so that each page of the website has the desired style.

Generate classes in CSS

Increases style flexibility when generating CSS classes.

To add different styles in a single tag of your HTML file, you must learn how to classify them.
In HTML there are two types of classifiers and they are:
 CLASS. It refers to classes

ID. Identifiers

The difference between these is that a class can be referenced by many tags and an ID can
only be referenced by one tag per web page, so that the CSS file understands what it should
style, put selectors like dot (.) class selector, cat (#) identifier selector. The CSS file would be
“.Music”, style rules, “#Classic”, style rules. This way you can add different styles on different tags.

After classifying you can specify which content or tag the style should be applied to. The
following forms of references to selectors are used to style the labels that have the class ROCK,
the P labels with the ROCK class, the label that has the ID ROCK, the P label that has the ID
ROCK.

ID classifiers are used on single tags like HEADER and FOOTER, as opposed to class
classifiers, which are commonly used for tags like P, H1. H2 and ARTICLE.

Now each tag, even if it is repeated in HTML, can have its own style, in this way you have the
configuration versatility to create a website.

Border and margin contours

Arrange information with the use of contours, borders and margins.

Labels that behave like boxes must be placed correctly on the web page; for this, there are
certain configurations. Use the following parameters to position a box:

Padding. The distance of the information from the border.

Border. The line that surrounds the information and depends on the distance of the padding.

Margin. The distance of the edge to a box margin or screen boundaries.

These types of parameters are generally entered in pixels, the screen, depending on its
resolution, is divided into pixels, these generate a characteristic color in RGB, so each pixel is
capable of delivering 16,581,375 colors if your screen is FullHD, has a resolution of 1920 by 1080
pixels which means it has 2,073,600 pixels.

For example, create a class with a black border and a width of 1 pixel, add a 25 pixel outline
with a 30 pixel margin, along with a red background. If this class is referenced by any tag, you will
be able to see the changes to the content in the browser. Keep in mind that the background is
everything that contains the border. If you must put an image in the background, write the syntax
correctly, in case of Since the content must be at the ends, there is the ASIDE tag, which places
everything that is inside it to the right of the screen, for example a list. In an HTML file in BODY,
write a list of objects that are related to the theme of your page, finally close the tag with the
closing ASIDE. All the content will be displayed to the side and you can format it in the CSS file,
adding a class or an identifier to the ASIDE tag. It is important that if you notice that an element is
not next to another element, the margin will always reference the boundaries of the browser
window. To format the HTML using CSS, you must consider that these are tags that contain other
tags and that they can have different configurations, depending on the needs of each page of the
website.

Using pseudo-classes
Generate basic effects with the use of pseudo-classes.

For the interactivity of the website, you must develop pseudo-classes, this makes the content
more attractive and generates more possibilities for the user to frequently visit the site.

Changing labels or elements

To achieve an interactive effect in certain aspects defined by the CSS code, it is necessary to
change the style of the elements on the web page. For example, you have a button defined on the
web page, anchored to a class, when the pointer passes over the button it must change color, this
is called hover and to perform this effect you must anchor the pseudo-class to which is anchored
to the tag, do it as follows:

Write the class identifier, then put a colon and the name of the action, open square brackets
and write the rule, close square brackets, now whenever you hover over the button it will change
color.

Frequent pseudo-classes

There are frequent actions in pseudo-classes, for example, selecting the elements over which
the pointer passes, the input element on which you have clicked with the mouse, a previously
visited link, the links that have not been visited, an active link .

Pseudo-classes are anchored to classes or labels, but if there is no label in the section to
which you want to anchor the pseudo-class, you have to create it with DIV, to do this do the
following:

Write DIV in the BODY, write the class to which you will anchor this tag with CLASS
classname, add the elements to which you want to anchor the class and the pseudo-class, close
the tag with a DIV closure, the CSS creates the pseudo-class.

Now you can add sections and create the style of each of them.

Lesson 04
How to incorporate JavaScript into the website?
Learn how to incorporate JavaScript into your website.

Javascript is a lightweight programming language interpreted by the browser engine, whose

function is to provide dynamism and functionality to the content of a web page. A Javascript file
has the JS extension, to import it into the HTML, you must add the following line to the BODY:
<script type=”text/javascript” src=”./js/principal.js”></script>, it is recommended do it at the end of
the code so that it is not confused with the content. Additionally, the JS file must be within the
same folder where the web page is hosted, in its own folder to provide practicality and order.
There are Javascript libraries or frameworks that facilitate programming in this language, these
exist thanks to object-oriented programming, they are made up of sets of functions and
animations that are easily reusable, the best known example is the JQuery framework, to use it
you must download the JS file from your web pages and import it into the HTML, like any other
Javascript file. Another way to import a file is to use the web address where the JS file is hosted,
this will allow you to have the most updated version of the framework, however, it is subject to its
availability and existence on the website.
In case of using JQuery and other Javascript frameworks together, the line to import JQuery
must come first, since commonly, the other frameworks depend on JQuery, as it is one of the first
to be developed.

Event handler
Create new effects using the event handler.
JavaScript uses event handlers to create friendly ways to interact with web pages. An event
handler is a function that uses a special attribute of HTML tags, its peculiarity is that it can call
functions that are in the JS files that you program. The four most important types of event
attributes depend on the interaction you want to implement, mouse, keyboard, focus, page load.
Mouse events
Depending on the user's action, you can program a function for these actions: click, double
click, place the cursor on an element, remove the cursor from an element, move the cursor over
an element, stop pressing a button. These attributes are often used to provide instructions to the
user or warning prompts to confirm an action.
Keyboard events
To program a keyboard interaction, use the following attributes: press a key and release it,
press a key, stop pressing a key. These attributes are mostly used to give instructions or grab the
user's attention.
Focus events
These events direct the user's attention to certain elements: focus an element, remove focus
from an element. They are used to give instructions and facilitate user activities.
Page Load Events
To perform an action when the page loads or abandons the page, use these attributes on the
BODY and IMG tags: onload, onabandon. They are normally used to load elements that are
heavy for the page such as galleries, videos or animations.
A good practice that will help you preserve order and structure is to separate HTML tags and
functions in Javascript and only call them with the attributes. See the improved example of the
ONLOAD and ONUNLOAD attributes.
Using a combination of these attributes and maintaining good web programming practices, you
can implement improvements in the usability of the website, which will make it more attractive for
its ease of use.

API usage
Generate new functionalities with the use of APIs.
 An API is a programming interface for an application and it facilitates the creation of more
complex functionalities from existing ones, without the need to start from scratch.
APIs serve as a communication bridge between applications and operating systems,
databases, communication protocols, and online platforms.

Geolocation API
When choosing an API, investigate the permissions and requirements to use its methods and
functions on its website. You may need: keys, tokens, registration as a developer. Once you meet
these requirements, do the following:
Create a JS file to perform your own functions using the API
Integrate into your HTML file the line that imports the JS libraries for using the API. In this line
you must make sure that you include the Key or Token that you need to remotely access the API.
Identify the basic structure or constructor of the API function call, usually this is made up of a
function and an object, which you must configure with attributes that depend on your needs, for
example, the object is a map and the attributes the coordinates, this object is also associated with
the HTML element that will contain the map, the DIV with ID “map”, uses an object of type
INFOWINDOWS, to load the information that will be displayed on the map of the coordinates of
your computer, from your IP address.
Analyze using a condition, if the NAVIGATOR object works with your internet browser, if not, it
will send an error message, in the ELSE section.
Use the GETCURRENTPOSITION method, from the GEOLOCATION section of the
NAVIGATOR object, to obtain the coordinates of your pc, and use another function to send a
message in case of error when it cannot find them, in this case as they are Javascript functions, it
is not necessary write an ELSE, but a comma that will relate the complementary functions.
Save the coordinates in a JSON variable, then create a MARKER object to draw your position
on the map with a marker, write the name of the variables that store your data, inside the map
positioning functions.
View your geolocation in the browser, don't forget to accept the request to share position.
By identifying these characteristics, you will be able to adapt to any API, since they are based
on the object-oriented paradigm, use them to highlight your page and improve the user
experience.

Form creation
Obtains information from users through the creation of forms.
When you use Javascript to verify a form, the first thing you should consider are HTML5 event
handlers and tags.
Types of form fields
HTML has tags for form fields that depend on the type of information you want to enter, so use
them:
 Choose the attribute corresponding to the type of information and place it after the equal sign
of the TYPE attribute, observe the types of information that can be displayed: texts, passwords,
selection of several options, selection of a single option, upload a file. In the case of multiple
options, add them as values within the VALUE attributes.
Information processing with Javascript
Javascript uses an array structure to process the information of HTML elements, which already
has a function that automatically saves these elements within an array, for that:
Define a variable that will save the array.
Assigns to the variable the result of the following function
The first element of the array is the first field of the form, each field has an array structure
where its styles, the values of the data it has, and even functions are stored.
This hierarchical structure makes it easier to obtain the information entered by the user to
process them, for example, it does the following:
Identifies the highest hierarchy element FORM
Place a dot to write the name of the element you want to access its attributes, example1.
Place another dot and write the name of the attribute you want to obtain VALUE, to obtain the
value of the data that has been entered.
Print them with the CONSOLE.LOG statement to observe the information entered.
Do this with each element and this way you will obtain the information that the user writes in
your form.

Data verification process

HTML5 tags help you identify each element of the form to capture the information the user
enters, to validate it:
Choose the type of labels based on the information entered.
Use the ONSUBMIT event handler to call a function that will verify that the data entered is
correct when it is sent, in this case it will be the Javascript verify function.
Process the form data by saving it in an array variable, for that use the corresponding one,
define the structure of the verify function as a succession of conditions in which you will verify the
data entered by each field of the form.
Ends the function of a TRUE return variable, to indicate that all fields are correct.
Use the return variable RETURN as an indicator for the function that will upload the
information to the database.
The advantage of using Javascript is its asynchronous functionality, this allows each function
to be executed in parallel, ensuring the verification of the data and consequently its database
storage.
 Level 03
Lesson 01
Changes to front-end development
Improve the website by making changes to front-end development.
When implementing website development, it may have some changes, so you will need to
document them and approve or disapprove them when they impact the development significantly.

Change management

The modifications that the website undergoes must be identified, organized and recorded.
There are four fundamental sources of changes to a development:

• New business or commercial conditions

• New customer needs
• Website reorganization
• Budget constraints
All changes must go through the Change Control Committee, which is made up of the Director,
the Architect and the Administrator of the web project. They must accept or reject the change
taking into account the possibility of executing the new requirement. If they reject the change, they
must propose an alternative or indicate under what circumstances said change is possible.

To execute a modification, the change control committee:

• Evaluate the impact

• Look for alternatives
• Approve the changes
• Adjust the project plan
• Notify interested parties of the change
• Manage the project according to the new plan
Each change must be subject to business communication standards, there must always be a
change request printed or in an electronic file, signed by the person responsible for the developer
to make the corresponding modifications, this request must have:

• Acceptance date
• Project to which it belongs
• Affected module
• Responsible developer
• Description of the change
• Justification for the change
• Change priority
Developer actions

Once the change request arrives, you must do it within the program code, it is recommended
to notify about the adjustment in the comments within the code, mark the beginning of the change
by commenting:
• Acceptance date
 • Project to which it belongs
• Affected module
• Responsible programmer

At the end of any modification, write:

• Project to which it belongs

• Affected module
• Responsible programmer
• End of change

In this way, control is kept of modifications to the project in terms of software and development.

Impact analysis
Assess risks using an impact analysis.
After identifying and classifying the changes on the website, you must carry out an analysis of
the risks it may suffer, this allows you to evaluate the possibilities and consequences of each of
the changes.
Risk analysis methods
There are two methods to determine the risk level of the website:
Qualitative method. In this, decision making is based completely on your judgment, experience
and intuition. It is generally used when the risk is low and a complete analysis is not justified.
Qualitative methodologies are: brainstorming, questionnaire or interviews, group meetings,
judgment. specialists.
Quantitative method. It allows assigning occurrence values to the different identified risks,
using a mathematical risk model; every quantitative method performs a probability analysis.
Risk model
With a calculation structure you can make a representation of reality, in which significant risk
variables are detected, which are measured based on economic variables.
To develop this mathematical model:
Select the probability functions.
Identify the economic variables
Selection of probability functions
Each of the risks that have been identified has a function that defines the probability of its
occurrence. There are these functions:
Triangular. Maximum and minimum values of the probability are known, for example, this
function considers the probability that sales will decrease.
Uniform. The maximum value of the probability is known, for example, risks such as the
probability of professional resignation.
 Discreet. Different possible probability values are known, for example the value of some
currency, such as the peso against the dollar, these functions graph on the risk.
Risk analysis software
Many companies have very precise risk analysis software, which is fed by the information
captured in them. The consideration of this software must be within the budget, if a deeper risk
analysis is required, so that the objectives of the website are not affected, the higher the level of
risk, the more observation and preventive measures must be carried out.

Website maintenance
Use best practices when maintaining the website.
Once the development of the website is done, and a final product has been delivered, you will
have to give it periodic maintenance, either to correct errors or add new functionalities.
Website maintenance objectives
Maintenance is focused on ensuring the operation of the site, to do so, you must consider:

• Bug fixes that arise in production versions

• Incorporation of new functionalities, in order to extend the life cycle of the website.
• Removal of obsolete functions, that is, old versions of some website objects that only
take up memory space.
• Site optimization using more efficient objects, these must be implemented in all site
developments.
All front-end development must be based on adaptability, otherwise a change can cause
serious damage.

Preventive website maintenance

Many of the problems found in a development do not derive from the software itself, but from
the hardware that contains it, for this reason and to avoid adding problems to the development:

• Do not download internet software, music, videos or games.

• Keep your server's antivirus updated.
• Clean and scan the server every six months for viruses.
• Do not open or download email attachments whose sender
don't know
• Check that all your software tools are up to date.
Website maintenance is essential to ensure its life cycle, and the corrections or adaptations
you make will serve to prepare new versions of the website.

Maintenance schedule
Prepare task control by creating a schedule of activities.
 To have better control of your activities, create a schedule, this is a plan of the tasks you are
going to perform during the project in which you determine a specific time for each activity. In a
spreadsheet:

• Open a blank file, write in the cell vertically the objectives you want to achieve with the
strategy and the steps or activities you will carry out to achieve them, do it in a
summary way, since it is only a guide for you. In the horizontal cells write the months
with the weeks that make them up, this will indicate the time periods for each activity,
finally format your table and color the cells according to the tentative duration that
each activity will take.
You can detail your activities as much as you want, the important thing is that you are clear
about the order of the processes, this way you will not forget anything, you will be able to define
your activities and distribute your times, when preparing your schedule you can adjust to the times
decided by the short client , medium or long term or adjust them to your criteria.

Take into account that if the client requests an urgent job, you must budget for the hiring of a
greater number of professionals. If so, you must have full communication with your work team to
determine the times of each professional and send the proposal of the time it will take. carry out
the project.

It is convenient to make a budget for different time periods, for example 1 year, 2 years or 6
months. If your client gives you a deadline, the schedule must adjust to it, and therefore so should
the budget.

Level 04
Lesson 01
On-page SEO
Improve website positioning using on-page SEO techniques.

On-page SEO depends on the construction of the website, that is, the front end developer.

Keywords

Search engines need the developer to find the page more easily, therefore, in HTML there are
keywords, which are words or phrases that make it easier for the engine to search. These are
added in the HEAD of the HTML as follows:

In the HEAD write META and add the NAME attribute with the KEYWORD name in quotes,
add the CONTENT attribute along with the phrases or words you want as keywords, separate
each of the phrases with a comma.

It is important that the keywords refer to your page and that you use no more than six since
the search algorithms also penalize and reduce the rating of your page if they detect that you
used keywords that are not directly related to the topic of the site. Keep in mind that these must
change for each web page that your site has, this is because each web page must offer different
content even if it is from the same site.

Content quality
 The content and its depth is what search engines evaluate the most, for this to be good
content it must meet three elements:

• Coherence. The content must comply with what the site promises, if your page is a
sales page, your content must have products, product descriptions, offers, among
others.
• Emotion. The content must produce a feeling in users and must be in accordance with
the content of your page. For example, if the content is about horror movies, the
feeling it should produce in the user is fear.
• Depth. Your page must have at least H3 tags, otherwise search engines will consider it
irrelevant.
In addition to these elements, your page must be organized pertinently under the golden
triangle. All the relevant or most important information must be within that triangle, so when
encoding the content, orient it from left to right and from top to bottom.

Specialized text editor (Video does not load)

Improve your coding time by using a specialized text editor.

Use of frameworks
Improve the visual style of the website with the use of frameworks.

There are various frameworks or work environments that facilitate coding due to the versatility
of their functionalities. Frameworks are previously programmed files that help in the development
of the website, all you have to do is include them in the HTML file and use their functions and
classes.

Frameworks generally include three types of files:

• css. The predefined styles that you can choose when using the framework.
• TFF. Font letters, files of the different fonts that you can use with the framework.
• JS. Javascript, functionalities or animations that make the web page more interactive
and that were programmed to facilitate their implementation on the page with the
framework.
Generally, frameworks can be focused on the appearance of the website or its functionalities,
for this reason, they can only be found with JS files or combined with it and CSS. There are two
very easy ways to add frameworks to your HTML file:

• By download. Go to the official website of the framework and download it, in your
HTML file, in the HEAD tag, write LINK, then write the file type and its reference, finally
write the file address.
• By reference. Go to the official page of the framework and copy the link, in your HTML
file in the HEAD tag write LINK, then write the type of file and its reference, finally write
the web address that you copied on the official page.
Without a doubt the first way is safer, since you have all the files on your PC or server, the
second is also good, but in case the server that provides the URL of the files closes, the page you
have created will not be able to be displayed.