Introduction: In today's digital age, having a basic understanding of web development has become essential. HTML, CSS, and JavaScript form the foundation of every website, allowing you to create and style web pages while adding interactive elements. This article aims to provide beginners with an overview of these three fundamental technologies and their roles in web development. HTML: Building Blocks of a Web Page HTML (Hypertext Markup Language) is the backbone of every web page. It defines the structure and content of a webpage using various elements, such as headings, paragraphs, images, links, and lists. Here are some key points to understand: Basic HTML structure: The essential elements like , , and . <html> <head> <body> Tags and attributes: How to use tags like , , , and attributes like , , and . <h1> <p> <img> src alt href Semantic elements: Introduction to semantic tags like , , , and their significance in structuring content. <header> <nav> <section> Creating forms: Understanding form elements like , , , and their attributes for user input. <input> <select> <textarea> CSS: Styling Your Web Pages CSS (Cascading Style Sheets) is responsible for the visual presentation and layout of web pages. It allows you to customize the colors, fonts, spacing, and positioning of HTML elements. Here's what beginners should know: Selectors and declarations: How to target HTML elements using selectors and define styling properties in declarations. Inline, internal, and external stylesheets: Different ways to include CSS styles in your web page. Basic styling: Changing colors, fonts, backgrounds, margins, and padding of elements. Layout and positioning: Introduction to CSS box model, float, flexbox, and grid for controlling the layout of web pages. Responsive design: Designing websites that adapt to different screen sizes using media queries. JavaScript: Adding Interactivity and Functionality JavaScript is a programming language that brings life to web pages by adding interactivity and dynamic functionality. Here are some essential concepts to grasp: Basics of JavaScript: Variables, data types, operators, conditionals, loops, and functions. DOM manipulation: How to access and modify HTML elements using JavaScript to create dynamic effects. Event handling: Responding to user interactions like clicks, mouse movements, and form submissions. Fetching data: Making AJAX requests to retrieve data from servers without refreshing the entire page. Introduction to frameworks and libraries: Mentioning popular JavaScript frameworks like React, and Angular and libraries like jQuery. In this article, we will focus on the basic concepts to get started. Implementation Here are the simple steps to get started: Install VScode Create a file named index.html in a new directory. Open the file in VScode and write the boilerplate. I picked it from or you can also type and to get an instant boilerplate. http://htmlshell.com/ ! enter Congratulations, now you can start coding… It will look like this. <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html> I have added heading and paragraph tags, and now we can see what happens to our webpage. To do so, we have to double-click on the HTML file it will open in the browser. <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
<h1>Welcome Beginners</h1>
<p>Click the button to toggle the visibility of the paragraph below:</p>

</body>
</html> Our webpage will look like this: Now to add some functionality, we will need to add a couple more tags and assign them id and class. <body>
  
  <h1>Welcome Beginners</h1>
  <p>Click the button to toggle the visibility of the paragraph below:</p>
  <button id="myButton">Toggle</button>
  <p id="myParagraph" class="hidden">This paragraph is initially hidden.</p>
  

</body> The id and class inside tags are used as a selector to style and perform some functionality. We will use them in our next few steps. The webpage looks like this: Putting code inside a helps in various functions, such as applying a background color to all the elements inside a . div div <div class="container">
    <h1>Welcome Beginners</h1>
    <p>Click the button to toggle the visibility of the paragraph below:</p>
    <button id="myButton">Toggle</button>
    <p id="myParagraph" class="hidden">This paragraph is initially hidden.</p>
    
  </div> Now to make it look decent, we will add some styles to do; so firstly we will add the tag inside tag. styles head <style>
    /* CSS styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
      text-align: center;
    }

    p {
      color: #666;
    }

    #myButton {
      display: block;
      width: 120px;
      height: 40px;
      margin: 20px auto;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border-radius: 4px;
      text-decoration: none;
    }

    .hidden {
      display: none;
    }

   
  </style> Here is the explanation: : This selector targets the element of the HTML document. The styles applied include setting the font family to Arial or a fallback sans-serif font, setting the to a light , and removing any default margin and padding on the body element. body <body> background color gray (#f2f2f2) : This selector targets an element with a class of "container". It is commonly used to wrap a section of content. The styles applied include setting a maximum width of 800 pixels, centering the container horizontally with , adding some padding, setting a white , and applying a box shadow for a subtle shadow effect. .container margin: 0 auto background color, : This selector targets heading elements. The styles applied include setting the to a and the text. h1 <h1> color dark gray (#333) center-aligning : This selector targets paragraph elements. The styles applied include setting the to a medium . p <p> color gray (#666) : This selector targets an element with an attribute of . It is typically used for styling a specific button element. The styles applied include setting the display to block (which makes it take up the full width available), setting a specific width and height, the button horizontally with margin: 20px auto, setting a background of a green shade (#4CAF50), setting the text to white, defining a font size, the text vertically and horizontally with and , setting the cursor to a pointer when hovering over the button, applying a to give rounded corners and remove the default text decoration (underlining). #myButton id "myButton" centering color color center-aligning line-height text-align border radius : This selector targets elements with a class of "hidden.” It is typically used to hide elements from being displayed on the webpage. The style applied is , which completely hides the element. .hidden display: none In summary, the provided CSS styles set the overall styling of the webpage, including the body , container layout, heading and paragraph text styles, button appearance, and the hidden class for hiding elements. These styles create a visually appealing and well-structured webpage. background color Now our webpage has a visually appealing design. Now when the button is clicked, the code toggles the visibility of a paragraph element. If it is hidden, clicking the button will make it visible and change the button text to "Hide.” If it is visible, clicking the button will hide it again and change the button text to "Toggle." This provides a simple mechanism to show or hide content on a webpage. To do so, here is the code: <body>
  
  <h1>Welcome Beginners</h1>
  <p>Click the button to toggle the visibility of the paragraph below:</p>
  <button id="myButton">Toggle</button>
  <p id="myParagraph" class="hidden">This paragraph is initially hidden.</p>
  <p>Move your mouse over this paragraph to see it highlighted.</p>



<script>
   var button = document.getElementById('myButton');
    var paragraph = document.getElementById('myParagraph');

    button.addEventListener('click', function() {
      if (paragraph.classList.contains('hidden')) {
        paragraph.classList.remove('hidden');
        button.textContent = 'Hide';
      } else {
        paragraph.classList.add('hidden');
        button.textContent = 'Toggle';
      }
    });
</script>
</body> Inside the script tag, we can write our Javascript code. The code adds an event listener to a button element using JavaScript. The event listener listens for a event on the button. When the button is clicked, the function inside the event listener is executed.  Within the function, there is a conditional statement that checks if a paragraph element has a CSS class of . This CSS class is typically used to hide an element from being visible on the webpage. “click” "hidden" If the paragraph element has the " class, it means that it is currently hidden. In this case, the function removes the "hidden" class from the paragraph element using the method. This makes the paragraph element visible on the webpage. Additionally, the text content of the button is changed to "Hide" to reflect the action. hidden" classList.remove() On the other hand, if the paragraph element does not have the "hidden" class, it means that it is currently visible. In this case, the function adds the "hidden" class to the paragraph element using the method. This hides the paragraph element on the webpage. The text content of the button is then changed to "Toggle" to reflect the action. classList.add() After clicking the button, our webpage will look like this: Complete Code: <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beginners Guide</title>

  
  <style>
    /* CSS styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
      text-align: center;
    }

    p {
      color: #666;
    }

    #myButton {
      display: block;
      width: 120px;
      height: 40px;
      margin: 20px auto;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border-radius: 4px;
      text-decoration: none;
    }

    .hidden {
      display: none;
    }

   
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome Beginners</h1>
    <p>Click the button to toggle the visibility of the paragraph below:</p>
    <button id="myButton">Toggle</button>
    <p id="myParagraph" class="hidden">This paragraph is initially hidden.</p>
    
  </div>

  <script>
    // JavaScript code
    var button = document.getElementById('myButton');
    var paragraph = document.getElementById('myParagraph');

    button.addEventListener('click', function() {
      if (paragraph.classList.contains('hidden')) {
        paragraph.classList.remove('hidden');
        button.textContent = 'Hide';
      } else {
        paragraph.classList.add('hidden');
        button.textContent = 'Toggle';
      }
    });

  
  </script>
</body>
</html> Here is the link to the GitHub repository: https://github.com/Obaid-03/Beginners-Guide-HTML-CSS-JS-.git Conclusion: HTML, CSS, and JavaScript are the building blocks of modern web development. HTML provides the structure and content, CSS adds styling and layout, while JavaScript adds interactivity and functionality. By mastering these technologies, beginners can create dynamic and visually appealing websites. Remember to practice and experiment with different concepts to enhance your skills further. Good luck on your web development journey! Credits: : Obaid Aqeel Author Muhammad Bilal Mentor: https://hackernoon.com/u/th3n00bc0d3r

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Too Long; Didn't Read

Making security fun one episode at a time

A Beginner's Guide to HTML, CSS, and JavaScript

Too Long; Didn't Read

People Mentioned

Obaid Aqeel

STORY’S CREDIBILITY

Guide

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A Beginner's Guide to HTML, CSS, and JavaScript

Too Long; Didn't Read

People Mentioned

Obaid Aqeel

STORY’S CREDIBILITY

Guide

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES