Intermediate Coders: Use JavaScript to Make Web Apps and Art from Udemy

"This guy knows his stuff. Really good course. Has a ton of content. I watch this all the time. His SVG knowledge is impressive. I also liked the React stuff." - Daniel S.

Do you want to take the next steps in your web development career or programming hobby? This course is for you.

This course is project-based so you will not be learning a bunch of useless coding practices. At the end of this course you will have real world apps to use in your portfolio. We feel that project based training content is the best way to get from A to B. Taking this course means that you learn practical, employable skills immediately.

In Part 1, you will learn hands-on how to create SVG animations in the browser using HTML & CSS. Together with your expert instructor Chris Veillette of Mammoth Interactive, you will:

Recognize why you should use SVGs for web development.
Create SVG shapes.
Embed SVG on a web page.
Make a landscape scene entirely with code.

In Part 2, you will master the fundamentals of React and Redux by developing apps. You will learn how to do all of the following, and more.

Lay out a web app in a logical way
Use JSX, a pre-processor that adds XML syntax to JavaScript
Build a single-page app using React Router
Code in ES6 and JavaScript
Use webpack, a bundler for code
Transition from webpack 1.0 to webpack 2.0
Write modular CSS
Use Redux, a predictable state container for JavaScript apps
Refactor code (alter code to make it simpler and more efficient)
Fix bugs and handle errors

The beauty of taking an online course like this is the ability to replay any of the lectures at any time. There is no time limit or final tests. You get to learn at your own pace with a practical model method of learning.

One of the best features is that you can watch the courses at any speed you want. This means you can speed up the or slow down the video if you want to.

You can use the projects you build in this course to add to your LinkedIn profile. Give your portfolio fuel to take your career to the next level.

Learning how to code is a great way to jump in a new career or enhance your current career. Coding is the new math and learning how to code will propel you forward for any situation.

Learn it today and get a head start for tomorrow. People who can master technology will rule the future.

What's inside

Syllabus

Use code to make a web graphic

What is an SVG?

Introduction Continued

Creating Rectangle and Circles

Get here - source files from the projects of this section.

Get here - the source files from this section!

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Covers SVG animations, which can enhance web development projects by adding interactive and visually appealing elements to websites

Teaches React and Redux, which are industry-standard tools for building dynamic and scalable web applications

Explores Webpack, a module bundler, which is essential for managing dependencies and optimizing code in modern JavaScript projects

Requires learners to transition from Webpack 1.0 to 2.0, which may be time-consuming for learners who are new to Webpack

Emphasizes project-based learning, which allows learners to build a portfolio of real-world applications to showcase their skills

Includes ES6, which is a version of Javascript released in 2015, so learners may need to learn newer versions of Javascript on their own

Reviews summary

Hands-on javascript with svg and react

According to learners, this course is a practical, project-focused journey into JavaScript for creating web apps and art, well-suited for building a portfolio. Many praise the instructor's knowledge and teaching style, finding him enthusiastic and clear. The SVG section is highlighted as particularly engaging and useful. While generally well-received, some past students noted the React section can be fast-paced, and there were mentions of challenges with outdated library versions like Webpack, requiring external troubleshooting. It is best suited for intermediate coders.

SVG part is cool and useful.

"The SVG section is super cool and practical."

"Loved the SVG art part, really unique."

"The SVG stuff is amazing stuff."

"I found the SVG section quite useful."

Instructor is knowledgeable and engaging.

"Chris is a fantastic teacher and really knows his stuff."

"Chris has a great teaching style and makes learning fun and engaging."

"He knows his stuff and explains well"

"Instructor is enthusiastic and knowledgeable."

Build real-world apps for portfolio.

"learn by building, perfect for portfolio"

"real world applications, projects you can showcase"

"The projects are excellent and practical."

"fantastic projects that you can build your portfolio on."

Minor editing and audio issues.

"editing was a bit jumpy at times."

"I wished there was more explanations [and] less editing jumpiness."

"Noticed some slight audio inconsistencies."

Some parts move quickly.

"some lessons jump around a little and are paced quickly."

"The React part felt very fast compared to the SVG part."

"You definitely need some prior knowledge of HTML, CSS, and JS."

"Could use a bit more in-depth explanation in places."

Requires updates, especially Webpack.

"Ran into issues with webpack updates, needed to adjust code."

"Had to adjust for the new version of Webpack which took extra time."

"The course relies on somewhat outdated versions of libraries."

"Be prepared to troubleshoot due to dependency versions."

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 Intermediate Coders: Use JavaScript to Make Web Apps and Art with these activities:

