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

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!

Read more

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

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
Read more
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
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
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
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
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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.
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.
Good resource 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.
Provides a comprehensive overview of HTML5, covering everything from the basics to more advanced topics. It great resource for anyone who wants to learn more about HTML5.
Good resource for this course. It covers all the basics of HTML5 and CSS3, and it provides real-world examples of how to use these technologies. It is written in a clear and concise style, and it is easy to follow along.
Good choice for beginners. It covers all the basics of HTML5, and it is written in a clear and concise style. It good choice for those who are new to HTML5, or for those who want a refresher on the basics.
Comprehensive guide to using SVG. It covers everything from the basics to more advanced topics, such as creating animations and interactivity.
Comprehensive guide to using CSS3. It covers everything from the basics to more advanced topics, such as using CSS3 media queries and animations.
Comprehensive guide to JavaScript, covering everything from the basics to more advanced topics. It great resource for anyone who wants to learn more about JavaScript.
Concise guide to the good parts of JavaScript. It covers the essential concepts of the language, and it great resource for anyone who wants to learn more about JavaScript.
Comprehensive guide to using the HTML5 canvas element. It covers everything from the basics to more advanced topics, such as creating animations and games.
Good reference for this course. It covers all the basics of HTML5 and CSS3, and it provides a lot of detail. It is written in a clear and concise style, and it is easy to follow along.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Practical HTML5.
Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
Most relevant
Build a user login system for a Django website
Most relevant
The Creative HTML5 & CSS3 Course - Build Awesome Websites
Web Design for Everybody Capstone
HTML5 and CSS Fundamentals
Hands-on Responsive Web Design 1: Media Queries & CSS...
Multicloud Foundations
Build an expense tracker app in Django
Introduction to Web Development with HTML5, CSS3, and...
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser