EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

HTML CSS and Javascript

Course outline

3 days
Discuss this programme →

Duration

HTML/CSS and Javascript

3 days

OVERVIEW

HTML forms the structure and content of webpages, CSS styles their visual presentation, and JavaScript adds interactivity, making it essential for creating dynamic and engaging web experiences.

PREREQUISITES

No prior programming experience is required. Participants should have a basic understanding of how to use a computer and navigate the internet.

AUDIENCE

This workshop is suitable for absolute beginners who are interested in learning web development from scratch. It is ideal for students, professionals looking to transition into tech roles, entrepreneurs, and anyone curious about building websites.

Part 1 – Introduction and Setup

  • Setting Up Your Environment
  • Installation and setup of necessary tools for web development.
  • Understanding How Web Technologies Work Together
  • Overview of HTML, CSS, and JavaScript and their roles in web development.
  • Introduction to the structure of webpages.
  • Exploring Development Environements
  • Introduction to various text editors and Integrated Development Environments (IDEs) for web development.

Part 2 – HTML Basics

  • Understanding the Structure of HTML
  • Introduction to HTML tags and elements.
  • Explanation of tags and their purpose.
  • Different types of HTML elements: block-level and inline elements.
  • Creating the basic structure of a webpage using HTML
  • Use <html>, <head>, and <body> tags.
  • Keep your code organized with proper indentation. Working with Text and Links
  • Working with Text and Links
  • Format text using HTML tags:
  • Use tags like <h1> for headings, <p> for paragraphs, <strong> for bold, and <a> for links.
  • Add links to connect webpages:
  • Use the <a> tag and specify the destination with the href attribute.
  • Creating Lists and Forms
  • Use <ul> for bullet lists, <ol> for numbered lists, and <li> for list items.
  • Use <form> to start a form and add different input fields like text boxes, checkboxes, and radio buttons.
  • Use attributes like required to ensure users fill out important fields.

Part 3 – CSS Fundamentals

  • Introducing CSS
  • Get to know CSS
  • Learn CSS syntax and selectors
  • Styling Text and Fonts
  • Use CSS properties to change text color, size, font family, and style.
  • Experiment with different font properties like font-weight, font-style, and text-align.
  • Managing Layout with CSS
  • includes properties like margin, border, padding, and content.
  • Use Flexbox properties like display, flex-direction, justify-content, and align-items to control layout elements.

Part 4 – JavaScript Essentials

  • Introduction to JavaScript
  • Discover JavaScript's role
  • Understand variables, which are containers for storing data.
  • Explore different data types like numbers, strings, booleans, and more.
  • Learn about operators for performing operations on data.
  • Working with Functions
  • Create reusable code blocks
  • Handle inputs and outputs
  • Manipulating the DOM
  • access and modify HTML elements using JavaScript.
  • JavaScript to change text, styles, and attributes of HTML elements based on user interactions or other events.

Part 5 – Adding Interactivity with Javascript

  • Handling Events
  • adding interactive features using event listeners.
  • make webpages respond to user actions like clicks and keystrokes.
  • Form Validation and User Interaction
  • Validate form inputs in real-time using JavaScript.
  • Create dynamic web experiences that react to user interactions without reloading the page.
  • Introduction to Basic JavaScript Libraries/Frameworks
  • Explore popular JavaScript libraries like jQuery and frameworks like React.
  • Integrate these tools to enhance your web development projects efficiently.

Programme scope, delivery arrangements and suitability are confirmed during enquiry.