We may earn an affiliate commission when you visit our partners.

Practical HTML5

HTML5 has been around now for some time. But how do you get your head around all that comes with it? The answer is by doing. In this Practical HTML5 course, you can do exactly that by building a site from scratch, adding new HTML5, CSS3, and JavaScript features. The end result is a deeper understanding of how the various building blocks work together, and you'll have a working site as well!

This course is a very practical way to learn web development using HTML5, JavaScript, and CSS3. We start with an empty website at the beginning of module 1. With every module, new topics are introduced. Instead of showing how they work in a stand-alone demo, they are added directly to our site. The outcome is a fully-functioning site that includes all of the HTML5 topics covered in the course. The site provides an online storefront for a coffee shop named Joe's Coffee Store. Among many other features, your finished site includes support for the canvas, drag and drop, new input types, geolocation, SVG, CSS3, audio, media, and much more. To conclude, this course takes the practical approach: open an editor, follow along, and by the time the course is done you'll have the whole picture of how the different HTML5 building blocks work together and can help you in avoiding the use of plugins for your web development.

Enroll now

Or start your subscription today

And complete this course over a free trial

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Creating a Site Using HTML5

Adding Some Basic CSS and JavaScript

Navigation, Forms, and Validation

Adding Style and Layout with CSS3

Adding Functionality Using Built-in JavaScript Libraries

Using Video and Adding Graphical Elements with a Canvas

Drawing More Graphical Elements with SVG

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces real-world scenarios via building a site from scratch

Creates a working site that combines HTML5, CSS3, and JavaScript

Covers the canvas, drag and drop, new input types, geolocation, and audio

Takes a practical approach with hands-on labs

Designed for beginners with no prior HTML5 experience

Does not require extensive prerequisite knowledge

Save this course

Save Practical HTML5 to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Practical HTML5 with these activities:

Review basic HTML syntax and semantics

Show steps

Refreshes and strengthens students' understanding of HTML fundamentals, preparing them for the more advanced concepts covered in the course.

Browse courses on HTML

Show steps

Review online resources or tutorials that cover basic HTML syntax and semantics.
Practice writing valid HTML code by creating simple web pages.
Validate your code using tools like the W3C Markup Validation Service.

Read 'HTML and CSS: Design and Build Websites' by Jon Duckett

Show steps

Provides a comprehensive foundation in HTML and CSS, complementing the course material and fostering a deeper understanding of web development fundamentals.

Show steps

Acquire a copy of the book and set aside dedicated time for reading.
Read each chapter thoroughly, taking notes and highlighting key concepts.
Complete the exercises and activities included in the book to reinforce your understanding.

Practice using HTML5 elements and attributes

Show steps

Provides repetitive practice in utilizing HTML5 elements and attributes, reinforcing comprehension and proficiency.

Browse courses on HTML5

Show steps

Find online exercises or coding challenges that focus on constructing valid HTML5 structures.
Repeatedly create HTML5 documents, experimenting with various elements and attributes to achieve desired outcomes.
Review and debug your code regularly to ensure adherence to HTML5 standards and best practices.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Engage in peer discussions on the course content

Show steps

Fosters collaboration and knowledge sharing among students, reinforcing understanding and diverse perspectives.

Show steps

Join or create a study group with other students enrolled in the course.
Regularly meet to discuss course topics, share insights, and work through problems together.
Take turns presenting summaries or leading discussions on specific course modules.

Look for guidance on how to use CSS3 for styling and layout

Show steps

Assists students in mastering the use of CSS3 for styling and layout, a crucial aspect of web design covered in the course.

Browse courses on CSS3

Show steps

Identify reputable online resources or tutorials that provide comprehensive guidance on CSS3.
Systematically work through the tutorials, practicing the implementation of CSS3 properties and techniques.
Experiment with different CSS3 features to enhance the visual appeal and user experience of your website.

Develop a functional navigation system for your website

Show steps

Enhances students' understanding of navigation design and implementation, enabling them to create user-friendly websites.

Browse courses on Navigation

Show steps

