bsite: www.inovotekacademy.

com

Youtube: i-novotek academy

Whatsapp: +233596038326/+8613051806737

Course link: https://www.udemy.com/course/fullstack-web-development-course-projects-base/?

referralCode=F8C808368D020D5794BD

What is web development?

Web development is the process of creating websites and web applications. It includes
everything from planning and designing to writing code and creating content. Web developers
use a variety of technologies to create websites and web applications. These technologies can be
divided into two main categories: front-end and back-end.

Front-end technologies are used to create the user interface and the user experience. Examples
of front-end technologies include HTML, CSS, and JavaScript. Back-end technologies are used
to power the website or web application. Examples of back-end technologies include PHP, Ruby
on Rails, and Node.js.

How much does it pay as a web developer?

Web developers are in high demand these days, as more and more businesses move their
operations online. But how much do web developers earn?

The answer to this question varies depending on several factors, such as experience, location,
and skillset. In general, Entry-level web developers can expect to earn around $50,000 per year,
while more experienced developers can earn upwards of $100,000 per year. Developers with
specialized skillsets can even earn much more than this.

So if you're considering a career in web development, rest assured that you can earn a good
living doing it. Just how much you'll earn will depend on your skills and experience.

In the United States, the average salary for web developers is $69,430 per year (or $33.22 per
hour). However, salaries can vary widely depending on your experience level, location, and
industry. For example, developers who work in the finance and insurance industries tend to earn
more than those who work in the retail industry. And developers who live in expensive
metropolitan areas like San Francisco or New York City

The requirement to learn web development

If you're ready to start learning web development, there are a few things you should keep in
mind. Here are some tips to help you get started:

1. Choose the Right Language

There are a variety of programming languages that can be used for web development. Some of
the most popular options include HTML, CSS, and JavaScript. When choosing a language to
learn, it's important to consider your own skills and interests. For example, if you're more
interested in design, you may want to focus on CSS. On the other hand, if you're more interested
in functionality, you may want to focus on JavaScript.

2. Find the Right Resources

Once you've chosen a language to learn, it's time to find resources that can help you master it.
There are a variety of resources available online and offline. Some of the best places to look for
resources include online forums, online courses, and books. If possible, try to find resources that
are specific to the language you're trying to learn. This will ensure that you're getting accurate
and up-to-date information.

3. Don't Be Afraid to Ask for Help

One of the most important things to remember when learning web development is that you
shouldn't be afraid to ask for help. If you're having trouble with a particular concept, there's no
shame in asking for assistance from someone who is more experienced. Many experienced
developers are happy to help those who are just starting.

following these tips will help you get started on your journey to becoming a web developer.

Career path in web development

1. Frontend developer

2. Backend Developer
3. Fullstack developer

4. Mobile App Developer

Frontend developer :
A front-end developer is responsible for the design and implementation of the user interface and
front-end logic for a web application. They work closely with backend developers to create a
cohesive experience for users.

Backend developer:
A backend developer is responsible for the server-side of a web application. They work closely
with database administrators to ensure that data is properly stored and accessed. They also work
with front-end developers to ensure that the user interface is correctly integrated with the back-
end functionality.

Fullstack developer:
A full stack developer is a web developer who is comfortable working with both the front-end
and back-end of a web application. They have a deep understanding of how all the pieces of a
web application fit together and can easily switch between different roles as needed.

Mobile App Developer :

A mobile app developer is responsible for the design and development of apps for use on mobile
devices. They work closely with UX designers and other stakeholders to create an app that is
both functional and appealing to users.

What programming languages are used for web development?

Backend programming languages example

• Java,

• Python

• PHP

• Javascript

Frontend programming languages examples:

• HTML
• CSS

JavaScript

Examples of the database type

There are many different types of databases, but some common examples include

• Mongodb

• Oracle

• PostgreSQL

• MySQL

How long will it take to become a web developer?

This question can be difficult to answer because the amount of time it takes to become a web
developer varies depending on a person's level of experience and expertise. Generally speaking,
it takes anywhere from several months to a few years to develop the skills needed to build
websites from scratch. However, if someone already has experience with coding and web
development, they may be able to shorten the learning process.

What are some common challenges to becoming a web developer?

The most common challenge for new web developers is simply learning the ropes. There is a lot
of information and resources out there, and it can be difficult to know where to start. Other
challenges include staying up-to-date with the latest technologies and trends, as well as finding
work that is both interesting and challenging.

GETTING STARTED WITH WEB DEVELOPMENT

• Setting up environment

• Make google chrome your home

• My first website

HTML 101: How To Get Started With Coding

Introduction

HTML is the foundation of the web. It's what helps us create structure and content for our web
pages. If you're new to coding, HTML is a great place to start. In this blog post, we'll give you a
beginner's guide to HTML, including how to create a basic web page and how to add content to
it.

What is HTML?

HTML, or HyperText Markup Language, is the standard markup language used to create web
pages. HTML is used to structure and give content on a web page, and can be used to add
interactive elements like forms, link to external resources, and embed media content. HTML is
written in the form of HTML elements, which consist of tags enclosed in angle brackets.

While HTML is the standard markup language for creating web pages, several other markup
languages can also be used to create web pages, such as XML and SGML. However, HTML is
the most widely used markup language, and all major browsers support it.

Structure of HTML documents

The structure of an HTML website is typically divided into these parts:

• !DOCTYPE

• the head,

• the body,

• the footer.

head
The head contains information about the website, such as the title, metadata, and links to
external resources.

body
The body contains the actual content of the website, such as text, images, and videos.

footer
The footer typically contains contact information, copyright information, and links to other
websites.

!DOCTYPE

The HTML document type declaration, also known as the DOCTYPE, is the first line of code
that is required in every HTML or XHTML document. The DOCTYPE declaration is an
instruction to the web browser about what version of HTML the page is written in. This serves
to ensure that different web browsers will parse the web page in the same way.

All HTML documents must start with a <!DOCTYPE> declaration.

The <!DOCTYPE> declaration is NOT case sensitive.

ASSIGNMENT

• What is HTML?

• What is the full meaning of HTML?

• Name the structure of HTML

• What is the purpose of!DOCTYPE

• Create html website by using

ANATOMY OF HTML ELEMENT

What is an HTML tag?

HTML tags are used to mark up the content of a web page. They are used to structure the
content and to add semantic information. There are a wide variety of HTML tags, each with its
purpose. Some of the most common tags are used to create headings, paragraphs, and lists.
Other tags are used to add images, videos, and other multimedia content.

HTML tags are usually represented by keywords enclosed in angle brackets. For example, the
tag for a paragraph would be <p>, and the tag for the heading would be <h1>. The full list of
HTML tags can be found in the HTML specification.

What is an HTML element?

An HTML element is a building block of an HTML document.

Elements have a start tag and an end tag. The start tag may contain attributes, which are used to
provide additional information about the element. The content of the element is everything
between the start and end tags.

The most common elements are:

- headings (H1, H2, H3, etc.),

- paragraphs (P),

- lists (UL, OL, LI),

- tables (TABLE, TR, TD),

- images (IMG), and

- links (A).

There are various parts of an HTML element which are as follows:

1. Tag

2. Attributes
3. Values

The tag is the most important part of an HTML element. It is used to identify the type of
element. For example, <p> is the tag for a paragraph element.

What is an HTML attribute

An HTML attribute is a specific property of an HTML element. Attributes are meant to modify
HTML elements, and they typically come in the form of key-value pairs. For example, the

`src` attribute of an `<img>` element might have a value that is the URL of an image.

There are a variety of attributes that can be applied to HTML elements, and they can be used to
change the behaviour, appearance, or content of an element. In some cases, attributes can also be
used to provide additional information about an element.

QUIZ

• What is an HTML attribute

• What is an HTML element?

• HTML elements has opening and closing tags /true/false

TEXT EDITORS ALTERNATIVES

What is an IDE?

An IDE, or integrated development environment, is a software application that provides various

tools for software development. These tools can include a code editor, a compiler and debugger,
and a graphical user interface designer. IDEs are typically used to develop applications for a
specific platform, such as Windows, macOS, or Linux.

There are a variety of IDEs available, each with its features and options. Some IDEs are
designed for specific programming languages, while others can be used for developing
applications in any language. When choosing an IDE, it's important to consider your needs and
preferences to find the best environment for your project.

Examples of Online IDEs

• code sandbox

• codepen

• StackBlitz

importance of online IDE?

1. Live preview

2. Prototyping

3. Testing

4. Collaboration

QUIZ

• IDE means an IDE, or integrated development environment is a software application that

provides various tools for software development

• Which of these is an example of an IDE?

• Which of these is not an example of IDE?

