Diving Headfirst into Full-Stack Development: Building My First HTML Website
Part 1: Introduction
I started my full stack web development journey with web development and as a first step, I start HTML.
When I decided to embark on my journey into full-stack development, I knew I had to start at the beginning: HTML. My guide in this journey was Dr. Angela Yu's Full-Stack Web Developer course at Udemy which was recommended to me by my cousin in a Black Friday sale, I now also recommend it to anyone who wants to start Full-Stack Web Development. This course takes me from introduction to intermediate and projects.
Part 2: The Dive Into HTML
My intro to HTML starts with What is HTML? So HTML, short for HyperText Markup Language, is the standard markup language used for creating web pages and applications. It provides a structured way to define the content and structure of a webpage, including text, images, links, headings, tables, forms, and more.
if we look at the first part of HTML(HyperText Markup Language), hypertext, what does that mean?
Well, it refers to the pieces of text which can link to other documents in the website. So these pieces of text are hypertext or hyperlinks, and they are the foundation of how an HTML website works.
So now that we know what hypertext is, what about the other part, the markup language?
In the context of computer programming and web development, "markup" refers to the process of adding tags or annotations to text to define its structure, presentation, or behavior.
and as the next step, I learn about HTML tags like headings elements, Paragraph elements, self-closing elements and a project in which I make a movie ranking site.
[Website Image]
[Movie ranking site] https://19kushagra.github.io/html-portfolio/public/Favourite%20Movie.html
{source code}-
<h1>Best movie according to me</h1>
<h2>My top 3 movies of all-time.</h2>
<hr />
<h2>3 Idiots</h2>
<p>Old is gold.</p>
<h2>RRR</h2>
<p>Really cool historical fantacy.</p>
<h2>Kantara</h2>
<p>All about last scene.</p>
In Intermediate HTML I learn list Elements, Nesting and Indentation, Anchor Elements, Image Elements and a project in which I made a Birthday Invite.
[Website Image]
[Birthday invite site] https://19kushagra.github.io/html-portfolio/public/Birthday%20invite.html
{source code}-
<h1>It's My Birthday!</h1>
<h2>On the 19th December</h2>
<img src="https://raw.githubusercontent.com/appbrewery/webdev/main/birthday-cake3.4.jpeg" alt="Birthday Cake" />
<h3>What to bring:</h3>
<ul>
<li>Baloon (I love baloons)</li>
<li>Cake(I'm really good at eating)</li>
<li>An appetite (There will be lots of food)</li>
</ul>
<h3>This is where you need to go</h3>
<a href="https://www.google.com/maps/@35.7040744,139.5577317,3a,75y,289.6h,87.01t,0.72r/data=!3m6!1e1!3m4!1sgT28ssf0BB2LxZ63JNcL1w!2e0!7i13312!8i6656">Google map link</a>
And in the last Multi-page websites in which I understand Relative file path which was confusing at first but became super easy once I get familiar with . and .. . I also make my first contribution to Github by making a Portfolio website in which I show link and pictures of my previous designed websites.
[Website Image]
[My portfolio site] https://19kushagra.github.io/html-portfolio/
{source code}-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Project</title>
</head>
<body>
<h1>Kushagra Sharma's Portfolio</h1>
<h2>I'm a Web Developer</h2>
<hr />
<h2><a href="./public/Favourite Movie.html">Movie Ranking Project</a></h2>
<img src="./assets/images/movie-ranking.png" alt="Movie Ranking" width="200">
<h2><a href="./public/Birthday invite.html">Birthday invite Project</a></h2>
<img src="./assets/images/birthday-invite.png" alt="Movie Ranking" width="200">
<hr />
<a href="./public/contact.html">Contact Me</a>
<a href="./public/about.html"> About Me</a>
</body>
</html>
Part 3: The Birth of My Website
I make my first capstone Project as a personal website and publish my website using Github. This website makes me use all the knowledge I learn from this course and my second contribution to Github.
[Website Image]
[personal-website] https://19kushagra.github.io/personal-website/
{source code}-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Resume</title>
</head>
<body>
<h3 align="right">Kushagra Sharma </h3>
<img src="./images/MyImg1.jpg" alt="Kushagra Image" width="200" align="left">
<br />
<br />
<br />
<h2 > Hello, I am kushagra</h2>
<p >
Hello, I am Kushagra, an undergraduate who is working on devloping new skills.
</p>
<br><br><br>
<br><br><br>
<h3>Skills I am currently devloping.</h3>
<ul>
<li><a href="https://19kushagra.github.io/html-portfolio/">Web Devlopment</a></li>
<li>Kubernetes</li>
<li><a href="https://leetcode.com/19Kushagra/">Algorithmic Problem-Solving</a></li>
<li><a href="https://hashnode.com/@19kushagra">Writing Blogs</a></li>
</ul>
<br><br><br>
<h3><a href="./contact.html">Contact</a></h3>
<hr />
<footer>
<h6>Designed and developed by Kushagra</h6>
</footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Contact</title>
</head>
<body>
<h3>Contact</h3>
<ul>
<li><a href="https://github.com/19Kushagra">Github</a></li>
<li><a href="https://www.linkedin.com/in/kushagra-sharma-698175259/">Linkden</a></li>
<li><a href="https://twitter.com/Kushagr42089392">Twitter</a></li>
<li>cipher1902@gmail.com</li>
</ul>
</body>
</html>
Part 4: The Road Ahead and Conclusion
Now I will start CSS, using HTML and creating my website was both challenging and exhilarating but publishing in Github was the most fun part. It opened up a whole new world of possibilities for me. I also plan on continually enhancing and updating my website, evolving as a developer with each change.