Introduction:
Welcome, to the first part of this series. This is an intro into the exciting world of web development! In this blog, we will explore the fundamental concepts and tools that make up the backbone of the web. Get ready to elevate your coding skills and simplify your learning as I share my experiences with you
Setting Up Your Coding Environment
You can't actually learn coding without the necessary tools right?, so let's get ourselves equipped. In learning to code, there are three key things that are needed and they are:
A web browser – I personally recommend Google Chrome, but Firefox or Edge will do just fine. You can download the chrome browser by following the link below.
A text editor - I actually started out with using sublime text and while some tutorials or courses will suggest basic editors like Notepad or TextMate, my recommendation would be to download and setup Visual Studio Code. It's tailored specifically for web development and brimming with features to make our coding experience better and more flexible. You can easily download Visual Studio Code by following the link
Git - A version control system that allows us to save changes to our code. Don't worry about becoming a version control expert just yet, but know that Git is the secret weapon of every web development team. And we'll also use GitHub, the hub of code storage, widely embraced by the web development community. This would help you to showcase the projects you've built to others. You can follow the link below to create an account on github
%[github.com]
HTML: Laying the Foundation of the Web
If you're looking to start out as a web developer then the first step I would suggest is to learn HTML.
HTML, short for HyperText Markup Language, is the cornerstone of web development. It structures and organizes the content on web pages. Imagine your web page as a skeleton – HTML provides the framework upon which the rest of your website is built. Let's dig into some HTML basics!
You start an HTML document with the <!DOCTYPE html> declaration, followed by the <html> tag. Within the <html> tag, we have two essential sections: the <head> and the <body>.
The <head> section contains meta-information about the web page, such as the title, description, and links to external CSS or JavaScript files. For example:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script></head>
<body>
<!-- Content goes here -->
</body>
</html>
<!--This is basically a little setup on how to start a basic webpage from a html document-->
Inside the <body> section, we add content using various HTML tags. For instance:
<h1>Welcome to my website!</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
These tags create headings (<h1> to <h6>), paragraphs (<p>), and lists (<ul> for unordered lists and <ol> for ordered lists).
Make an effort to get comfortable with HTML by practicing its basic tags. As you progress, you'll learn more advanced techniques for enhancing your web pages.
CSS: The Design Wizard of the Web
Next up, let's dive into CSS (Cascading Style Sheets), the star that brings style and life to your web pages. CSS allows you to design and give personality to your web pages making them more aesthetically pleasing and user friendly.
CSS works by selecting a HTML element and specifying the desired styles. You can apply styles either inline, within the HTML tags themselves, or by using external CSS files. It's generally better to use external CSS files, as it keeps your code cleaner and allows for easier maintenance.
For example, to change the color and font size of a heading, you can use CSS like this:
<head>
<style>
h1 {color: blue; font-size: 24px;}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<!-- Rest of the content -->
</body>
In this example, we select the <h1> tag and set its color to blue and font size to 24 pixels.
CSS provides a wide range of styling options, from changing colors, fonts, and spacing to creating complex layouts. Experiment with different CSS properties and selectors to refine your design skills. If you notice, this way isn't the best when it comes to writing css and like i said before it is better to use an external CSS file to write css.
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
<link rel="stylesheet" href="styles.css">
</head>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
What do you think, doesn't this look better? and it would also help you debug effectively too.
JavaScript: Adding Interactivity to your Sites
Making websites would be incomplete with javascript, the secret ingredient that brings interactivity and functionality to your web pages. JavaScript empowers your website with dynamic elements like responsive menus, form validation, and cool animations.
To get started with JavaScript, simply include a <script> tag in your HTML file, either in the <head> or the <body> section. For example:
<script src="script.js"></script>
By using an external JavaScript file, your code becomes more organized and easier to maintain.
With JavaScript, you can perform various actions, such as manipulating HTML elements, handling events, and fetching data from APIs. Here's a simple example that changes the text when a button is clicked:
<button onclick="changeText()">Click me</button>
<p id="text">Hello, world!</p>
<script>
function changeText() {
document.getElementById("text").innerHTML = "Button clicked!";
}
</script>
In this example, the onclick attribute triggers the changeText() function when the button is clicked. The function then selects the element with the id of "text" and changes its content using the innerHTML property.
JavaScript is a powerful language with countless possibilities. As you gain more experience, you'll be able to create interactive web applications that dazzle users with their functionality.
Start your Web Development Journey
Now that you understand the basics of HTML, CSS, and JavaScript, you can start and remember to practice regularly, experiment with different code snippets, and seek out additional resources to deepen your knowledge. The more you dive into the world of web development, the more tools and techniques you'll uncover. Happy coding!
Note: There's so much more to this series and if you enjoyed this read, please do well to leave your comments and subscribe to this newsletter.