Hello everyone,
I’m Daljit Singh, founder of Basic Web. Have you ever wondered how websites work or why they look the way they do? In our digital world, understanding certain web technologies can make a big difference. Let’s dive into five essential technologies that everyone should know, breaking down each one with simple explanations and real-world examples.
1. Have you ever wondered how a website gets its structure?
Imagine you’re building a house. First, you need a blueprint to outline where each room will go and how everything will be arranged. On the web, this blueprint is called HTML (HyperText Markup Language). HTML is like the skeleton of a web page—it defines the structure by using tags to label different parts like headings, paragraphs, and links.
For example, if you want to create a page with a title and a paragraph of text, HTML tells the web browser how to display these elements. It’s simple:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
This code creates a basic page with a title and some text. HTML is fundamental for creating and organizing content on the web.
2. Ever wondered how websites get their style?
Think of CSS (Cascading Style Sheets) like decorating your room. You decide on colors, furniture placement, and how everything looks. Similarly, CSS styles your web page. It controls how things look—like the colors, fonts, and layout.
If you want your webpage to have a blue background and white text, CSS can handle that for you:
body {
background-color: blue;
color: white;
font-family: Arial, sans-serif;
}
This CSS code changes the background color to blue and the text color to white. CSS makes sure your website not only works well but also looks good.
3. Have you ever clicked a button on a website and wondered what happens behind the scenes?
When you click a button and something happens, like a form popping up or an image changing, that’s JavaScript at work. Think of JavaScript like a remote control for your website—it lets you interact with and control what happens on a web page.
For instance, if you click a button to show a hidden message, JavaScript makes that possible:
<button onclick="showMessage()">Click me!</button>
<p id="message" style="display:none;">Hello, here is your message!</p>
<script>
function showMessage() {
document.getElementById("message").style.display = "block";
}
</script>
In this example, clicking the button reveals the hidden message. JavaScript adds interactivity and functionality to your site, making it more engaging.
4. Ever needed to work on a project with friends but worried about overwriting each other’s work?
Imagine you’re all building a big LEGO set together. Git is like a system that helps you keep track of who’s added what to the set, making sure everyone’s pieces fit together perfectly. Git is a version control system that tracks changes in your code, allowing multiple people to work on the same project without conflicts.
For instance, if you’re working on a website with a team, Git helps manage and merge everyone’s changes efficiently:
git init
git add .
git commit -m "Initial commit"
git push origin main
These commands help you start a project, add changes, and save them safely. Platforms like GitHub and GitLab make Git even more powerful by providing tools for collaboration.
5. Have you ever heard of hackers and wondered how to stay safe online?
Just like locking your house to keep it safe, knowing basic cybersecurity practices helps protect your online information. Basic cybersecurity involves understanding how to keep your data secure, recognizing suspicious activities, and using encryption.
For example, using HTTPS instead of HTTP means your data is encrypted and secure:
<a href="https://www.example.com">Secure Link</a>
This simple switch helps ensure that your personal information stays private and safe from prying eyes.
Conclusion
By understanding these five web technologies—HTML, CSS, JavaScript, Git, and basic cybersecurity—you’ll be better equipped to create, style, and protect your online presence. If you are overwhelmed and not able to comprehend any of the information in this post don’t worry, At Basic Web, we’re here to provide clear, accessible resources to help you master these essential skills. For those, finding this post-elementary—We are working on creating advanced courses and free content as well.
Stay tuned for more insights and tutorials to further your web literacy journey.
Best,
Daljit Singh
Founder, Basic Web