• With IDE it comes with a cost but most of them have free plan

HTML 101: HTML Tags

What is an HTML tag?

HTML tags are used to mark up the content of a web page. They are used to structure the
content and to add semantic information

HTML tags are usually represented by keywords enclosed in angle brackets

HTML Comments

HTML comments are used to add notes to your HTML code. These notes are not displayed in
the browser, but they can be very useful for developers who are working on a website.

To add a comment in HTML, you will need to use the <!-- and --> tags. These tags will enclose
the text of your comment and tell the browser to ignore it. For example:

<!-- This is a single line comment -->

You can also add comments that span multiple lines by using the <!--> tags:

<!--

This is a

multi-line

comment

-->

Comments can be placed anywhere in your HTML code, but it is generally good practice to add
them near the relevant code that they are commenting on. This makes it easier for other
developers to understand your code.

html-tags
Types of tags

There are two types of tags

• empty tag or self-closing tag

• closing tags

empty tag or self-closing tag

Some HTML tags do not come in pairs. These are called empty elements or self-closing
elements, and they don't need a closing tag because they don't have any content.

Examples self-closing tag

1. <br> - The <br> element is used to create a line break in HTML.

2. <embed> - It is used to embed multimedia content from other sources on the webpage.

3. <hr> - It creates a produces/horizontal line

4. <img> - Display image

5. <input> -It is used to create an input field where the user can enter data.

6. <link> - The <link> element is used to add external stylesheets to an HTML document.

7. <meta> -The <meta> element can be used to provide various kinds of metadata about a
webpage, such as a page's title, description, and keywords.

8. <source> - It is used to give multiple media of resources for audio, video, and pictures

Example of basic tags in HTML

• Heading tags : <h1> </h1> used for headings

• Paragraph tags: <p> </p> used for paragraphs

• Bold tag: <b> </b>

• Italics tag: <i> </i>

• Anchor link <a></a> used for hyperlinks

• Div Tag:<div> </div>, Used to group block level elements together.

• Span Tag:<span> </span>, Used to group inline elements.

• Text Formatting: <small></small>,<mark> </mark>

• List Tags:<ul>,<ol>,<li>.

List tags

• <ol>It defines an ordered list

• <ul>It defines an unordered list

• <li>It defines an item in a list

• <dl>It defines a description list

• <dt>It defines name or tern in description list

• <dd>It defines description of item in the description list

HTML 101: HTML media

HTML media refers to the images, videos, and audio files that can be embedded in an HTML
document. HTML media can be used to improve the user experience of a website or web
application by adding multimedia content. In this blog post, we'll explore the different HTML
media elements and how they can be used to add images, videos, and audio to a web page.

The different types of HTML media elements are:

<img> - for images

<video> - for videos

<audio> - for audio files

<iframe> - for embedding other websites

HTML media attributes

src - Specifies the URL of the media file

alt - Specifies an alternate text for the media file

height - Specifies the height of the media file

width - Specifies the width of the media file

controls - Specifies that controls should be displayed for the media file

Using HTML media

play video example

<video width="400" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support HTML5 video.

</video>

Display image

<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" height="104" width="142"/>
play video

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

play audio example:

<audio controls>

<source src="song.mp3" type="audio/mpeg">

<source src="song.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

embed youtube videos example

<iframe width="560" height="315" src="https://www.youtube.com/

embed/n9DwoQOuLHI" frameborder="0" allowfullscreen>

</iframe>

HTML 101: HTML Forms tags

What is an HTML form?

HTML Forms are one of the most essential parts of creating a website. They allow users to
interact with the website and submit information. In this article, we will explore the different
HTML Form tags and how to use them.
Basic form tags

<form> This is the most basic tag and is used to create a form.

<input> This tag is used to create input fields where users can enter information.

<textarea> This tag allows for larger amounts of text to be entered.

<button> This tag creates a button that can be clicked to submit the form.

More advanced form tags

<select> This tag creates a drop-down menu of options.

<option> This tag is used within the <select> tag to create individual options.

<label> This tag allows you to label each form input.

HTML 101: HTML table tags

HTML tables are a powerful tool for displaying data. They can be used to organize information
in a way that is easy to understand and visually appealing. In this section, we will explore the
various table tags available in HTML, and how they can be used to create beautiful and
functional tables.

1. Introduction to HTML Tables

2. Why use HTML tables?

3. Basic table tags

4. Advanced table tags

5. Tips for using HTML tables