Welcome to the exciting world of web development! In this blog post, we will embark on a journey to explore the basics of web development, from HTML to CSS and JavaScript. Get ready to unleash your creativity and bring your ideas to life on the web! 🎉
HTML: Building Blocks of the Web🩻
HTML (Hypertext Markup Language) is the foundation of every web page. It provides the structure and content of a website. Here's a simple HTML code snippet that showcases the basic structure of a web page:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<img src="image.jpg" alt="Image">
<p>Hello, world!</p>
</body>
</html>
In the code above:
<!DOCTYPE html>defines the document type.<html>is the root element of the HTML document.<head>contains meta-information about the page.<title>sets the title of the page.<body>represents the visible content of the page.<h1>is a heading element.<img>displays an image on the page.<p>represents a paragraph of text.
Start by creating an HTML file with the .html extension, and open it in a web browser to see your web page in action!
CSS: Styling the Web👦🏻
CSS (Cascading Style Sheets) allows you to style your web pages and make them visually appealing. Here's an example of CSS code that adds some style to our previous HTML page:
h1 {
color: #ff0000;
font-size: 24px;
}
p {
color: #333333;
font-size: 16px;
}
img {
width: 200px;
height: auto;
border-radius: 50%;
}
In the code above, we target the h1, p, and img elements and apply various styles, such as colour, font size, and image properties. You can either include the CSS code in a <style> tag within the <head> section of your HTML file or link an external CSS file using the <link> tag.
Experiment with different CSS properties and values to customize the look and feel of your web page!
JavaScript: Adding Interactivity🧔🏻
JavaScript brings interactivity and dynamic behaviour to your web pages. It allows you to add functionality, handle user interactions, and manipulate the content of your website. Here's a simple JavaScript code snippet that adds a button to our web page:
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
alert("Hello, World!");
}
</script>
In the code above, we define a JavaScript function myFunction() that displays an alert message when the button is clicked. The onclick attribute attaches the function to the button's click event.
JavaScript code can be placed in the <script> tag within the HTML file, or it can be stored in an external JavaScript file and linked using the <script> tag.
Explore JavaScript's vast capabilities to enhance user interactions and add dynamic features to your web pages!
Building a Basic Portfolio👨🏻💼
Now that you have a solid understanding of HTML, CSS, and JavaScript basics, let's create a simple portfolio page to showcase your skills and projects. Here's a code snippet to get you started:
https://codepen.io/ashutosh7i/pen/qBQjWqX
In the code above, we've created a basic portfolio page with a header, sections for "About Me" and "Projects," and a footer with a link to your GitHub profile. Customize the content, add more sections, and style it according to your preferences using CSS.
Feel free to include additional elements, such as contact information, skills, or social media links, to make your portfolio unique and appealing.
my own Portfolio-
Conclusion
Congratulations on taking your first steps into the exciting world of web development! You've learned the basics of HTML, CSS, and JavaScript, and even built a simple portfolio page to showcase your skills. Keep exploring, practising, and diving deeper into these technologies to become a proficient web developer.
I highly recommend this Repository of mine for web Dev resources-
https://github.com/ashutosh7i/Get_Started_in_WebDev
In future blogs, we will delve into more advanced topics and techniques to help you elevate your web development skills. Stay tuned, and happy coding! 🌟💻🚀
Top comments (0)