Review JavaScript Fundamentals

Show steps

Solidify your understanding of JavaScript fundamentals before diving into React and SVG animations. Refreshing these concepts will make it easier to grasp the more advanced topics covered in the course.

Browse courses on JavaScript Fundamentals

Show steps

Review data types, variables, and operators.
Practice writing basic JavaScript functions.
Work through online JavaScript tutorials.

Read "Eloquent JavaScript"

Show steps

Deepen your understanding of JavaScript with a comprehensive book. Reading this book will provide a solid foundation for the React and SVG animation topics covered in the course.

View Eloquent JavaScript, 4th Edition on Amazon

Show steps

Read the first few chapters covering JavaScript basics.
Work through the exercises at the end of each chapter.
Experiment with the code examples in your own projects.

Create an SVG Animation Tutorial

Show steps

Reinforce your SVG knowledge by creating a tutorial for others. Teaching others is a great way to solidify your own understanding of the material.

Show steps

Choose a simple SVG animation to explain.
Write a step-by-step guide with code examples.
Record a video tutorial demonstrating the animation.
Share your tutorial on a blog or video platform.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple React Component Library

Show steps

Practice building reusable React components to solidify your understanding of React's component-based architecture. This project will help you apply the concepts learned in the React section of the course.

Show steps

Plan a set of basic UI components (e.g., button, input, card).
Create each component with appropriate props and styling.
Document your components with examples and usage instructions.
Publish your component library to npm (optional).

Practice React State Management with Redux

Show steps

Master Redux by working through practice exercises. Redux can be challenging, so dedicated practice is essential for understanding its concepts and usage.

Show steps

Set up a basic Redux store with actions and reducers.
Implement a simple counter application using Redux.
Extend the counter application with more complex features.

Read "React Design Patterns and Best Practices"

Show steps

Learn best practices for React development. This book will help you write cleaner, more maintainable React code.

View Putting Knowledge to Work on Amazon

Show steps

Read chapters on component design and state management.
Apply the design patterns to your own React projects.
Refactor existing code to improve its structure and readability.

Contribute to an Open Source React Project

Show steps

Gain real-world experience by contributing to an open-source React project. This will expose you to different coding styles, project structures, and collaborative workflows.

Show steps

Find a React project on GitHub that interests you.
Read the project's contribution guidelines.
Identify a bug or feature to work on.
Submit a pull request with your changes.

Career center

Learners who complete Intermediate Coders: Use JavaScript to Make Web Apps and Art will develop knowledge and skills that may be useful to these careers:

Frontend Developer

A Frontend Developer builds the user interface and user experience of websites and web applications. This course helps build a foundation in the core technologies used in frontend development. The course covers HyperText Markup Language and Cascading Style Sheets to create Scalable Vector Graphics animations, as well as JavaScript, Extensible Markup Language syntax, and React to build interactive web applications. Skills in debugging, refactoring, and cross-browser compatibility covered in the course equip a Frontend Developer to create efficient and user-friendly web applications. The project-based structure allows Frontend Developers to build a portfolio of employable skills.

See salaries and explore the career path for Frontend Developer

JavaScript Developer

A JavaScript Developer specializes in using JavaScript to build interactive web applications. This course is directly relevant to the skills required for this role. The course teaches how to use JavaScript, Extensible Markup Language syntax, React, and Redux for building user interfaces and managing application state. A JavaScript Developer will learn to create Scalable Vector Graphics animations, develop single-page applications, and implement modular Cascading Style Sheets. You will learn how to code in ES6 and to use webpack to bundle code. This course provides the practical skills a JavaScript Developer needs to excel in their role.

See salaries and explore the career path for JavaScript Developer

React Developer

A React Developer specializes in using the React library to build user interfaces. This course teaches React. The course covers the fundamentals of React and Redux. You will learn how to lay out web applications logically, use Extensible Markup Language syntax, build single-page applications, and manage state. A React Developer will be equipped with the skills and knowledge to build robust, scalable, and maintainable user interfaces.

See salaries and explore the career path for React Developer

Full-Stack Developer

A Full Stack Developer works on both the frontend and backend of web applications. This course is highly relevant for Full Stack Developers looking to strengthen their frontend skills. The course covers both Scalable Vector Graphics animations and the fundamentals of React and Redux. With the ability to create dynamic user interfaces and manage application state, a Full Stack Developer will be well-equipped to handle all aspects of web application development. This course helps you to build a portfolio of practical, employable skills that makes you a more versatile and valuable developer.

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

Web Application Developer

A Web Application Developer designs, codes, and tests web-based applications. This course directly aligns with the skills required for this role. The course focuses on building real-world applications using React, a JavaScript library for building user interfaces. It teaches how to lay out web applications logically, use Extensible Markup Language syntax, build single-page applications, and use Redux for state management. A Web Application Developer will learn to develop and deploy robust and scalable web applications, making them a valuable asset to their development team.

See salaries and explore the career path for Web Application Developer

User Interface Engineer

A User Interface Engineer focuses on the technical implementation of user interfaces for web and mobile applications. This course allows a User Interface Engineer to refine skills in the technologies essential for building modern user interfaces. The course provides hands-on experience in creating Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets and equips one to master React, a popular library for building user interfaces. You will learn to handle events, manage application state, and implement routing. A User Interface Engineer will gain the skills to develop interactive and efficient user interfaces.

See salaries and explore the career path for User Interface Engineer

User Experience Developer

A User Experience Developer focuses on creating engaging and user-friendly web experiences. This course provides skills in technologies that are essential for creating interactive and dynamic user interfaces. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets and equips one to master React for building user interface components. The course helps a User Experience Developer to build more engaging web applications.

See salaries and explore the career path for User Experience Developer

Creative Coder

A Creative Coder uses code as a medium for artistic expression. This course is a great fit for Creative Coders who want to explore the possibilities of web-based art. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets. With the ability to create intricate and dynamic visuals, a Creative Coder will be able to push the boundaries of digital art. This course helps you to build a foundation for creating interactive and engaging art experiences on the web.

See salaries and explore the career path for Creative Coder

E-Learning Developer

An E-Learning Developer builds online courses and training materials. This course is beneficial for E-Learning Developers who want to create interactive and engaging learning experiences. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets, as well as how to build web applications using React. This course helps an E-Learning Developer to create courses with interactive elements and dynamic content.

See salaries and explore the career path for E-Learning Developer

Software Engineer

A Software Engineer is involved in the design, development, testing, and maintenance of software systems. This course is beneficial for Software Engineers, especially those working on web-based applications. This course offers training in React and Redux, widely used technologies in frontend development. The course will help any Software Engineer learn how to build Scalable Vector Graphics animations, develop single-page applications, manage application state, and implement routing. You will have an opportunity to broaden your skillset and contribute to the development of modern web applications.

See salaries and explore the career path for Software Engineer

Web Designer

A Web Designer plans, designs, and builds websites and webpages. This course may be useful for Web Designers who want to enhance their skills in creating interactive and dynamic web content. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets. It also delves into the fundamentals of React, allowing a Web Designer to build single-page applications and implement modular Cascading Style Sheets. This course helps a Web Designer to learn techniques to bring websites to life, making them more engaging and visually appealing.

See salaries and explore the career path for Web Designer

Digital Artist

A Digital Artist creates art using digital tools and technologies. This course may be helpful for Digital Artists who wish to incorporate web-based art into their repertoire. This course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets. With the ability to create intricate and dynamic visuals, a Digital Artist will be able to expand their artistic toolkit and explore new forms of expression. You will gain some of the skills needed to create interactive and engaging art experiences on the web.

See salaries and explore the career path for Digital Artist

Game Developer

A Game Developer creates video games for various platforms. This course may be useful for Game Developers who want to create web-based games or interactive game elements for websites. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets, which can be used to create game assets and animations. With the ability to create interactive and dynamic visuals, a Game Developer can expand their skillset and explore new possibilities for web-based games. Additionally knowing React may help you build user interfaces in certain game engines.

See salaries and explore the career path for Game Developer

Technical Artist

A Technical Artist bridges the gap between art and technology in game development and animation. This course may be helpful for Technical Artists who wish to create web-based art or interactive elements for games and animations. The course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets, which can be used to create game art and animations. This will help enhance the technical skillset, allowing them to contribute to the creation of engaging web experiences.

See salaries and explore the career path for Technical Artist

Instructional Designer

An Instructional Designer creates learning experiences and materials. This course may be useful for Instructional Designers who want to incorporate interactive web-based elements into their courses. This course teaches how to create Scalable Vector Graphics animations using HyperText Markup Language and Cascading Style Sheets, and how to build web applications using React. An Instructional Designer will be able to create more engaging and effective online learning experiences with interactive components. You will have skills to enhance your instructional design projects.

See salaries and explore the career path for Instructional Designer

Intermediate Coders

Use JavaScript to Make Web Apps and Art

Here's a deal for you

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Hands-on javascript with svg and react

Activities

Career center

Reading list

Share

Similar courses