Research and analyze different navigation patterns and best practices.
Design a navigation system that aligns with the website's structure and user flow.
Implement the navigation system using HTML, CSS, and JavaScript.
Test and refine the navigation to ensure optimal functionality and user experience.

Develop a video tutorial on a specific HTML5 feature

Show steps

Encourages students to synthesize their knowledge and communicate it effectively by creating a visual aid for a specific HTML5 feature.

Browse courses on HTML5

Show steps

Choose an HTML5 feature that you want to explain and demonstrate.
Script and record a video that clearly explains the feature, its benefits, and how to use it.
Edit and produce the video, ensuring high production quality and clarity.
Publish the video on a platform like YouTube or Vimeo.

Contribute to open source projects related to web development

Show steps

Provides practical experience in applying the concepts learned in the course within a collaborative open source environment.

Browse courses on Open Source

Show steps

Identify open source projects on platforms like GitHub that align with your interests and skills.
Review the project documentation and codebase to understand its functionality and contribution guidelines.
Make meaningful contributions to the project, such as bug fixes, feature enhancements, or documentation improvements.
Engage with the project community through issue tracking, discussions, and code reviews.

Career center

Learners who complete Practical HTML5 will develop knowledge and skills that may be useful to these careers:

Software Engineer

If your career goal is to become a Software Engineer, Practical HTML5 can provide a valuable foundation. The course introduces you to the fundamentals of web development, including HTML5, CSS3, and JavaScript. These technologies are essential for building interactive and dynamic web applications, which form a significant part of modern software development. Moreover, the course's emphasis on practical implementation provides hands-on experience, helping you develop the problem-solving and critical thinking skills crucial for a successful Software Engineer.

See salaries and explore the career path for Software Engineer

Sales Engineer

Practical HTML5 can be a valuable asset if you are interested in becoming a Sales Engineer in the software industry, particularly in the field of web development. The course will provide you with a solid foundation in HTML5, CSS3, and JavaScript, the core technologies used in web development. This knowledge will enable you to effectively communicate the technical capabilities and benefits of web-based products and services to potential customers. Additionally, the course's hands-on approach and focus on building a real-world website will provide you with practical examples and insights that you can share with customers, enhancing your ability to close deals.

See salaries and explore the career path for Sales Engineer

Web Designer

Practical HTML5 can be valuable for Web Designers who seek to enhance their technical skills and expand their knowledge of modern web technologies. This course provides a solid foundation in HTML5, CSS3, and JavaScript, empowering you to create visually appealing and user-friendly websites. Furthermore, the course's focus on building a real-world website helps you apply your learnings directly, fostering your growth as a skilled Web Designer.

See salaries and explore the career path for Web Designer

UI Developer

If you aspire to become a UI Developer, Practical HTML5 is a valuable course to consider. It provides a comprehensive foundation in HTML5, CSS3, and JavaScript, the core technologies used in creating user interfaces for websites and applications. Through hands-on practice in building a real-world website, you develop the skills to design and implement visually appealing and user-friendly interfaces, making you a sought-after UI Developer in the job market.

See salaries and explore the career path for UI Developer

Web Developer

The course, Practical HTML5, is a suitable option if you wish to become a Web Developer, and it will aid in the development of the skills necessary to excel in this career. The course begins by establishing the fundamentals of HTML5, CSS3, and JavaScript, which comprise the foundational technologies employed in web development and serve as the backbone of virtually every website created today.

See salaries and explore the career path for Web Developer

Front-End Developer

To become a Front-End Developer, Practical HTML5 may be beneficial. The course offers an opportunity to refine your knowledge of front-end technologies, gain experience with CSS3, and master JavaScript. The interactive approach of building a website from scratch, while incorporating new features and technologies, makes the learning process engaging and practical, helping you gain a comprehensive understanding of front-end development.

See salaries and explore the career path for Front-End Developer

Computer Science Teacher

Practical HTML5 can be a valuable asset to your skillset if you aspire to become a Computer Science Teacher. The course provides a solid foundation in HTML5, CSS3, and JavaScript, the core technologies used in web development. By gaining proficiency in these technologies, you can confidently teach students the fundamentals of web development, empowering them with essential skills for the digital age. Additionally, the course's hands-on approach and focus on building a real-world website will provide you with practical examples and insights to share with your students.

