• phone icon +44 7459 302492 email message icon info@uplatz.com
  • Register

4.5 (168 reviews)
( 1333 Students )
15 Hours


HTML5 and CSS3

Learn about HTML5 with new elements, attributes, and behaviours, with a larger set of technologies.
( add to cart )
Save 59% Offer ends on 30-Nov-2023
Preview HTML5 and CSS3 course
View Course Curriculum   Price Match Guarantee   Full Lifetime Access     Access on any Device   Technical Support    Secure Checkout   Course Completion Certificate
Instant access

Students also bought -

Completed the course? Request here for Certificate. ALL COURSES

HTML (Hyper Text Markup Language) is the standard markup language for Web pages. HTML elements are the building blocks of HTML pages.

HTML5 is the newest version of the HTML language, with new elements, attributes, and behaviors, with a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.

Simply said, HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup-based pattern to it.


CSS (Cascading Style Sheets) defines how HTML elements should be displayed on the web pages, or more simply CSS is a language that describes the style of an HTML document.

CSS3 is the latest version of the language. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.


This HTML5 and CSS3 training by Uplatz introduces the web designers and developers to HTML5, CSS3, and responsive web design. Attendees learn the HTML and CSS skills needed to create professional looking web pages that will render on any screen, from phone to tablet to desktop.


Use HTML5 and CSS3 to build responsive websites that render well on a variety of devices; Work with images, including thumbnails, rollovers, and image maps; Create tables; Work with forms and the HTML5 validation features; Add audio and video to your pages; Use embedded fonts; Format web pages for printing; Use the CSS3 features for transitions, animation, transforms, and filters; Use JavaScript and jQuery to enhance their web pages.


This HTML5 and CSS3 course forms an integral part of your front-end / full stack web development journey providing you skills to perform as a successful web designer/developer.

Course/Topic - HTML5 and CSS3 course - all lectures

  • Video Objectives: About html and doctypes, headings, How to use anchor and hyperlinks, How to create anchor tags, tables and list .......... Video Topics: What is HTML, Difference between HTML and HTML5, Doctypes, Headings, Paragraphs, Text Formatting, Anchors and Hyperlinks, Tables, Lists

    • 49:14
  • Video Objectives: How to use comments and classes, What are IDS, Data Attributes, What is Linking Resources and how is it done, How to include JavaScript code in HTML5 .......... Video Topics: Comments, Classes and IDs, Data Attributes, Linking Resources, Include JavaScript Code in HTML

    • 46:20
  • Video Objectives: How to use Image and Image Map using Input Control Elements .......... Video Topics: Using HTML with CSS, Images, Image Maps, Input Control Elements

    • 39:50
  • Video Objectives: How to use Input Control Elements, Use form using div Elements and sectioning Elements .......... Video Topics: Input Control Elements, Forms, Div Element, Sectioning Elements

    • 46:44
  • Video Objectives: How to use the navigation bars, Label elements, Input and Output elements, Progress elements in HTML5 and CSS3 .......... Video Topics: Navigation Bars, Label Elements, Output Elements, Video and Media Elements, Progress Elements, Selection Menu Elements, Embed

    • 45:05
  • Video Objectives: How to use iframes using SVG and Canvas elements using meta information, Marking up computer code and quotes .......... Video Topics: iframes, Content Languages, SVG, Canvas, Meta Information, Marking up computer code, Marking-up Quotes

    • 38:32
  • Video Objectives: How to use Tabindex, Use global attributes using the character Entities and ARIA .......... Video Topics: Tabindex, Global Attributes, HTML5 Cache, HTML Event Attributes, Character Entities, ARIA

    • 35:22
  • Video Objectives: How to use ARIA elements, What are the HTML symbols, How to use media query, Use HTML webworkers and webstorage .......... Video Topics: ARIA, Responsive Web Design, Media Query, HTML Symbols, HTML WebWorkers, HTML WebStorage

    • 38:40
  • Video Objectives: How to change the CSS with JavaScript, Structure and formatting of CSS rules, Comments and Selectors .......... Video Topics: Changing CSS with JavaScript, Structure and Formatting of a CSS Rule, Comments, Selectors

    • 49:30
  • Video Objectives: How to use the background color, gradients, position, image in HTML5 and CSS3 .......... Video Topics: Background Color, Background Gradients, Background Image, Background Shorthand, Background Position, Background Size, Multiple Background Image

    • 34:46
  • Video Objectives: How to center the Flexbox using css transform, box-model and box-sizing .......... Video Topics: Centering, Using Flexbox, Using CSS transform, Box Model, Box Sizing

    • 37:15
  • Video Objectives: How to use Margin, Padding, Borders, Outlines using HTML5 and CSS3 .......... Video Topics: Margin, Padding, Border, Outlines

    • 28:16
  • Video Objectives: How to use overflow using float, How to describe font size using text-transform and flexible-box-layout .......... Video Topics: Overflow, Floats, Font Size, Text Transform, Flexible Box Layout (Flexbox)

    • 30:14
  • Video Objectives: How to use Cascading, Use colors and opacity in pseudo-elements and positioning in CSS3 .......... Video Topics: Cascading and Specificity, Colors, Opacity, Length Units, Pseudo-Elements & Positioning

    • 38:13
  • Video Objectives: How to use Grid and Tables using Transition and 3D Transform and Filter property, What is box-shadow .......... Video Topics: Grid, Tables, Transitions & Animation, 2D Transforms & 3D Transforms, Filter Property, Box-shadow

    • 36:04
  • Video Objectives: What are counters and functions in CSS3, How to use counters and functions in HTML5, More about image sprites and inline-block layouts .......... Video Topics: Shapes for Floats, List Styles, Counters, Functions, Single Element Shapes, Columns, Inline-Block Layout, CSS Image Sprites

    • 36:12
  • Video Objectives: Prepare for Web Developer Interviews .......... Video Topics: HTML5 and CSS3 Interview Questions and Answers

    • 33:49
