# Building My First Multi-Page Website Using HTML Only πŸš€

# Building My First Multi-Page Website Using HTML Only πŸš€

Day 1 of my HTML Learning Series When I started learning HTML, I initially practiced individual tags and small examples. But after learning different concepts, I wanted to understand one important thing: Can I bring everything I learned together into one complete website? So I created an HTML-only multi-page website. No CSS. No JavaScript. Just HTML. πŸ’» This project helped me understand how HTML works when building something closer to a real website. πŸ—οΈ Project Structure My website contains different pages for different sections: Home Introduction About Me Education Skills Projects Media HTML Concepts Contact I connected all these pages using HTML links. For example: Home Introduction About Me Education Skills Projects Media Contact Enter fullscreen mode Exit fullscreen mode This taught me that a website doesn't have to be a single HTML file. Multiple pages can be connected through hyperlinks. 🧱 Using Semantic HTML One of the important things I practiced was semantic HTML. Instead of putting everything inside elements, I used elements that describe the meaning of the content: Welcome to My HTML Website ... Hello! My content goes here. My Projects ... ... Enter fullscreen mode Exit fullscreen mode Some semantic elements I used are: These elements make the structure of a webpage easier to understand. πŸ“ vs I also practiced the difference between and . For example, on my projects page: Expense Tracker A project idea for recording expenses and spending totals. Library Management A project focused on managing books and library records. Enter fullscreen mode Exit fullscreen mode Each project is treated as an individual piece of content, so makes sense here. πŸ–ΌοΈ Images with Alternative Text I added images using the element: Enter fullscreen mode Exit fullscreen mode The alt attribute is important because it provides alternative text when an image cannot be displayed and also helps accessibility. I also practiced and : My learning journey with HTML Enter fullscreen mode Exit fullscreen mode πŸ”— Different Types of Links My project also contains different kinds of links. External link Google Enter fullscreen mode Exit fullscreen mode Email link Email me Enter fullscreen mode Exit fullscreen mode Internal page link About Me Enter fullscreen mode Exit fullscreen mode This helped me understand the difference between navigating inside a website and linking to another website. πŸ“± Basic Mobile-Friendly Setup I included the viewport meta tag in my pages: Enter fullscreen mode Exit fullscreen mode This is important for making the page's layout behave properly on different screen sizes. πŸ” Description Meta Tag On my home page, I also used: Enter fullscreen mode Exit fullscreen mode This was my introduction to the idea that HTML isn't only about visible content. The section also contains important information about a webpage. 🧠 What I Learned Building this project helped me understand HTML more practically. I learned: How multiple HTML pages work together How internal navigation works Why semantic elements are useful How images and links are added How to structure a webpage using meaningful elements The purpose of metadata The importance of alt text How HTML can create a complete website even without CSS or JavaScript πŸš€ What's Next? This project gave me a strong HTML foundation. But the website currently looks very basic because I intentionally built it using HTML only. My next step is to learn CSS and use it to improve: Layout Colors Typography Spacing Flexbox Grid Responsive design This project was not just about writing HTML tags. It was about understanding how those tags work together to create a website. Day 1 complete. βœ… HTML #WebDevelopment #FrontendDevelopment #LearningInPublic #HTML5 #100DaysOfCode

Original Source

Read the full article at Dev →

KhanList aggregates and links to publicly available news content. We do not host full articles from third-party sources. Always verify important information with original sources.