Welcome to a basic HTML project - "Create your own Personal Webpage"
Crafted and taught by Shreya Malogi! 🌐
- Functionality: Personal webpage using HTML
- Tech Stack:
HTML - Author: @shreyamalogi
- Year of Project: 2020
This HTML project is specially designed for beginners who are eager to embark on their web development journey. Shreya Malogi, a passionate coder and web enthusiast, has curated this project to provide a hands-on experience for those taking their first steps into the world of web development.
- HTML Basics: Understand the fundamentals of HTML, the backbone of web development.
- Structuring Content: Learn how to structure content using headings, paragraphs, lists, and more.
- Adding Media: Explore the inclusion of images and links to enhance your web pages.
- Creating Tables: Dive into the world of tables to organize and present information effectively.
Shreya Malogi, a seasoned coder and competitive programmer, brings her expertise to guide beginners through the essentials of HTML. With a knack for making coding accessible and enjoyable, Shreya ensures that this project serves as a solid foundation for your web development journey.
No prior coding experience required! Simply follow Shreya's instructions, and you'll be coding your own basic HTML project in no time. 🎉
Ready to dive in? Let's code together and unlock the doors to the exciting world of web development!
Happy coding! 🌐🚀
Here's an explanation of each HTML tag used in Shreya's Personal Site project :
| Tag | Description |
|---|---|
<!DOCTYPE html> |
Declares the HTML version being used, HTML5 in this case. |
<html lang="en"> |
Defines the root element of the HTML document. The lang attribute indicates the language (English). |
<head> |
Contains meta-information about the HTML document. |
<meta charset="UTF-8"> |
Sets the character encoding to UTF-8 for the document. |
<title> |
Defines the title of the HTML document. |
<body> |
Contains the content of the HTML document. |
<img> |
Embeds an image in the document. The src attribute specifies the image file, alt for accessibility. |
<h1>, <h2>, <h3> |
Define headings of different levels. <h1> is the main heading. |
<p> |
Represents a paragraph of text. |
<em> |
Emphasizes text, usually rendered in italics. |
<br> |
Inserts a line break within text. |
<hr> |
Represents a horizontal rule for visual separation. |
<table> |
Defines a table. Contains rows (<tr>), headers (<th>), or data cells (<td>). |
<thead>, <tbody> |
Groups header and body content in a table. |
<th> |
Defines a header cell in a table. |
<tr> |
Represents a table row. Contains <th> or <td> elements. |
<td> |
Represents a table cell containing data. |
<ol> |
Defines an ordered list. |
<li> |
Represents a list item within an ordered or unordered list. |
<a> |
Creates a hyperlink. The href attribute specifies the destination URL. |
<div> |
Defines a division or a section in an HTML document. |
<!-- Comment --> |
An HTML comment. Not displayed in the browser but visible in the source code. |
These tags collectively structure and define the content, layout, and interactions on the web page.
<!-- Inside <body> -->
<img src="hacker.jpg" alt="shreya">
<h2>Hello, I'm</h2>
<h1>SHREYA MALOGI 🌈</h1>
<p><em>I am a CS STUDENT, COMPETITIVE PROGRAMMER, and a VERSATILE person 🚀</em></p><img src="hacker.jpg" alt="shreya">: Inserts an image with the source file "hacker.jpg" and an alternative text "shreya" for accessibility.<h2>and<h1>: Headings to display Shreya's name with an emphasis on creativity represented by 🌈.<p>: Paragraph tag to present a short description with emojis expressing Shreya's identity and passion.
<!-- Inside <body> -->
<hr>
<h3>Education 📚</h3>
<table cellspacing="30">
<thead>
<tr>
<th>DATES</th>
<th>PLACES OF STUDY</th>
</tr>
</thead>
<tbody>
<!-- Education details go here 🏫 -->
</tbody>
</table>
<hr><hr>: Horizontal rule for visual separation.<h3>: Heading for the Education section.<table>: Starts a table to organize information.<thead>: Represents the header of the table.<tr>,<th>: Table row and header cells for column headings.<tbody>: Represents the body of the table where actual data will go.
<!-- Inside <body> -->
<h3>Hobbies 🎨</h3>
<ol>
<!-- List of hobbies with links 🎶 -->
</ol>
<hr><h3>: Heading for the Hobbies section<ol>: Ordered list for presenting hobbies in a structured manner.
<!-- Inside <body> -->
<h3>Skills 💻</h3>
<table cellspacing="30">
<!-- Table of skills with ratings ⭐ -->
</table>
<hr><h3>: Heading for the Skills section<table>: Starts a table for organizing skills.<tbody>: Represents the body of the table.<tr>,<td>: Table rows and cells for listing skills.
<!-- Inside <body> -->
<h3>Extracurriculars 🏆</h3>
<ol>
<!-- List of extracurricular activities 🎭 -->
</ol>
<hr><h3>: Heading for the Extracurriculars section.<ol>: Ordered list for listing extracurricular activities.
<!-- Inside <body> -->
<h3>Titles and honors 🏅</h3>
<ol>
<!-- List of titles and honors 🌟 -->
</ol>
<hr><h3>: Heading for the Titles and Honors section<ol>: Ordered list for showcasing titles and honors.
<!-- Inside <body> -->
<h3>CONTACT DETAILS ☎️</h3>
<p>Hyderabad, India 🇮🇳</p>
<a href="mailto:5hre9a@gmail.com">5hre9a@gmail.com ✉️</a>
<br><br><h3>: Heading for the Contact Details section with a phone emoji ☎️.<p>: Paragraph for displaying location with a flag emoji 🇮🇳.<a>: Hyperlink for the email address with an envelope emoji ✉️.
<!-- Inside <body> -->
<li>follow me on <a href="https://instagram.com/5hre9a?igshid=naxmyuxmnm09">INSTAGRAM 📷</a></li>
<li>subscribe to my <a href="https://www.youtube.com/channel/UCZQkssgRd4o2jcxT3c55bbg">YOUTUBE 🎬</a> channel"</li>
<hr><br><br><br><li>: List items for social media links.<a>: Hyperlinks for Instagram and YouTube with appropriate emojis.
<!-- Inside <body> -->
"© Copyright 2020, Malogi Shreya html Design. All Rights Reserved. 📆"
<hr>- Closing statement with a copyright symbol ©️
-
Create a GitHub Account: If you don't have a GitHub account, go to GitHub and sign up for a new account. 🌐
-
Create a New Repository:
- Click on the "+" icon in the top right corner of the GitHub page.
- Select "New Repository" from the dropdown.
- Give your repository a name, for example, "html-starter-project." 🏗️
-
Initialize with a README: You have the option to initialize the repository with a README file. You can choose to do this or leave it empty if you want to add your own README later. 📝
-
Upload Your Project:
- On your local machine, navigate to your HTML project folder.
- Open a terminal and navigate to your project directory using the
cdcommand. - Run the following commands:
git init git add . git commit -m "Initial commit"
🚀
-
Connect to GitHub:
- On the GitHub repository page, you'll see a section titled "…or push an existing repository from the command line." Copy the commands from there and run them in your terminal.
- It typically looks like this:
git remote add origin https://github.com/your-username/html-starter-project.git git branch -M main git push -u origin main
🔗
-
Check Your Repository:
- Refresh your GitHub repository page, and you should see your files uploaded. 🔄
-
Enable GitHub Pages:
- In your GitHub repository, go to the "Settings" tab.
- Scroll down to the "GitHub Pages" section.
- Under "Source," select "main" or "master" branch, depending on your default branch.
- Click "Save." 🛠️
-
Access Your Deployed Site:
- After enabling GitHub Pages, you'll see a link under the "GitHub Pages" section where your site is published (e.g.,
https://your-username.github.io/html-starter-project). 🚀
- After enabling GitHub Pages, you'll see a link under the "GitHub Pages" section where your site is published (e.g.,
Now, your HTML project is uploaded to GitHub, and your site is deployed using GitHub Pages. Share the link with others to showcase your work!
Happy coding and deploying! 🌐💻🚀