Part 1: All You Need to Know to Master Web Development With HTML CSS and JavaScript
Tags: webdev, programming, beginners, tutorial
Published: 2023-11-19 10:38:47

# Getting Started with HTML
## Contents
[Introduction to HTML](#intro)
[HTML Tags](#tags)
[Project 1](#p1)
[Project 2](#p2)
[Project 3](#p3)
[Conclusion](#conclude)
[References](#ref)


## Introduction to HTML <a name="intro"></a>
*HTML* (HyperText Markup Language) is the foundation of web pages. It defines the structure and content of a web page, telling browsers how to display text, images, links, and other elements. HTML is a markup language, meaning it uses tags to indicate different parts of a web page. For example, the h1 tag indicates a heading, and the p tag indicates a paragraph.

HTML is used to define the structure and content of a web page: HTML tells browsers how to display text, images, links, and other elements.

## HTML Tags <a name="tags"></a>

### Structure Tags

![HTML Structure Tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdc4j70zob9pifpcxhjl.png)

### Text Formatting Tags

![Text Formatting Tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm0vqclk1lql2u1rombo.png)

### List Tags

![List Tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw8tjuzqza7g5ntlspt0.png)

### Link Tags

![Link Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hct0cdec9fq2zwv3wa3o.png)

### Image Tag

![Image TAg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yrda7ktmmy7rlfbvrca.png)

### Table Tags

![Table Tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk22ni0gl3ygoby5tr06.png)

## Project 1 <a name="p1"></a>
Arsenal Mini-site: Finished Project https://trinket.io/html/6d338a1df2

![Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gh3fvs5w7vb37cozbtl.gif)
Check the published project [here](https://jrshittu-gmail-com.trinket.io/sites/arsenal-mini_site)

Click [here](https://trinket.io/html/daad5e23a7) to create your own

Click on the image below to watch the tutorial video.

{% embed https://youtu.be/jTPCLX7KJjY?si=_v9E7x77CGZAxGfs %}


## Project 2 <a name="p2"></a>
Tell a Story: Finished Project
https://trinket.io/html/227151348e

Click [here](https://trinket.io/embed/html/8083cfebb3) to create your own

Click [here](https://projects.raspberrypi.org/en/projects/tell-a-story) for the step by step instructions to create Project 2

## Project 3 <a name="p3"></a>
Wanted: Finished Project
https://trinket.io/html/75a49f4a76

Click [here](https://trinket.io/embed/html/58318bee1f) to create your own

Click [here](https://projects.raspberrypi.org/en/projects/wanted) for the step-by-step instructions to create Project 3

## Conclusion <a name="conclude"></a>

In conclusion, HTML is a fundamental language for web development, providing the structure and content for web pages. Understanding HTML tags is crucial for creating well-organized and visually appealing websites. The projects presented here serve as practical examples to apply HTML knowledge in real-world scenarios.

Project 1 demonstrates the creation of a mini-site for Arsenal, showcasing how to structure content, use images, and incorporate links. 

Project 2, "Tell a Story," allows for creative expression by using HTML to narrate a story with text and images. 

Lastly, Project 3, "Wanted," provides an interactive and dynamic example that combines HTML and CSS to create a visually appealing wanted poster.

By working on these projects and exploring the associated resources, you can enhance your HTML skills and gain a better understanding of how to create diverse and engaging web content.

## References <a name="ref"></a>

1. [HTML Tutorial - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML)
2. [Trinket - HTML Projects](https://trinket.io/html)
3. [Raspberry Pi Projects](https://projects.raspberrypi.org/en/projects)

**☕ Enjoyed this article? Support my work with a coffee: [https://www.buymeacoffee.com/cqvuesleq](https://www.buymeacoffee.com/cqvuesleq)**

**Also open for technical writing and frontend dev roles!**