How to build a Website As a fresher
As a fresher, it's a good idea to start with some simple web pages to get familiar with the basics of HTML and CSS. Here are some examples of simple web pages you can create:
Resume/CV page: You can create a web page that showcases your resume/CV. You can include your contact information, work experience, education, skills, and any other relevant information. You can also add links to your social media profiles and portfolio.
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="text-align: center;">John Doe</h1>
<h2 style="text-align: center;">Software Developer</h2>
<hr>
<h3>Personal Information</h3>
<ul>
<li>Name: John Doe</li>
<li>Address: 123 Main Street, Anytown USA 12345</li>
<li>Phone: (123) 456-7890</li>
<li>Email: john.doe@email.com</li>
</ul>
<h3>Skills</h3>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ul>
<h3>Work Experience</h3>
<ul>
<li>
<h4>Software Developer</h4>
<p style="font-style: italic;">ABC Software, Anytown USA</p>
<p style="font-style: italic;">January 2019 - Present</p>
<ul>
<li>Developed and maintained web applications using HTML/CSS, JavaScript, and Python</li>
<li>Collaborated with team members to design and implement new features</li>
<li>Performed code reviews and provided feedback to improve code quality</li>
</ul>
</li>
<li>
<h4>Intern</h4>
<p style="font-style: italic;">XYZ Corporation, Anytown USA</p>
<p style="font-style: italic;">May 2018 - August 2018</p>
<ul>
<li>Assisted senior developers with web application development</li>
<li>Participated in team meetings and code reviews</li>
<li>Learned about the software development lifecycle and best practices</li>
</ul>
</li>
</ul>
<h3>Education</h3>
<ul>
<li>
<h4>Bachelor of Science in Computer Science</h4>
<p style="font-style: italic;">University of Anytown, Anytown USA</p>
<p style="font-style: italic;">Graduated May 2019</p>
</li>
</ul>
</body>
</html>
In this example, we've used inline CSS styles to set the font family, text alignment, and font style of various elements in the page. We've also used HTML tags to create headings, lists, and paragraphs to organize the content. You can customize this code to suit your own resume/CV and style preferences.
Recipe page: You can create a web page that features your favorite recipe. You can include the ingredients, the cooking instructions, and some images of the finished dish. You can also add some tips and variations to make it more interesting.
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Recipe</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="text-align: center;">Spaghetti Carbonara</h1>
<img src="https://www.example.com/spaghetti-carbonara.jpg" alt="Spaghetti Carbonara">
<h2>Ingredients</h2>
<ul>
<li>1 pound spaghetti</li>
<li>6 slices bacon, diced</li>
<li>4 cloves garlic, minced</li>
<li>2 eggs</li>
<li>1 cup grated Parmesan cheese</li>
<li>Salt and black pepper to taste</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Cook spaghetti according to package instructions. Drain and set aside.</li>
<li>In a large skillet, cook bacon until crispy. Add garlic and cook for 1 minute.</li>
<li>In a bowl, whisk together eggs, Parmesan cheese, salt, and pepper.</li>
<li>Add cooked spaghetti to the skillet with the bacon and garlic. Toss until well combined.</li>
<li>Remove skillet from heat and add egg mixture. Toss until well combined and eggs are cooked.</li>
<li>Serve hot, garnished with additional Parmesan cheese and black pepper if desired.</li>
</ol>
</body>
</html>
In this example, we've used inline CSS styles to set the font family and text alignment of various elements in the page. We've also used HTML tags to create headings, images, lists, and paragraphs to organize the content. You can customize this code to suit your own recipe and style preferences.
Travel page: You can create a web page that shares your travel experiences. You can include photos, stories, and recommendations for places to visit, eat, and stay. You can also add a map to show your route and itinerary.
<!DOCTYPE html>
<html>
<head>
<title>My Travel Page</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="text-align: center;">My Favorite Travel Destinations</h1>
<h2 style="text-align: center;">Paris, France</h2>
<img src="https://www.example.com/paris.jpg" alt="Paris, France">
<p>Paris, the city of love and lights, is one of my favorite destinations. From the iconic Eiffel Tower to the quaint cafes and bistros, there's something for everyone in Paris. Be sure to visit the Louvre Museum, Notre-Dame Cathedral, and the Champs-Élysées during your trip.</p>
<h2 style="text-align: center;">Tokyo, Japan</h2>
<img src="https://www.example.com/tokyo.jpg" alt="Tokyo, Japan">
<p>Tokyo, the bustling capital of Japan, is a vibrant and exciting city. With its mix of modern and traditional culture, there's always something new to discover in Tokyo. Visit the Senso-ji Temple, the Meiji Shrine, and the Tsukiji Fish Market during your trip.</p>
<h2 style="text-align: center;">Sydney, Australia</h2>
<img src="https://www.example.com/sydney.jpg" alt="Sydney, Australia">
<p>Sydney, the largest city in Australia, is a beautiful and diverse destination. With its stunning beaches, iconic Opera House, and picturesque harbor, there's no shortage of things to see and do in Sydney. Don't miss the Bondi Beach, the Sydney Harbour Bridge, and the Royal Botanic Garden during your trip.</p>
</body>
</html>
In this example, we've used inline CSS styles to set the font family and text alignment of various elements in the page. We've also used HTML tags to create headings, images, lists, and paragraphs to organize the content. You can customize this code to suit your own recipe and style preferences.
Event page: You can create a web page that promotes an event, such as a concert, festival, or conference. You can include the date, time, location, ticket information, and some images or videos of past events. You can also add a registration form or a countdown timer to create urgency.
<!DOCTYPE html>
<html>
<head>
<title>My Event Page</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="text-align: center;">Upcoming Event: Music Festival</h1>
<img src="https://www.example.com/music-festival.jpg" alt="Music Festival">
<p>Join us for the annual Music Festival, featuring some of the best musicians and bands from around the world. This year's event will take place at the Central Park, and will feature a variety of music genres including rock, pop, country, and jazz.</p>
<h2>Event Details</h2>
<ul>
<li>Date: May 20-22, 2023</li>
<li>Location: Central Park, New York City</li>
<li>Admission: $50 per day</li>
<li>Lineup:</li>
<ul>
<li>Friday: Foo Fighters, Billie Eilish, The Killers</li>
<li>Saturday: Taylor Swift, Maroon 5, Post Malone</li>
<li>Sunday: Ed Sheeran, Coldplay, Ariana Grande</li>
</ul>
</ul>
<h2>Tickets</h2>
<p>Tickets are available for purchase online or at the gate. Buy your tickets now to avoid the lines and guarantee your spot at this unforgettable event!</p>
<a href="https://www.example.com/music-festival-tickets">Buy Tickets</a>
</body>
</html>
In this example, we've used inline CSS styles to set the font family and text alignment of various elements in the page. We've also used HTML tags to create headings, images, lists, and paragraphs to organize the content. You can customize this code to suit your own recipe and style preferences.
About me page: You can create a web page that introduces yourself to the world. You can include a brief bio, some photos, and some fun facts about yourself. You can also add links to your social media profiles and a contact form to make it easy for people to reach out to you.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 style="text-align: center;">About Me</h1>
<img src="https://www.example.com/profile-pic.jpg" alt="Profile Picture" style="display: block; margin: 0 auto;">
<h2>Personal Information</h2>
<ul>
<li>Name: John Doe</li>
<li>Age: 28</li>
<li>Location: New York City, USA</li>
<li>Occupation: Web Developer</li>
</ul>
<h2>Education</h2>
<ul>
<li>Bachelor's Degree in Computer Science, New York University</li>
<li>Master's Degree in Web Development, Stanford University</li>
</ul>
<h2>Skills</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Python</li>
<li>SQL</li>
</ul>
<h2>Interests</h2>
<ul>
<li>Web development</li>
<li>Travel</li>
<li>Photography</li>
<li>Cooking</li>
</ul>
<h2>Contact Me</h2>
<p>Email: john.doe@example.com</p>
<p>Phone: +1 (555) 123-4567</p>
</body>
</html>
In this example, we've used inline CSS styles to set the font family and text alignment of various elements in the page. We've also used HTML tags to create headings, images, lists, and paragraphs to organize the content. You can customize this code to suit your own recipe and style preferences.
These are just a few examples of simple web pages you can create as a fresher. Don't worry too much about making them perfect - the important thing is to get some practice and learn from your mistakes. As you gain more experience, you can start to create more complex and advanced web pages.
0 Comments