Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shreyamalogi/html-starter-project
"Start coding confidently with Shreya's HTML Starter Project! 🚀✨"
https://github.com/shreyamalogi/html-starter-project
begginer-friendly html resume shreyamalogi-mentorship
Last synced: 26 days ago
JSON representation
"Start coding confidently with Shreya's HTML Starter Project! 🚀✨"
- Host: GitHub
- URL: https://github.com/shreyamalogi/html-starter-project
- Owner: shreyamalogi
- License: mit
- Created: 2020-05-08T23:38:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-22T11:44:05.000Z (about 1 year ago)
- Last Synced: 2024-10-03T19:41:58.006Z (about 1 month ago)
- Topics: begginer-friendly, html, resume, shreyamalogi-mentorship
- Language: HTML
- Homepage: https://shreyamalogi.github.io/HTML-Starter-Project/
- Size: 17.6 KB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shreya's HTML Starter Project 🚀
Welcome to a basic HTML project - "Create your own Personal Webpage"
Crafted and taught by **[Shreya Malogi!](https://github.com/shreyamalogi)** 🌐
[](https://github.com/shreyamalogi/https://github.com/shreyamalogi/HTML-Starter-Project/stargazers)
### Project Details: 💻📅✍️
- **Functionality:** Personal webpage using HTML
- **Tech Stack:** `HTML`
- **Author:** [@shreyamalogi](https://github.com/shreyamalogi/)
- **Year of Project:** 2020
---
# Table of Contents 🚀
1. [Introduction](#shreyas-html-starter-project-)
- [About This Project](#about-this-project-)
- [What You'll Learn](#what-youll-learn-)
- [Why Learn from Shreya](#why-learn-from-shreya-)
- [Getting Started](#getting-started-)
2. [Tags Summary](#tags-summary-)
3. [Creating Shreya's Personal Site Project](#creating-shreyas-personal-site-project)
- [Step 1: Adding Shreya's Introduction](#step-1-adding-shreyas-introduction-)
- [Step 2: Education Section](#step-2-education-section-)
- [Step 3: Hobbies Section](#step-3-hobbies-section-)
- [Step 4: Skills Section](#step-4-skills-section-)
- [Step 5: Extracurriculars Section](#step-5-extracurriculars-section-)
- [Step 6: Titles and Honors Section](#step-6-titles-and-honors-section-)
- [Step 7: Contact Details](#step-7-contact-details-%EF%B8%8F)
- [Step 8: Connect with Shreya](#step-8-connect-with-shreya-)
- [Step 9: Copyright](#step-9-copyright-%EF%B8%8F)
- [Step 10: Upload and Deploy to GitHub](#step-10-upload-and-deploy-to-github-)
## About This Project 📜
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.
## What You'll Learn 🧠
- **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.
## Why Learn from Shreya? 🌟
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.
## Getting Started 🚦
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! 🌐🚀
## Tags summary 💻
Here's an explanation of each HTML tag used in Shreya's Personal Site project :
| Tag | Description |
|---------------------|-------------------------------------------------------------------------------------------------------|
| `` | Declares the HTML version being used, HTML5 in this case. |
| `` | Defines the root element of the HTML document. The `lang` attribute indicates the language (English). |
| `` | Contains meta-information about the HTML document. |
| `` | Sets the character encoding to UTF-8 for the document. |
| `` | Defines the title of the HTML document. |
| `` | Contains the content of the HTML document. |
| `![]()
` | Embeds an image in the document. The `src` attribute specifies the image file, `alt` for accessibility.|
| `
`, ``, `` | Define headings of different levels. `` is the main heading. |
| `
` | Represents a paragraph of text. |
| `` | Emphasizes text, usually rendered in italics. |
| `
` | Inserts a line break within text. |
| `
` | Represents a horizontal rule for visual separation. |
| `` | Defines a table. Contains rows (``), headers (``), or data cells (``). |
| ``, `` | Groups header and body content in a table. |
| `` | Defines a header cell in a table. |
| `` | Represents a table row. Contains `` or `` elements. |
| `` | Represents a table cell containing data. |
| `` | Defines an ordered list. |
| `- ` | Represents a list item within an ordered or unordered list. |
| `` | Creates a hyperlink. The `href` attribute specifies the destination URL. |
| `` | Defines a division or a section in an HTML document. |
| ``| 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.
# Creating Shreya's Personal Site Project
### Step 1: Adding Shreya's Introduction 📸
```html
Hello, I'm
SHREYA MALOGI 🌈
I am a CS STUDENT, COMPETITIVE PROGRAMMER, and a VERSATILE person 🚀
```
- ``: Inserts an image with the source file "hacker.jpg" and an alternative text "shreya" for accessibility.
- `
` and ``: Headings to display Shreya's name with an emphasis on creativity represented by 🌈.
- `
`: Paragraph tag to present a short description with emojis expressing Shreya's identity and passion.
### Step 2: Education Section 🎓
```html
Education 📚
DATES
PLACES OF STUDY
```
- `
`: Horizontal rule for visual separation.
- ``: Heading for the Education section.
- `
`: Starts a table to organize information.
- ``: Represents the header of the table.
- ``, ``: Table row and header cells for column headings.
- ``: Represents the body of the table where actual data will go.
### Step 3: Hobbies Section 🎭
```html
Hobbies 🎨
```
- `
`: Heading for the Hobbies section
- ``: Ordered list for presenting hobbies in a structured manner.
### Step 4: Skills Section 🚀
```html
Skills 💻
```
- `
`: Heading for the Skills section
- `
`: Starts a table for organizing skills.
- ``: Represents the body of the table.
- ``, ``: Table rows and cells for listing skills.
### Step 5: Extracurriculars Section 🏆
```html
Extracurriculars 🏆
```
- `
`: Heading for the Extracurriculars section.
- ``: Ordered list for listing extracurricular activities.
### Step 6: Titles and Honors Section 🏅
```html
Titles and honors 🏅
```
- `
`: Heading for the Titles and Honors section
- ``: Ordered list for showcasing titles and honors.
### Step 7: Contact Details ☎️
```html
CONTACT DETAILS ☎️
Hyderabad, India 🇮🇳
[email protected] ✉️
```
- `
`: Heading for the Contact Details section with a phone emoji ☎️.
- `
`: Paragraph for displaying location with a flag emoji 🇮🇳.
- ``: Hyperlink for the email address with an envelope emoji ✉️.
### Step 8: Connect with Shreya 🌐
```html
- follow me on INSTAGRAM 📷
- subscribe to my YOUTUBE 🎬 channel"
```
- `
- `: List items for social media links.
- ``: Hyperlinks for Instagram and YouTube with appropriate emojis.
### Step 9: Copyright ©️
```html
"© Copyright 2020, Malogi Shreya html Design. All Rights Reserved. 📆"
```
- Closing statement with a copyright symbol ©️
### Step 10: Upload and Deploy to GitHub 🚀
1. **Create a GitHub Account:**
If you don't have a GitHub account, go to [GitHub](https://github.com/) and sign up for a new account. 🌐
2. **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." 🏗️
3. **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. 📝
4. **Upload Your Project:**
- On your local machine, navigate to your HTML project folder.
- Open a terminal and navigate to your project directory using the `cd` command.
- Run the following commands:
```bash
git init
git add .
git commit -m "Initial commit"
```
🚀
5. **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:
```bash
git remote add origin https://github.com/your-username/html-starter-project.git
git branch -M main
git push -u origin main
```
🔗
6. **Check Your Repository:**
- Refresh your GitHub repository page, and you should see your files uploaded. 🔄
7. **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." 🛠️
8. **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`). 🚀
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! 🌐💻🚀