Objectives Back to Top

Use HTML5 and CSS3 to build responsive websites that render well on a variety of devices

Work with images, including thumbnails, rollovers, and image maps

Create tables

Work with forms and the HTML5 validation features

Add audio and video to your pages 

Use embedded fonts 

Format web pages for printing

Use the CSS3 features for transitions, animation, transforms, and filters


Syllabus Back to Top



  • History of HTML

  • What you need to do to get going and make your first HTML page

  • What are HTML Tags and Attributes?

  • HTML Tag vs. Element

  • HTML Attributes

  • How to differentiate HTML Document Versions

HTML - Basic Formatting Tag

  • HTML Basic Tags

  • HTML Formatting Tags

  • HTML Color Coding

HTML - Grouping Using Div Span

  • Div and Span Tags for Grouping

HTML - Lists

  • Unordered Lists

  • Ordered Lists

  • Definition list

HTML - Images

  • Creating an image

  • Choosing alt text

  • Responsive image using the srcset attribute

  • Responsive image using picture element

HTML - Hyperlink & Anchors

  • Link to another site

  • Link to an anchor link to a page on the same site Link that dials a number

  • Open link in new tab/window

  • Link that runs JavaScript Link that runs email client

HTML - Tables

  • Simple Table

  • Spanning columns or rows

  • Column Groups

  • Table with thead, tbody, tfoot

  • Heading scope

HTML - iframe

  • Attributes Using

  • iframe as the Target

HTML - Forms

  • Submitting

  • Target attribute in form tag

  • Uploading Files

  • Grouping a few input fields

HTML - Headers

  • Title

  • Base

  • Link

  • Styles

  • Script

HTML - Miscellaneous

  • Tags, xhtml and deprecated tags

  • HTML Meta Tag


  • HTML Deprecated Tags & Attributes



CSS Introduction

  • CSS Syntax

  • CSS Id & Class

  • CSS Styling

  • Styling Backgrounds

  • Styling Text

  • Styling Fonts

  • Styling Links

  • Styling Lists

  • Styling Tables

  • CSS Box Model

  • CSS Border

  • CSS Outline

  • CSS Margin

  • CSS Padding

  • CSS Advanced

  • CSS Grouping/Nesting

  • CSS Dimension

  • CSS Display

  • CSS Positioning

  • CSS Floating

  • CSS Align

  • CSS Navigation Bar

  • CSS Image Gallery

  • CSS Image Opacity

  • CSS Image Sprites

  • CSS Media Types

Selectors and Pseudo Classes

  • Attribute Selectors

  • The Target Pseudo-Class

  • UI Element States Pseudo-Classes

  • Negation Pseudo-Class

  • Structural Pseudo-Classes

Practical Demo and FAQ

Interview Questions and Answers

Certification Back to Top

This HTML5 and CSS3 training course will help the participant to master the HTML and CSS web Programming language. As a part of this HTML5 and CSS3 training, the participants will master the popular web programming languages.

In HTML5 and CSS3 Course module, the participants understand that the web programming language is used to improve the webpage look and design. In the HTML5 and CSS3 course, the participants will learn to deal with web page behaviour, mark-up based pattern and CSS3 features related to transition, animation and filters.

The Participant get trained in HTML and CSS programming skills needed to build a web page. HTML5 and CSS3 tutorial helps the participants to fulfil the role of a Web Developer. HTML5 and CSS3 training course requires a basic understanding of web mark-up languages and basic knowledge of programming and scripting language.

HTML and CSS are languages that an emerging developer need to know well. The HTML and CSS3 training course from Uplatz can help the participants to understand the importance of web-based technologies. The Full stack Web Developer training course validates whether the participants has proven basic knowledge of web development using CSS and HTML. The HTML5 and CSS3 training course helps the participants to create and maintain more professional and interactive web pages.

Uplatz online training ensures the participants to successfully go through the HTML5 and CSS3 training course. Uplatz provides appropriate teaching and expertise training is provided to equip the participants for implementing the learnt concepts in an enterprise.

Course Completion Certificate will be awarded by Uplatz upon the completion of the HTML5 and CSS3 course training.

Career & Jobs Back to Top

The Full Stack Web Developer draws an average salary of $102,525 per year depending on the knowledge and hands-on experience. The Full Stack Web Developer job roles are in high demand and make a promising career.

Full Stack Web Developers have huge demand across various MNC’s. The importance of web designing and technology in various companies can open up good job opportunities. The leading companies hire Full Stack Web Developer considering their skill of mastering web programming and front-end platform tasks. The Participants earn HTML5 and CSS3 training through our course completion certificate.

The HTML5 and CSS3 course is ideally designed for web designers, programmers and those who aspire to build their career in web programming.

After pursuing HTML5 and CSS3 course the participants can pursue a wide range of career paths.

The following are the job titles:

·       CSS / HTML Programmer

·       Front End Developer

·       Web Developer

·       UI Developer

·       Full stack Developer 

HTML5 and CSS3 Training course is worth for any web developers to improve their web development skills.

Interview Questions Back to Top

1. What is the need of mentioning at the beginning of an HTML page?

The indicates the version of HTML which in this case is 5. The earlier versions like HTML4 were based on Standard Generalized Markup Language (SGML) and required a Document Type Definition (DTD). HTML5 however, is not based on SGML and doesn’t need a DTD.


2. List out the new Structural Elements in HTML5.

HTML5 introduced few structural elements to define different parts of a web page like article, header, footer, main, mark and many more.

These are sections in which a web page is usually divided into. In HTML4, the same was implemented using div with an id/class name to it.


3. What is the use of the article tag?

It defines space for an article that is independently distributable. For example, A magazine or newspaper article.


4. How can we produce a horizontal line on a webpage?

A horizontal line can be produced on a web page using the

tag. The other point to note about the hr tag is that it doesn’t have an end tag as most of the HTML tags do.


5. Why is the div tag so useful in developing HTML web pages?

The HTML div tag (ie


) is used to create a section of a web page. It can hold another sections or elements in it. It is also possible to hold direct text in it, but not the one that is used.


6. Define the types of HTML Headings.

HTML holds 6 types of headings starting from h1 to h6. The heading one (h1) is the maximum font and h6 is the minimum font.


7. How can we group heading elements?

All the heading tags or elements can be grouped together in hgroup tag:


  • Main heading

  • Subheading



8. Define span tag.

A span tag is similar to div section but is used to divide the screen into even smaller sections. ...


9. Define Meta tags.

Meta tags are the tags that provide more information to our web pages. Some of the tags that are examples for meta are:

  • Link: Defines a relation between the web page and an external source.
  • Style: Inserts styles (CSS) details to the web page.
  • Title: Provides a title to the web page.


10. What are the most commonly used List tags?

The list tags are used to list out any information. There are types in listing out the information using the tags, these are:

  • Ordered List: Used as
    and provides the list in a numbered format.
  • Unordered List: Used as
    and provides the list in a bullet format.

NOTE: both the above use list item tags ie

  • ...

in them


  • Definition List: Used as
    which provides a list in it and takes Definition Term (ie...) and a detailed definition (ie...).


11. What is the best way to group form elements?


tag can be used to group some of the form elements. When the purpose is to provide some HTML elements as a group to the user then, fieldset tag is the best one to use. It takes another tag in it which provides a title to the grouped elements.


12. List few input type attributes that are new in HTML5.

An input tag can take some attributes based on the requirement. ie creates a textbox that takes text/number/special characters into it. The attribute type can take more values, these are:

  • Datetime: Gives a datetime accepted textbox.
  • Placeholder: Places an editable text in the textbox.
  • Number: Takes only numbers and no text and special characters.
  • Tel: Takes inputs like a telephone number.
  • Email: Takes text with email format.


13. How is it possible to insert a copyright symbol in a web page?

As there is no direct key to type and insert the copyright symbol in a web page, it has to be given by combining different characters. This can be done in multiple ways like:

  • &copy.
  • & #169.


14. What is a hyperlink?

A hyperlink is a text/image on a webpage, which when clicked redirects to a new webpage.


15. Explain the type and value attributes for a list item (ie

  • ).


The type attribute helps to change the listing/numbering of the list items. It is also used to change the numbering index the value attribute is used.


16. Describe the way in which color can be applied to an element in an HTML page.

HTML elements can be colored in three ways:

  • Color name ie red/blue etc.
  • Hex Color ie #efefef, and
  • RGB(10,234,128) which is a combination of red, green, blue.


17. Explain the two web storage in HTML5.

In HTML 5 data storage can be done in two ways:

  • Session Storage: The current session (i.e., a user who is browsing the website) details are stored. Once the user closes the browser, the storage is cleared.
  • Local Storage: Data stored in local storage will not be cleared automatically or when the user closes the browser.


18. Explain Graphics in HTML5.

HTML5 has two types of providing graphics, SVG and Canvas. SVG is helpful when using devices like tablets, iPads etc. Whereas, Canvas is an area in the document or HTML page where graphics can be drawn.


19. What are the Server-Sent Events (SSE)?

The events that come from the server to the browser are termed as Server Side Events.


20. List out the new attributes provided in HTML5 for the form tag.

HTML5 has introduced two new attributes for the form tag which are:

  • autocomplete.
  • non-validate.


21. What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?

The form attribute novalidate is a Boolean type which takes true/false values. If disabled or made false, the form data is not validated when submitted.


22. Why do we need to autocomplete attribute for the form tag?

The autocomplete attribute is usually applied to text boxes with which the user can fill the textboxes with the previous values given to it.


23. How can you hide  HTML source code?

It is not possible to hide the HTML source code as the browser needs to understand the code.


24. How can a static HTML page redirect the visited a new page?

The meta tag has an attribute called URL which takes you to a redirected link.


25. What is Cell Padding?

Cell Padding refers to the space between the cell wall and cell border.


26. What are the different kinds of Doctypes available?

The three kinds of Doctypes which are available:

  • Strict Doctype
  • Transitional Doctype
  • Frameset Doctype


27. How do we comment HTML code in an HTML page?

HTML code can be commented using


28. List the APIs available in HTML5.

The available APIs in HTML are:

  • DOM Level 1
  • DOM Level 2 Core
  • DOM Level 2 HTML
  • DOM Level 3


29. Explain Application Cache.

Application Cache is a mechanism in which the web applications can also run offline. One of the advantages of using the application cache is that the resources load faster.


30. When do we use a meter tag?

This tag is also known as a gauge and is used to define a scalar measurement which is in a known range.


31. What is the usage of the cite tag?

The cite tag is used to represent the title of a work (like a book, paper, poem etc). This tag is mostly used as an inline tag.


32. What is a contenteditable attribute?

This attribute is a new feature in HTML5 using which any element can be edited directly from the browser.


33. How are Web Workers APIs used in HTML5?

Using Web Workers APIs provide a way to run something in the background with which certain tasks can be performed without distracting the user interface.


34. What is MathML in HTML5?

MathML stands for Mathematical Markup Language and is used to show mathematical and scientific content on the web page. This expression should be inserted in a math tag.


35. Explain WHATWG.

WHATWG stands for Web HyperText Application Technology Working Group which is an organization that develops and also maintains the HTML and API for web applications.


36. Explain Microdata in HTML5.

Using Microdata, the metadata is nested within existing content on web pages. Search engines extract the microdata from a web page to provide a good browsing experience.


37. List some of the formatting elements in HTML5.

HTML5 holds some new and old formatting elements, all together here is the list:

  • Marked text
  • Emphasized text
  • Subscripts
  • Superscripts
  • Small text
  • Deleted text
  • Inserted text


38. What is the difference between HTML and XHTML?

HTML stands for HyperText Markup Language and XHTML stands for eXtensible HyperText Markup Language which is defined in XML format.


39. What is an API in HTML5?

API stands for Application Programming Interfaces and is a way to create applications. They use pre-built components. Using the available APIs, developers can integrate the features into their websites.


40. List the APIs available in HTML5.

The HTML5 standard introduced a number of new APIs. Here is a small list:

  • Constraint Validation API
  • Text Track API
  • Media API
  • Command API
  • User Interaction
  • Data Transfer API
  • History API
  • Application Cache API


41. What is a manifest file in HTML?

With the introduction of application cache, a web application is accessible without an internet connection. Every page of the web application should hold the manifest attribute to get cached.


42. What is the difference between the font size units em and rem?

By default, the font size in a browser is 16px and can be increased or decreased in the browser settings. 1em equals the font-size given in the browser. Whereas, the rem value depends on root element that is HTML tag.


43. What are the two methods that are used in form elements action attribute?

A form has an action attribute that takes two values, Post and Get (default). The Post method is used to submit (insert\update\delete) data whereas, Get method is used to get some data.


44. What is Web SQL?

HTML5 has introduced a database connection to store values on the client side. Web SQL is such a database in the browser which holds client information. It is important to note that Web SQL does not store critical data (like passwords) in it.


45. What are the minimum number of HTML tags are required to create an HTML page?

A minimum of 3 tags (HTML, head, and body) are required to create a working HTML page.

Q1. What are the payment options?
A1. We have multiple payment options: 1) Book your course on our webiste by clicking on Buy this course button on top right of this course page 2) Pay via Invoice using any credit or debit card 3) Pay to our UK or India bank account 4) If your HR or employer is making the payment, then we can send them an invoice to pay.

Q2. Will I get certificate?
A2. Yes, you will receive course completion certificate from Uplatz confirming that you have completed this course with Uplatz. Once you complete your learning please submit this for to request for your certificate https://training.uplatz.com/certificate-request.php

Q3. How long is the course access?
A3. All our video courses comes with lifetime access. Once you purchase a video course with Uplatz you have lifetime access to the course i.e. forever. You can access your course any time via our website and/or mobile app and learn at your own convenience.

Q4. Are the videos downloadable?
A4. Video courses cannot be downloaded, but you have lifetime access to any video course you purchase on our website. You will be able to play the videos on our our website and mobile app.

Q5. Do you take exam? Do I need to pass exam? How to book exam?
A5. We do not take exam as part of the our training programs whether it is video course or live online class. These courses are professional courses and are offered to upskill and move on in the career ladder. However if there is an associated exam to the subject you are learning with us then you need to contact the relevant examination authority for booking your exam.

Q6. Can I get study material with the course?
A6. The study material might or might not be available for this course. Please note that though we strive to provide you the best materials but we cannot guarantee the exact study material that is mentioned anywhere within the lecture videos. Please submit study material request using the form https://training.uplatz.com/study-material-request.php

Q7. What is your refund policy?
A7. Please refer to our Refund policy mentioned on our website, here is the link to Uplatz refund policy https://training.uplatz.com/refund-and-cancellation-policy.php

Q8. Do you provide any discounts?
A8. We run promotions and discounts from time to time, we suggest you to register on our website so you can receive our emails related to promotions and offers.

Q9. What are overview courses?
A9. Overview courses are 1-2 hours short to help you decide if you want to go for the full course on that particular subject. Uplatz overview courses are either free or minimally charged such as GBP 1 / USD 2 / EUR 2 / INR 100

Q10. What are individual courses?
A10. Individual courses are simply our video courses available on Uplatz website and app across more than 300 technologies. Each course varies in duration from 5 hours uptop 150 hours. Check all our courses here https://training.uplatz.com/online-it-courses.php?search=individual

Q11. What are bundle courses?
A11. Bundle courses offered by Uplatz are combo of 2 or more video courses. We have Bundle up the similar technologies together in Bundles so offer you better value in pricing and give you an enhaced learning experience. Check all Bundle courses here https://training.uplatz.com/online-it-courses.php?search=bundle

Q12. What are Career Path programs?
A12. Career Path programs are our comprehensive learning package of video course. These are combined in a way by keeping in mind the career you would like to aim after doing career path program. Career path programs ranges from 100 hours to 600 hours and covers wide variety of courses for you to become an expert on those technologies. Check all Career Path Programs here https://training.uplatz.com/online-it-courses.php?career_path_courses=done

Q13. What are Learning Path programs?
A13. Learning Path programs are dedicated courses designed by SAP professionals to start and enhance their career in an SAP domain. It covers from basic to advance level of all courses across each business function. These programs are available across SAP finance, SAP Logistics, SAP HR, SAP succcessfactors, SAP Technical, SAP Sales, SAP S/4HANA and many more Check all Learning path here https://training.uplatz.com/online-it-courses.php?learning_path_courses=done

Q14. What are Premium Career tracks?
A14. Premium Career tracks are programs consisting of video courses that lead to skills required by C-suite executives such as CEO, CTO, CFO, and so on. These programs will help you gain knowledge and acumen to become a senior management executive.

Q15. How unlimited subscription works?
A15. Uplatz offers 2 types of unlimited subscription, Monthly and Yearly. Our monthly subscription give you unlimited access to our more than 300 video courses with 6000 hours of learning content. The plan renews each month. Minimum committment is for 1 year, you can cancel anytime after 1 year of enrolment. Our yearly subscription gives you unlimited access to our more than 300 video courses with 6000 hours of learning content. The plan renews every year. Minimum committment is for 1 year, you can cancel the plan anytime after 1 year. Check our monthly and yearly subscription here https://training.uplatz.com/online-it-courses.php?search=subscription

Q16. Do you provide software access with video course?
A16. Software access can be purchased seperately at an additional cost. The cost varies from course to course but is generally in between GBP 20 to GBP 40 per month.

Q17. Does your course guarantee a job?
A17. Our course is designed to provide you with a solid foundation in the subject and equip you with valuable skills. While the course is a significant step toward your career goals, its important to note that the job market can vary, and some positions might require additional certifications or experience. Remember that the job landscape is constantly evolving. We encourage you to continue learning and stay updated on industry trends even after completing the course. Many successful professionals combine formal education with ongoing self-improvement to excel in their careers. We are here to support you in your journey!

Q18. Do you provide placement services?
A18. While our course is designed to provide you with a comprehensive understanding of the subject, we currently do not offer placement services as part of the course package. Our main focus is on delivering high-quality education and equipping you with essential skills in this field. However, we understand that finding job opportunities is a crucial aspect of your career journey. We recommend exploring various avenues to enhance your job search:
a) Career Counseling: Seek guidance from career counselors who can provide personalized advice and help you tailor your job search strategy.
b) Networking: Attend industry events, workshops, and conferences to build connections with professionals in your field. Networking can often lead to job referrals and valuable insights.
c) Online Professional Network: Leverage platforms like LinkedIn, a reputable online professional network, to explore job opportunities that resonate with your skills and interests.
d) Online Job Platforms: Investigate prominent online job platforms in your region and submit applications for suitable positions considering both your prior experience and the newly acquired knowledge. e.g in UK the major job platforms are Reed, Indeed, CV library, Total Jobs, Linkedin.
While we may not offer placement services, we are here to support you in other ways. If you have any questions about the industry, job search strategies, or interview preparation, please dont hesitate to reach out. Remember that taking an active role in your job search process can lead to valuable experiences and opportunities.