See salaries and explore the career path for Computer Science Teacher

Webmaster

Practical HTML5 can be a useful addition to your skillset if you plan to become a Webmaster. This course provides a comprehensive overview of HTML5, CSS3, and JavaScript, the fundamental technologies used in web development. By learning these technologies, you can build and maintain websites more effectively. Additionally, the course's focus on creating a real-world website will provide you with valuable hands-on experience, preparing you for the challenges of website management.

See salaries and explore the career path for Webmaster

Marketing Manager

Practical HTML5 can contribute to your success as a Marketing Manager responsible for digital marketing campaigns. The course will provide you with a solid understanding of HTML5, CSS3, and JavaScript, the fundamental technologies used in web development. By gaining proficiency in these technologies, you will be able to effectively evaluate and implement web-based marketing strategies, ensuring that your campaigns are technically sound and user-friendly. Additionally, the course's emphasis on building a real-world website will provide you with practical insights into the challenges faced by web developers, enabling you to make informed decisions and optimize your marketing efforts accordingly.

See salaries and explore the career path for Marketing Manager

Technical Writer

Practical HTML5 can contribute to your success as a Technical Writer specializing in web-related documentation. The course offers a thorough understanding of HTML5, CSS3, and JavaScript, which are the fundamental technologies used in web development. By mastering these technologies, you can effectively convey complex technical concepts to non-technical audiences. Furthermore, the course's focus on building a real-world website provides you with hands-on experience, enabling you to create clear and concise documentation that accurately reflects the functionality and implementation of web applications.

See salaries and explore the career path for Technical Writer

UX Designer

Practical HTML5 can contribute to your success as a UX Designer. The course provides a solid understanding of HTML5, CSS3, and JavaScript, which are essential technologies for building the front-end of websites and applications. By gaining proficiency in these technologies, you can create user interfaces that are not only visually appealing but also functional and user-friendly. This course will help you bridge the gap between design and development, making you a valuable asset in the UX design field.

See salaries and explore the career path for UX Designer

Full-Stack Developer

Practical HTML5 may be helpful for aspiring Full-Stack Developers. The course covers essential front-end technologies such as HTML5, CSS3, and JavaScript, which are fundamental for building user interfaces and ensuring a seamless user experience. By building a website throughout the course, you gain practical experience in implementing these technologies, enhancing your ability to contribute to full-stack development projects.

See salaries and explore the career path for Full-Stack Developer

Information Systems Manager

Practical HTML5 can play a supportive role in your pursuit of an Information Systems Manager position. The course provides a foundational understanding of HTML5, CSS3, and JavaScript, which are essential technologies for developing and managing web-based information systems. By gaining proficiency in these technologies, you can better evaluate and implement web-based solutions, enabling you to make informed decisions that drive the success of your organization's information systems.

See salaries and explore the career path for Information Systems Manager

Project Manager

Practical HTML5 may be of some use if your career goal is to become a Project Manager, particularly in the field of web development. The course will introduce you to the fundamentals of HTML5, CSS3, and JavaScript, the core technologies used in web development. This knowledge can be beneficial in understanding the technical aspects of web development projects and effectively managing teams of developers. Additionally, the course's emphasis on real-world website building can provide you with insights into the practical challenges faced during web development.

See salaries and explore the career path for Project Manager

Business Analyst

Practical HTML5 may offer some benefits if you are considering a career as a Business Analyst with a focus on technology. The course provides a foundational understanding of HTML5, CSS3, and JavaScript, which are widely used in web development. By gaining familiarity with these technologies, you can better understand the technical aspects of web-based applications and systems, enabling you to effectively analyze and document business requirements. Additionally, the course's emphasis on building a real-world website can provide you with practical insights into the development process and the challenges faced by development teams.

See salaries and explore the career path for Business Analyst

Reading list

We've selected 13 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Practical HTML5.

HTML5

Save

Good reference for this course. It covers all the basics of HTML5, including the new features and APIs. It is written in a clear and concise style, and it is easy to follow along.

Practical HTML5

Here's a deal for you

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses