සිං | தமிழ் | EN

1.2.1 Fundamentals of Web Technologies

Fundamentals of Web Technologies for Front-end Development Beginner Level

1.2.1. HTML5 Structure, Semantics, and Accessibility Basics

Imagine a website as a house. HTML (HyperText Markup Language) is like the blueprint and the building materials – the bricks, the wood, the steel. HTML5 is the latest and most powerful version of this blueprint language.

  • What is HTML5 Structure? HTML5 uses tags to define the structure of your webpage. Think of tags as instructions to the browser about what each part of your content is. For example:
    • <p> tags are for paragraphs of text.
    • <h1> to <h6> tags are for headings (different levels of importance).
    • <img> tags are for images.
    • <a> tags are for links.

    You’ll learn how to use these tags to create a well-organized structure for your content, like arranging rooms in a house.

  • What is Semantic HTML? Semantic HTML is about using HTML tags in a way that truly describes the meaning and purpose of your content, not just how it looks. Instead of using generic tags for everything, semantic HTML5 provides tags like:
    • <header>: For the introductory content at the top of a page or section (like a website’s header).
    • <nav>: For navigation menus.
    • <article>: For independent, self-contained content like a blog post or news article.
    • <section>: For thematic groupings of content.
    • <footer>: For the footer content at the bottom of a page or section (like copyright information).

    Using semantic tags makes your HTML code more understandable for:

    • Browsers: They can better understand the structure and content of your page.
    • Search Engines (SEO): Search engines like Google can more easily index and understand your website’s content, improving your website’s ranking in search results.
    • Screen Readers (Accessibility): Screen readers used by people with visual impairments rely on semantic HTML to understand the structure of a page and convey it to the user.
    • Other Developers (Maintainability): Semantic HTML makes your code cleaner, more organized, and easier for other developers (or yourself in the future!) to understand and maintain.
  • Accessibility Basics: Web accessibility means designing and developing websites that are usable by everyone, including people with disabilities. From the start, you’ll learn to build websites that are inclusive. Key accessibility basics you’ll learn include:
    • Semantic HTML (again!): Semantic HTML is a cornerstone of accessibility, as it provides structure and meaning that assistive technologies can interpret.
    • ARIA Attributes: ARIA (Accessible Rich Internet Applications) attributes are extra HTML attributes that you can add to tags to provide more information to assistive technologies, especially for dynamic content and interactive elements created with JavaScript.
    • Alternative Text for Images (alt attribute): Providing descriptive text for images using the alt attribute is crucial so screen readers can describe images to visually impaired users.
    • Keyboard Navigation: Ensuring that all website functionality is accessible using the keyboard alone is vital for users who cannot use a mouse.
    • Color Contrast: Making sure there’s sufficient contrast between text and background colors is essential for users with low vision or color blindness.

    Accessibility is not just a “nice to have”; it’s about making the web a fair and inclusive space for everyone.

1.2.1.1 CSS Fundamentals with Emphasis on Responsive Design

If HTML is the structure of your website, CSS (Cascading Style Sheets) is what makes it visually appealing! CSS is the language you use to style your HTML content and control its presentation.

  • CSS Fundamentals: You’ll learn the basic building blocks of CSS:
    • Selectors: Selectors are patterns you use to target specific HTML elements you want to style. For example, you might select all <p> paragraph tags, or a specific element with a certain class or id.
    • Properties: Properties are the aspects of an element you want to style, like color, font-size, background-color, margin, padding, etc.
    • Values: Values are the settings you apply to CSS properties, like red for color, 16px for font-size, etc.
    • The Box Model: The CSS Box Model is fundamental to layout. Every HTML element is treated as a rectangular box. You’ll learn about the different parts of this box:
      • Content: The actual content of the element (text, images, etc.).
      • Padding: Space around the content, inside the element’s border.
      • Border: The visible border around the element (if you set one).
      • Margin: Space around the element, outside the border, separating it from other elements.
  • Responsive Design Principles: In today’s multi-device world, websites need to look and work well on everything from large desktop monitors to small mobile phones. Responsive design is the approach to web design that makes this happen. You’ll learn key principles of responsive design:
    • Media Queries: Media queries in CSS let you apply different styles based on the characteristics of the device accessing the website, most commonly the screen width. For example, you can have different layouts and font sizes for phones vs. desktops using media queries.
    • Flexible Grids (CSS Grid and Flexbox Basics): CSS Grid and Flexbox are powerful CSS layout tools that make it much easier to create flexible and responsive layouts. You’ll learn the basics of these, focusing on how to use them to create layouts that adapt to different screen sizes.
    • Fluid Images: Fluid images are images that automatically resize to fit their container. You’ll learn how to make images responsive so they don’t overflow their containers on smaller screens and look good at different sizes.

    Responsive design is no longer optional; it’s essential for creating modern websites that provide a good user experience on all devices.

1.2.1.3 Introduction to JavaScript, DOM Manipulation, and Debugging

While HTML provides structure and CSS provides styling, JavaScript brings websites to life! It’s the programming language that adds interactivity and dynamic behavior to web pages.

  • Introduction to JavaScript Basics: You’ll start by learning the fundamentals of the JavaScript language itself:
    • Syntax: The rules of how to write JavaScript code (like grammar for a programming language).
    • Data Types: Different types of data you can work with in JavaScript, like numbers, text (strings), booleans (true/false), etc.
    • Operators: Symbols that perform operations on data, like + for addition, - for subtraction, = for assignment, etc.
    • Control Flow: How you control the order in which code is executed, using things like:
      • if...else statements (to make decisions).
      • for and while loops (to repeat code).
    • Functions: Reusable blocks of code that perform specific tasks.
  • DOM Manipulation: The DOM (Document Object Model) is a programming interface for HTML documents. Think of it as a tree-like structure that represents your webpage. JavaScript uses the DOM to “see” and interact with all the elements on your page. DOM manipulation is using JavaScript to dynamically:
    • Change Content: Update text, images, and other content on the page without reloading the entire page.
    • Modify Styles: Change CSS styles dynamically, altering the appearance of elements in response to user actions or other events.
    • Handle Events: React to user interactions, like clicks, mouse movements, form submissions, and keyboard presses. This is what makes websites interactive!
    • Create Interactive Elements: Build dynamic elements like interactive forms, animations, and user interface components.
  • Debugging: Writing code inevitably involves errors (bugs!). Debugging is the process of finding and fixing these errors. You’ll learn to use browser developer tools (built into browsers like Chrome, Firefox, etc.) to:
    • Inspect HTML and CSS: Examine the structure and styles of your webpage.
    • Debug JavaScript: Step through your JavaScript code line by line, set breakpoints, inspect variables, and identify errors.
    • See Console Output: Use the browser’s console to log messages, inspect data, and see errors reported by JavaScript.

    Debugging is a critical skill for any developer. Learning debugging techniques early will make you a more efficient and effective programmer.

1.2.1.4 Soft Skill: Basic Git Version Control and Collaborative Workflows

In software development, especially when working on projects of any size or in teams, version control is essential. Git is the most popular version control system used by developers worldwide.

  • What is Git? Git is like a detailed history book for your code project. It tracks every change you make, allowing you to:
    • Track Changes: Record every modification you make to your code files.
    • Revert to Previous Versions: Easily go back to an earlier version of your code if you make a mistake or want to undo changes.
    • Branching: Create separate lines of development (branches) to work on new features or bug fixes without disrupting the main codebase.
    • Merging: Combine changes from different branches back together.
  • Basic Git Commands: You’ll learn fundamental Git commands that you’ll use every day:
    • git init: Initializes a new Git repository in your project.
    • git clone: Copies an existing Git repository from a remote location (like GitHub) to your local machine.
    • git add: Stages changes to be included in your next commit (snapshot).
    • git commit: Saves a snapshot of your staged changes with a descriptive message.
    • git push: Uploads your commits to a remote repository.
    • git pull: Downloads commits from a remote repository to your local machine.
  • Collaborative Workflows: Git is fantastic for collaboration. Platforms like GitHub and GitLab provide online hosting for Git repositories and tools for team collaboration. You’ll learn basic collaborative workflows, including:
    • Branching and Pull Requests: How to use branches to work on features independently and then use pull requests to propose and merge your changes back into the main project, allowing for code review and collaboration.

    Learning Git is not just about code management; it’s about effective collaboration, which is a crucial soft skill in software development.

1.2.1.5 Hands-on: Small Projects (e.g., Personal Website) with Unit Tests for Simple Functions

Theory is important, but hands-on projects are where you truly learn and solidify your skills! In this section, you’ll build small, practical web projects, such as:

  • Personal Portfolio Website: A website to showcase your skills, projects, and experience – a great way to start building your online presence.
  • Simple Blog: A basic blog where you can write and display articles or posts.

These projects will allow you to apply everything you’ve learned about HTML, CSS, JavaScript, and Git in a real-world context.

  • Introduction to Unit Testing: To ensure the quality and reliability of your JavaScript code, you’ll be introduced to unit testing. As mentioned before, unit tests are small, automated tests that verify individual units or functions of your code. You’ll learn to:
    • Write Basic Unit Tests: Use a unit testing framework (like Jest basics will be introduced) to write tests for simple JavaScript functions.
    • Run Unit Tests: Execute your tests automatically to check if your code is working as expected.
    • Understand Test-Driven Development (TDD) Principles (lightly): Get a glimpse into the idea of writing tests before you write the actual code, to guide your development and ensure you are building functionality correctly from the start.

    Unit testing is a fundamental practice in professional software development, and starting to learn it early will set you on the path to becoming a quality-conscious developer.

Conclusion

From understanding HTML5 structure and semantics to mastering CSS for responsive design, and from diving into JavaScript for interactivity to using Git for version control, you’ve built a solid foundation. Keep practicing and building projects to solidify your knowledge and skills.

GPT Prompts for Further Exploration

  1. Explain the significance of using semantic HTML5 tags compared to non-semantic tags. Provide examples of both and discuss how semantic HTML improves web accessibility and SEO.
  2. Describe the CSS Box Model in detail, illustrating each component (content, padding, border, margin). Explain how understanding the box model is crucial for effective CSS layout and responsive design.
  3. Compare and contrast CSS Grid and Flexbox layout models. In what scenarios would you choose Grid over Flexbox, and vice versa, for creating responsive web layouts?
  4. Explain how JavaScript DOM manipulation enables dynamic and interactive web pages. Provide examples of common DOM manipulation tasks and discuss their impact on user experience.
  5. Describe the core principles of web accessibility (WCAG) and explain how implementing ARIA attributes, providing alt text for images, and ensuring keyboard navigation contribute to making websites more inclusive.
  6. Elaborate on the benefits of using Git for version control in web development, especially in collaborative projects. Explain the purpose of branching and pull requests in a Git workflow and how they enhance team productivity.
  7. Discuss the importance of debugging in JavaScript development. Describe how browser developer tools (like Chrome DevTools) assist in identifying and resolving JavaScript errors, and outline a typical debugging workflow.
  8. Explain how media queries are used to achieve responsive web design. Provide examples of media queries targeting different screen sizes and discuss how they enable websites to adapt to various devices.
  9. Describe the concept of unit testing in JavaScript. Why is unit testing important for ensuring code quality and reliability? Explain the basic principles of Test-Driven Development (TDD) and its benefits.
  10. Imagine you are tasked with building a personal portfolio website. Outline the steps you would take, considering HTML5 structure, semantic tags, responsive CSS design (using Flexbox or Grid), basic JavaScript for interactivity, Git for version control, and accessibility best practices.
  1. HTML5 Structure, Semantics, and Accessibility Basics
  2. CSS Fundamentals with Emphasis on Responsive Design
  3. Introduction to JavaScript, DOM Manipulation, and Debugging
  4. Basic Git Version Control and Collaborative Workflows
  5. Hands-on: Small Projects with Unit Tests for Simple Functions
© 2025 - National Digital Capacity Library, Sri Lanka
This work is licensed under a Creative Commons Attribution 4.0 International License.
Creative Commons License