Search our courses
Training

In this Introduction to HTML, CSS and JavaScript training course students get a rapid hands-on introduction to client-side programming with HTML, CSS, and JavaScript. The course is meant for students who want to need to get a jump start on all three technologies. Students should be prepared to cover a lot and to be ready to spend some time afterward reviewing the content on their own to solidify and build upon the skills taught in class.

Objectives:

  • Learn the basics of web development.
  • Learn to create links in HTML documents.
  • Learn to add images to HTML documents.
  • Learn the benefits of CSS.
  • Learn to avoid using deprecated HTML tags and attributes.
  • Learn CSS syntax.
  • Learn to use <div> and <span> tags appropriately.
  • Learn some common CSS properties and their values.
  • Learn to use CSS resets and normalizers.
  • Learn best practices for choosing units of measurement.
  • Learn how to select CSS fonts and to download and use new fonts.
  • Learn about color and opacity.
  • Learn how JavaScript is used.
  • Learn JavaScript syntax.
  • Learn about objects, methods, and properties.
  • Learn to work with JavaScript variables.
  • Learn to create your own functions in JavaScript.
  • Learn to write flow control logic in JavaScript.
  • Learn to listen for and handle events, such as mouse clicks and page loads, with JavaScript.

Introduction to HTML, CSS and JavaScript

Course Code

GTIT9

Duration

4 Days

Course Fee

POA

Accreditation

N/A

Target Audience

Experience in the following areas is required:

  •     Working with computers regularly

Experience in the following areas would be beneficial:

  •     Programming Experience
  •     A basic understanding of how the web works

Attendee Requirements

Programming experience and an understanding of how the web works is beneficial to attend this course.

If you have any questions or doubts as to whether you meet the pre-requisites for this course, or indeed are wondering which course best suits you, please contact us to discuss your suitability for course attendance.

Expand all

Course Description

In this Introduction to HTML, CSS and JavaScript training course students get a rapid hands-on introduction to client-side programming with HTML, CSS, and JavaScript. The course is meant for students who want to need to get a jump start on all three technologies. Students should be prepared to cover a lot and to be ready to spend some time afterward reviewing the content on their own to solidify and build upon the skills taught in class.

Objectives:

  • Learn the basics of web development.
  • Learn to create links in HTML documents.
  • Learn to add images to HTML documents.
  • Learn the benefits of CSS.
  • Learn to avoid using deprecated HTML tags and attributes.
  • Learn CSS syntax.
  • Learn to use <div> and <span> tags appropriately.
  • Learn some common CSS properties and their values.
  • Learn to use CSS resets and normalizers.
  • Learn best practices for choosing units of measurement.
  • Learn how to select CSS fonts and to download and use new fonts.
  • Learn about color and opacity.
  • Learn how JavaScript is used.
  • Learn JavaScript syntax.
  • Learn about objects, methods, and properties.
  • Learn to work with JavaScript variables.
  • Learn to create your own functions in JavaScript.
  • Learn to write flow control logic in JavaScript.
  • Learn to listen for and handle events, such as mouse clicks and page loads, with JavaScript.
Course Outline


1. A Quick Overview of Web Development

    A. Client-side Programming

  1.         HTML
  2.         Cascading Style Sheets
  3.         JavaScript 1
  4.         Ajax
  5.         JavaScript Frameworks

    B. Server-side Programming

  1.         Java EE
  2.         ASP.NET
  3.         Python
  4.         PHP
  5.         ColdFusion
  6.         Node.js

2. Introduction to HTML

    A. Getting Started
    B. A Simple HTML Document
    C. The HTML Skeleton

  1.         The <head> Element
  2.         The <body> Element
  3.         Whitespace

    D. HTML Elements

  1.         Attributes
  2.         Empty vs. Container Tags
  3.         Blocks and Inline Elements
  4.         Comments

    E. Special Characters
    F. History of HTML
    G. lang Attribute

3. Paragraphs, Headings, and Text

    A. Paragraphs
    B. Breaks and Horizontal Rules
    C. Creating an HTML Page
    D. Quoted Text
    E. Preformatted Text
    F. Text-Level Semantic Elements

4. HTML Links

    A. Text Links
    B. Absolute vs. Relative Paths

  1.         Absolute Paths
  2.         Relative Paths
  3.         Default Pages

    C. Targeting New Windows
    D. Email Links
    E. Adding Links
    F. Targeting a Specific Location on the Page
    G. The title Attribute

5. HTML Images

    A. Inserting Images

  1.         Making Images Accessible
  2.         Alternative Text
  3.         Long Descriptions
  4.         Height and Width Attributes

    B. Image Links
    C. Adding Images to the Page

6. HTML Lists

    A. Unordered Lists

  1.         Nesting Unordered Lists

    B. Ordered Lists

  1.         Nesting Ordered Lists
  2.         The type Attribute
  3.         The start Attribute

    C. Definition Lists
    D. Creating Lists

7. Crash Course in CSS

    A. Benefits of Cascading Style Sheets
    B. CSS Rules

  1.         CSS Comments

    C. Selectors

  1.         Type Selectors
  2.         Class Selectors
  3.         ID Selectors
  4.         Attribute Selectors
  5.         The Universal Selector
  6.         Grouping

    D. Combinators

  1.         Descendant Combinators
  2.         Child Combinators
  3.         General Sibling Combinators
  4.         Adjacent Sibling Combinators

    E. Precedence of Selectors
    F. How Browsers Style Pages
    G. CSS Resets
    H. CSS Normalizers
    I. External Stylesheets, Embedded Stylesheets, and Inline Styles

  1.         External Stylesheets
  2.         Embedded Stylesheets
  3.         Inline Styles

    J. Exercise: Creating an External Stylesheet
    K. Exercise: Creating an Embedded Stylesheet
    L. Exercise: Adding Inline Styles
    M. <div> and <spa>
    N. Exercise: Divs and Spans
    O. Media Types
    P. Units of Measurement

  1.         Absolute vs. Relative Units
  2.         Pixels
  3.         Ems and Rems
  4.         Percentages
  5.         Other Units

    Q. Inheritance

  1.         The inherit Value

8. CSS Fonts

    A. font-family

  1.         Specifying by Font Name
  2.         Specifying Font by Category

    B. @font-face

  1.         Getting Fonts

    C. font-size

  1.         Relative font-size Terms
  2.         Best Practices

    D. font-style
    E. font-variant
    F. font-weight
    G. line-height
    H. font
    I. Exercise: Styling Fonts

9. Color and Opacity

    A. About Color and Opacity
    B. Color and Opacity Values

  1.         Color Keywords
  2.         RGB Hexadecimal Notation
  3.         RGB Functional Notation
  4.         HSL Functional Notation

    C. color
    D. opacity
    E. Exercise: Adding Color and Opacity to Text

10. CSS Text

    A. letter-spacing
    B. text-align
    C. text-decoration
    D. text-indent
    E. text-shadow
    F. text-transform
    G. white-space
    H. word-break
    I. word-spacing
    J. Exercise: Text Properties

11. JavaScript Basics

    A. The Name "JavaScript"
    B. What is ECMAScript?
    C. The HTML DOM
    D. JavaScript Syntax
    E. Accessing Elements

  1.         Dot Notation
  2.         Square Bracket Notation

    F. Where Is JavaScript Code Written?
    G. JavaScript Objects, Methods and Properties

12. Variables, Arrays, and Operators

    A. JavaScript Variables

  1.         A Loosely-Typed Language
  2.         Google Chrome DevTools
  3.         Variable Naming
  4.         Storing User-Entered Data

    B. Constants
    C. Arrays

  1.         Associative Arrays
  2.         Array Properties and Methods

    D. Playing with Array Methods
    E. JavaScript Operators
    F. The Modulus Operator
    G. The Default Operator

13. JavaScript Functions

    A. Global Objects and Functions

  1.         parseFloat(object)
  2.         parseInt(object)
  3.         isNaN(object)

    B. User-defined Functions
        Function Syntax
        Passing Values to Functions
    C. Returning Values from Functions

14. Built-In JavaScript Objects

    A. String
    B. Math
    C. Date
    D. Helper Functions

15. Conditionals and Loops

    A. Conditionals
    B. if - else if - else Conditions
    C. Short-circuiting
    D. Switch / Case
    E. Ternary Operator
    F. Truthy and Falsy
    G. Loops

  1.         while Loop Syntax
  2.         do while Loop Syntax
  3.         for Loop Syntax
  4.         for of Loop Syntax
  5.         for in Loop Syntax

    H. break and continue
    I. Array: forEach()

16. Event Handlers and Listeners

    A. On-Event Handlers

  1.         The getElementById() Method

    B. The addEventListener() Method
    C. Capturing Key Events
    D. Benefits of Event Listeners
    E. Timers

Learning Path
Ways to Attend
  • Attend a public course, if there is one available. Please check our schedule, or register your interest in joining a course in your area.
  • Private onsite Team training also available, please contact us to discuss. We can customise this course to suit your business requirements.

Private Team Training is available for this course

We deliver this course either on or off-site in various regions around the world, and can customise your delivery to suit your exact business needs. Talk to us about how we can fine-tune a course to suit your team's current skillset and ultimate learning objectives.

Private Team Training | Contact us

Technical ICT learning & mentoring services

Private Team Training

Our instructors are specialist consultants with vast real world experience and expertise allowing them to design and deliver client-focused courses for your organisation.

Learn more about our Private Team Training

What Our Clients Say

"Absolutely fantastic training. Thoroughly enjoyed it thanks to our highly enthusiastic tutor.  It wouldn't be an understatement to say that it was the best professional training that I have ever received."

 

Customised Linux with Networking

Live Online -  February 2022

 


“It was very positive. This course was 4 days but covered a semester worth of work if it was done in college. The labs were relevant and delegates were provided the lab/coursebook for further study and practice after the course finished. GuruTeam's course was excellent and provides a deeper understanding of the architecture and how it all works. The hands-on aspect was very helpful as it helped solidify the concepts as I went along."

 

Kubernetes Administration Certification - GTLFK

Live Online September 2024

 

 

 

“The Instructor was very knowledgeable, laid back and very approachable during the course. The environment setup was second to none.  Very easy to jump in and follow along with minimal pre-req setup."

Kubernetes Administration Certification - GTLFK

Onsite May 2024

 

“Very engaging and practical course so hope to be able to put the learning into practice.”

 

Being Agile in Business - GTBAB

Live Online September 2021

 

“Great instructor, who encouraged active participation. The breakout groups and exercises kept the group engaged and the content relevant to our own products”.

 

Site Reliability Engineering Foundation - GTDSRE

Live Online January 2022

 

 

 

"Intelligence is the ability to avoid doing work, yet
getting the work done"

Linus Torvalds, creator of Linux and GIT

Technical ICT learning & mentoring services

About GuruTeam

GuruTeam is a high-level ICT Learning, Mentoring and Consultancy services company. We specialise in delivering instructor-led on and off-site training in Blockchain, Linux, Cloud, Big Data, DevOps, Kubernetes, Agile, Software & Web Development technologies. View our Testimonials

Download our eBrochure
Our Accreditation Partners
  •  
  •  
  •  

 

Upcoming Courses

Kubernetes Administration

4th - 7th November 2024

 Live Online

 

Learn More

RUST PROGRAMMING

4th - 7th November 2024

Live Online

GMT +01:00  09:30 - 17:00 hrs

This course will help you understand what Rust applications look like, how to write Rust applications properly, and how to get the most out of the language and its libraries.

 

 

 

 

 

Learn More

INTRO TO PYTHON 3 

ADVANCED PYTHON 3

15th - 17th October 2024
29th - 31st October 2024

Live Online

   GMT +01:00  09:30 - 17:00 hrs

  Python is a powerful and 
  popular object-oriented 
  programming/scripting
 language with many high q
uality  libraries.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

Learn More

 GO LANG TRAINING

4th to 7th November 2024

Live Online      

GMT +01:00  09:30 - 17:00 hrs

This Go language programming training course will help you understand how Go works, and immediately be more productive. If you are building a team using Go, this will be a great opportunity to get your team on the same page and speaking the same language. Innovative lab exercises and code samples are provided to reinforce skills and quickly master the topics.

Learn More

Newsletter

Stay up to date, receive updates on scheduled dates, new courses, offers, and events.

Subscribe to our Newsletter