We may earn an affiliate commission when you visit our partners.
Ravi Puralena
In this course, we’ll guide you through a series of hands-on projects. You’ll build your own animations used in telling stories, in conveying data for presentations and in simple games for motivating kids. Everything will be done using only HTML, CSS and Javascript (ES6), so you’ll gain the foundational skills applicable to any other visualization or game framework you might wish to use later.
Note: discussion forums in guided projects such as this one are not monitored or supported by Coursera staff or instructors.
Register for this course and see more details by visiting:
OpenCourser.com/course/lijivt/javascript
What's inside
Syllabus
Project Overview
You’ll build your own animations used in telling stories, in conveying data for presentations and in simple games for motivating kids.
Good to know
Good to know
Know what's good ,
what to watch for , and
possible dealbreakers
Provides learners with useful, relevant CSS and JavaScript skills
Focuses learners on practical application through hands-on projects
Learners will need to already have basic familiarity with HTML, CSS, and JavaScript
Covers the basics of animation, data visualization, and game development
Taught by Ravi Puralena, who has experience in animation and game development
Save this course
Save Javascript animation for websites, storytelling, data visualization and games to your list so you can find it easily later:
Save
Save
Reviews summary
Javascript animation fundamentals
Learners say this course provides a great introduction to web animation, storytelling, data visualization, and games with Javascript. With engaging assignments, clear instruction, and a concise and fun curriculum, students express they had a positive learning experience. Many reviewers reported they appreciated the lack of setup needed and the chance to experiment directly within the browser. The majority of students found the course well-paced and beginner-friendly, but more advanced learners said they wished for a deeper dive into the code.
Projects are both fun and educational
"Quite a fun project to work on and the instructions/teaching materials and topic provided in this course was really easy to understand."
"Good and easy project.Also every requirement were available on instructors behalf only. "
Clear and concise instruction
"Really Nice course and Instructor is clear, concise and his way of getting us involved and try things for ourselves is awesome."
Work directly in the browser
"Loved this course! I really love how we can try out various things without installing anything with a guide. Thank you so much for this amazing course."
Some learners wanted deeper dives into code
"The Code was not explained much in detail, the general remarks on the utility of visualizations would have been better spend with explaining to code more I think."
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 Javascript animation for websites, storytelling, data visualization and games with these
activities:
Read 'Head First HTML and CSS' by Elisabeth Robson
Show steps
This book provides a comprehensive and beginner-friendly introduction to HTML and CSS. It will help strengthen your understanding of the fundamentals
View
Head First JavaScript Programming
on Amazon
Show steps
-
Obtain a copy of 'Head First HTML and CSS'
-
Read through the book, taking notes and highlighting important concepts
-
Complete the exercises and challenges presented in the book
Review HTML, CSS, and JavaScript basics before starting the course
Show steps
Refreshing prior knowledge in HTML, CSS, and JavaScript will ensure a stronger foundation for learning advanced concepts
Browse courses on
HTML
Show steps
-
Go through your notes or textbooks from previous courses
-
Review online materials or tutorials on HTML, CSS, and JavaScript basics
-
Practice writing simple code snippets to test your understanding
Follow online tutorials on MDN Web Docs
Show steps
MDN Web Docs offers comprehensive tutorials that cover HTML, CSS, and JavaScript. Following these tutorials will provide a good grounding
Browse courses on
HTML
Show steps
-
Go to MDN Web Docs website
-
Browse the tutorials section for HTML, CSS, and JavaScript
-
Select a tutorial of interest and follow the instructions
Five other activities
Expand to see all activities and additional details
Show all eight activities
Join a study group or online forum for HTML, CSS, and JavaScript
Show steps
Engaging with other learners reinforces knowledge and provides opportunities to learn from different perspectives
Browse courses on
HTML
Show steps
-
Search for online study groups or forums related to HTML, CSS, and JavaScript
-
Join a group or forum that aligns with your learning style
-
Participate in discussions, ask questions, and share knowledge
Practice coding challenges on LeetCode or HackerRank
Show steps
Practice reinforces understanding and solidifies skills. Use LeetCode or HackerRank to focus on coding questions involving HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
-
Create an account on LeetCode or HackerRank
-
Search for coding challenges tagged with HTML, CSS, and JavaScript
-
Solve the challenges and review the solutions provided
Create a collection of resources on HTML, CSS, and JavaScript
Show steps
Creating a resource compilation helps organize and reinforce knowledge. Gather useful articles, tutorials, and code examples related to HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
-
Identify reputable sources for HTML, CSS, and JavaScript
-
Bookmark or save articles, tutorials, and code examples relevant to the topics
-
Organize the resources into categories or sections
-
Review the compilation regularly and add new resources as needed
Build a simple web page using HTML, CSS, and JavaScript
Show steps
Building a project allows for application of skills learned. Start by creating a simple web page that incorporates HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
-
Plan the layout and content of the web page
-
Write the HTML code for the structure of the page
-
Add CSS styles to enhance the visual appearance
-
Incorporate JavaScript for interactivity or animations
-
Test the web page in different browsers
Attend a workshop on HTML, CSS, or JavaScript
Show steps
Workshops provide an immersive learning experience where you can learn from experts and work on practical projects
Browse courses on
HTML
Show steps
-
Search for upcoming workshops on HTML, CSS, or JavaScript in your area or online
-
Register for a workshop that aligns with your learning goals
-
Attend the workshop and actively participate in exercises and discussions
Read 'Head First HTML and CSS' by Elisabeth Robson
Show steps
This book provides a comprehensive and beginner-friendly introduction to HTML and CSS. It will help strengthen your understanding of the fundamentals
View
Head First JavaScript Programming
on Amazon
Show steps
Show steps
Show steps
- Obtain a copy of 'Head First HTML and CSS'
- Read through the book, taking notes and highlighting important concepts
- Complete the exercises and challenges presented in the book
Review HTML, CSS, and JavaScript basics before starting the course
Show steps
Refreshing prior knowledge in HTML, CSS, and JavaScript will ensure a stronger foundation for learning advanced concepts
Browse courses on
HTML
Show steps
Show steps
Show steps
- Go through your notes or textbooks from previous courses
- Review online materials or tutorials on HTML, CSS, and JavaScript basics
- Practice writing simple code snippets to test your understanding
Follow online tutorials on MDN Web Docs
Show steps
MDN Web Docs offers comprehensive tutorials that cover HTML, CSS, and JavaScript. Following these tutorials will provide a good grounding
Browse courses on
HTML
Show steps
Show steps
Show steps
- Go to MDN Web Docs website
- Browse the tutorials section for HTML, CSS, and JavaScript
- Select a tutorial of interest and follow the instructions
Five other activities
Expand to see all activities and additional details
Show all eight activities
Join a study group or online forum for HTML, CSS, and JavaScript
Show steps
Engaging with other learners reinforces knowledge and provides opportunities to learn from different perspectives
Browse courses on
HTML
Show steps
Show steps
Show steps
- Search for online study groups or forums related to HTML, CSS, and JavaScript
- Join a group or forum that aligns with your learning style
- Participate in discussions, ask questions, and share knowledge
Practice coding challenges on LeetCode or HackerRank
Show steps
Practice reinforces understanding and solidifies skills. Use LeetCode or HackerRank to focus on coding questions involving HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
Show steps
Show steps
- Create an account on LeetCode or HackerRank
- Search for coding challenges tagged with HTML, CSS, and JavaScript
- Solve the challenges and review the solutions provided
Create a collection of resources on HTML, CSS, and JavaScript
Show steps
Creating a resource compilation helps organize and reinforce knowledge. Gather useful articles, tutorials, and code examples related to HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
Show steps
Show steps
- Identify reputable sources for HTML, CSS, and JavaScript
- Bookmark or save articles, tutorials, and code examples relevant to the topics
- Organize the resources into categories or sections
- Review the compilation regularly and add new resources as needed
Build a simple web page using HTML, CSS, and JavaScript
Show steps
Building a project allows for application of skills learned. Start by creating a simple web page that incorporates HTML, CSS, and JavaScript
Browse courses on
HTML
Show steps
Show steps
Show steps
- Plan the layout and content of the web page
- Write the HTML code for the structure of the page
- Add CSS styles to enhance the visual appearance
- Incorporate JavaScript for interactivity or animations
- Test the web page in different browsers
Attend a workshop on HTML, CSS, or JavaScript
Show steps
Workshops provide an immersive learning experience where you can learn from experts and work on practical projects
Browse courses on
HTML
Show steps
Show steps
Show steps
- Search for upcoming workshops on HTML, CSS, or JavaScript in your area or online
- Register for a workshop that aligns with your learning goals
- Attend the workshop and actively participate in exercises and discussions
Career center
Learners who complete Javascript animation for websites, storytelling, data visualization and games will develop knowledge and skills
that may be useful to these careers:
Front-End Developer
Front-End Developer
Front-End Developers design, develop, and test a website's or web application's user interface. Using a variety of technologies, such as HTML, CSS, and JavaScript, they create visually appealing and user-friendly web pages. This course teaches the fundamentals of these technologies, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on animation and storytelling may be useful for Front-End Developers who work on creating engaging and interactive websites.
Web Developer
Web Developer
Web Developers use programming languages and scripting to create websites and applications. They may work with designers, programmers, and other professionals to create and maintain websites. This course provides a foundation in HTML, CSS, and JavaScript, which are essential for any Web Developer. Additionally, this course's focus on animation and storytelling may be useful for Web Developers who work on creating visually appealing and engaging websites.
Motion Designer
Motion Designer
Motion Designers create visual effects and animations for movies, television, video games, and other media. They use a variety of software and techniques to create realistic and engaging animations. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on animation and storytelling may be useful for Motion Designers who work on creating visually appealing and engaging animations.
User Experience Designer
User Experience Designer
User Experience Designers research, design, and evaluate user interfaces for websites, applications, and other products. They work to ensure that users have a positive and efficient experience when using these products. This course provides a foundation in HTML, CSS, and JavaScript, which are essential for understanding the technical aspects of user interface design. Additionally, this course's focus on animation and storytelling may be useful for User Experience Designers who work on creating visually appealing and engaging products.
Game Developer
Game Developer
Game Developers design, develop, and test video games. They use a variety of programming languages and software to create engaging and entertaining games. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on animation and storytelling may be useful for Game Developers who work on creating visually appealing and engaging games.
Data Visualization Specialist
Data Visualization Specialist
Data Visualization Specialists create visual representations of data. They use a variety of techniques to make data more accessible and understandable. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on data visualization may be useful for Data Visualization Specialists who work on creating visually appealing and engaging data visualizations.
Marketing Specialist
Marketing Specialist
Marketing Specialists develop and execute marketing campaigns to promote products and services. They use a variety of techniques to reach target audiences and create brand awareness. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on storytelling and data visualization may be useful for Marketing Specialists who work on creating engaging and effective marketing campaigns.
Product Manager
Product Manager
Product Managers oversee the development and launch of new products. They work with teams of engineers, designers, and other professionals to ensure that products meet customer needs. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on storytelling and data visualization may be useful for Product Managers who work on creating and launching successful products.
Business Analyst
Business Analyst
Business Analysts use data and analysis to identify and solve business problems. They work with stakeholders to develop and implement solutions that improve business performance. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on data visualization may be useful for Business Analysts who work on analyzing and presenting data to decision-makers.
Software Engineer
Software Engineer
Software Engineers design, develop, and maintain software systems. They use a variety of programming languages and software to create software that meets the needs of users. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. However, this course's focus on animation and storytelling may be less relevant for Software Engineers who work on developing software systems that do not require these skills.
Information Architect
Information Architect
Information Architects design and organize websites and applications. They work with stakeholders to create user-friendly and efficient information structures. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on storytelling and data visualization may be useful for Information Architects who work on creating and organizing information in a clear and concise way.
UX Writer
UX Writer
UX Writers create written content for websites, applications, and other products. They work with designers and other professionals to ensure that users have a positive and efficient experience when using these products. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. Additionally, this course's focus on storytelling and data visualization may be useful for UX Writers who work on creating engaging and effective written content.
Technical Writer
Technical Writer
Technical Writers create documentation for software, hardware, and other products. They work with engineers and other professionals to create clear and concise documentation that helps users understand and use products. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. However, this course's focus on animation and storytelling may be less relevant for Technical Writers who work on creating documentation that does not require these skills.
Visual Designer
Visual Designer
Visual Designers create visual concepts and designs for websites, applications, and other products. They work with designers and other professionals to create visually appealing and user-friendly products. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. However, this course's focus on animation and storytelling may be less relevant for Visual Designers who work on creating visual concepts and designs that do not require these skills.
Project Manager
Project Manager
Project Managers plan, execute, and close projects. They work with teams of people to achieve project goals. This course provides a foundation in HTML, CSS, and JavaScript, which can be useful for anyone looking to pursue a career in this field. However, this course's focus on animation and storytelling may be less relevant for Project Managers who work on projects that do not require these skills.
For more career information including salaries, visit:
OpenCourser.com/course/lijivt/javascript
Reading list
We've selected eight 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
Javascript animation for websites, storytelling, data visualization and games.
This comprehensive book covers the basics of JavaScript as well as advanced topics like functional programming and asynchronous programming. It's written in a clear and engaging style, making it suitable for both beginners and experienced developers.
Save
Provides a collection of reusable JavaScript patterns. It covers topics such as inheritance, encapsulation, and error handling. It's a valuable resource for developers who want to write maintainable and scalable JavaScript code.
Provides a deep dive into the core principles of JavaScript, helping you understand the language's strengths and weaknesses. It's valuable as a reference for experienced developers and as a learning resource for beginners.
Save
Provides advanced techniques for using CSS to create complex and visually appealing web pages. It covers topics such as CSS preprocessors, grid layouts, and animation. It's a valuable resource for experienced web developers who want to take their skills to the next level.
Provides a practical guide to data visualization using JavaScript. It covers techniques for creating various types of charts and graphs, as well as best practices for designing effective data visualizations.
Teaches the fundamentals of game development using JavaScript. It covers topics such as game physics, collision detection, and AI. It's a valuable resource for aspiring game developers.
Provides a visual and interactive approach to learning HTML and CSS. It covers the basics of the languages as well as advanced topics like web typography and responsive design.
Save
Is designed to teach JavaScript to children. It covers the basics of the language in a fun and engaging way. It's a valuable resource for parents and educators who want to introduce children to programming.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/lijivt/javascript
Share
Similar courses
Here are nine courses similar to
Javascript animation for websites, storytelling, data visualization and games.
Microsoft Project for the Web Fundamentals
OpenCourser.com/course/fzvdwe/microsoft
Microsoft Project for the Web Fundamentals
Git Fundamentals
OpenCourser.com/course/wyxj86/git
Git Fundamentals
Programming Foundations with Python
OpenCourser.com/course/gx5o1p/udacity
Programming Foundations with Python
Analyzing Data on AWS
OpenCourser.com/course/jfplqf/analyzing
Analyzing Data on AWS
Configuring, Compiling, and Debugging TypeScript 4 Projects
OpenCourser.com/course/vqc2yh/configuring
Configuring, Compiling, and Debugging TypeScript 4...
Easily Estimate Projects and Products
OpenCourser.com/course/lytj6b/easily
Easily Estimate Projects and Products
Leadership and Management for PM Practitioners in IT
OpenCourser.com/course/83ztph/leadership
Leadership and Management for PM Practitioners in IT
Beginner’s Guide to Project Management
OpenCourser.com/course/md5qhg/beginner's
Beginner’s Guide to Project Management
GitLab Fundamentals
OpenCourser.com/course/xb79ai/gitlab
GitLab Fundamentals
Effort
2 hours
Level
Intermediate
Via
Coursera
Institution
Coursera Project Network
Instructor
Ravi Puralena
Language
English
Transcripts
Español
Français
Deutsch
Italiano
العربية
Pусский
tiếng Việt
Good to know
Provides learners with useful, relevant CSS and JavaScript skills
Focuses learners on practical application through hands-on projects
Learners will need to already have basic familiarity with HTML, CSS, and JavaScript
Covers the basics of animation, data visualization, and game development
Taught by Ravi Puralena, who has experience in animation and game development
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