We may earn an affiliate commission when you visit our partners.
Richard Kalehoff, Rachel Manning, Daniel Silber-Baker, and Alyssa Hope
In this part, you’ll get a taste of some common production environments and tools used in a front end developer role. You'll build a web tool that allows users to run Natural Language Processing (NLP) on articles or blogs found on other websites.

What's inside

Syllabus

Get a brief introduction to build tools, including how they can help ease and advance your web development, and what some of the most common build tools are.
Read more
By the end of this lesson you will understand the reasons developers use webpack, and be able to explain at a high level what webpack does.
By the end of this lesson you will be able to explain what Sass is and its relation to CSS, and understand the steps necessary to use Sass in a project.
Add some final pieces to your Webpack project, get your full functionality back, and learn about Service Workers.
Build a web tool that allows users to run Natural Language Processing (NLP) on articles or blogs found on other websites.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches background on frontend development tools, which include automation
Introduces webpack, Sass, and service workers, which are tools and concepts fundamental to front-end development
Involves building a web tool, which provides practical, hands-on experience
Suitable for learners with an existing foundational understanding of front-end development, as it builds upon basic syntax and principles
Requires learners to understand HTML, CSS, and JavaScript prior to beginning this course

Save this course

Save Build Tools and Single Page Web Apps 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 Build Tools and Single Page Web Apps with these activities:
Attend meetups or conferences focused on front-end development
Connects you with other professionals in the field and exposes you to new ideas.
Show steps
  • Find meetups or conferences focused on front-end development.
  • Attend the events and participate in discussions.
  • Network with other attendees.
Create a basic React app with Webpack
Provides experience in setting up and using Webpack in a real-world project.
Show steps
  • Set up a new React project with Webpack.
  • Add a simple component to your project.
  • Style your component with CSS or Sass.
  • Deploy your app to a hosting platform.
Solve coding challenges related to Webpack
Strengthens your understanding of Webpack concepts and syntax.
Show steps
  • Find coding challenges related to Webpack.
  • Attempt to solve the coding challenges.
  • Review your solutions and identify areas for improvement.
Six other activities
Expand to see all activities and additional details
Show all nine activities
Follow online tutorials on advanced Webpack techniques
Provides additional guidance and insights into more advanced Webpack concepts.
Show steps
  • Search for online tutorials on advanced Webpack techniques.
  • Follow the tutorials and complete the exercises.
  • Apply the techniques you learned to your own projects.
Participate in a workshop on advanced Webpack techniques
Provides in-depth training and hands-on experience with advanced Webpack concepts.
Show steps
  • Find a workshop on advanced Webpack techniques.
  • Attend the workshop and participate in the activities.
  • Apply the techniques you learned to your own projects.
Read 'The Package: Build Fast and Reliable React Apps with Webpack'
Covers best practices of using Webpack in a front-end development environment.
Show steps
  • Read the book's first three chapters.
  • Attempt the exercises in the book's first three chapters.
  • Create a project of your own to practice using Webpack.
Write a blog post about your experience using Webpack
Provides an opportunity to reflect on and share your learning experience.
Show steps
  • Choose a topic related to your experience using Webpack.
  • Write a draft of your blog post.
  • Edit and revise your blog post.
  • Publish your blog post.
Contribute to open-source Webpack projects
Provides practical experience in using Webpack and contributes to the community.
Show steps
  • Find open-source Webpack projects on platforms like GitHub.
  • Identify an issue or feature that you can contribute to.
  • Submit a pull request with your contribution.
Build a portfolio website showcasing your Webpack skills
Demonstrates your expertise in using Webpack and highlights your portfolio of projects.
Show steps
  • Plan the structure and content of your portfolio website.
  • Design and develop your portfolio website using Webpack.
  • Add your best Webpack projects to your portfolio.
  • Deploy your portfolio website to a hosting platform.

Career center

Learners who complete Build Tools and Single Page Web Apps will develop knowledge and skills that may be useful to these careers:
Full-Stack Developer
Full Stack Developers are responsible for both the front-end and back-end development of websites and web applications. They use both front-end and back-end technologies to design, build, and maintain web applications. This course can help you build a foundation in front-end development, which is essential for Full Stack Developers.
Front-End Developer
Front-End Developers are responsible for the design and development of the user interface of websites and web applications. They use front-end technologies to create the look and feel of websites and web applications. This course can help you build a foundation in front-end development, which is essential for Front-End Developers.
Web Developer
Web Developers are responsible for the development and maintenance of websites and web applications. They use front-end technologies to design and build the user interface of websites and web applications. This course can help you build a foundation in front-end development, which is essential for Web Developers.
Software Engineer
Software Engineers are responsible for the design, development, and maintenance of software systems. They use a variety of programming languages and technologies to build software systems. This course may be useful for Software Engineers who want to learn more about front-end development.
Product Manager
Product Managers are responsible for the planning, development, and launch of new products and features. They work with engineers, designers, and other stakeholders to bring new products and features to market. This course may be useful for Product Managers who want to learn more about front-end development.
Technical Writer
Technical Writers are responsible for the creation and maintenance of technical documentation. They work with engineers, designers, and other stakeholders to create documentation that explains how to use products and services. This course may be useful for Technical Writers who want to learn more about front-end development.
Graphic designer
Graphic Designers are responsible for the creation of visual content for websites and web applications. They work with engineers and designers to create visual content that is visually appealing and communicates effectively. This course may be useful for Graphic Designers who want to learn more about front-end development.
Mobile Developer
Mobile Developers are responsible for the development and maintenance of mobile applications. They use mobile development technologies to build mobile applications for smartphones and tablets. This course may be useful for Mobile Developers who want to learn more about front-end development.
User Experience Designer
User Experience Designers are responsible for the design of user interfaces for websites and web applications. They work with engineers and designers to create user interfaces that are easy to use and visually appealing. This course may be useful for User Experience Designers who want to learn more about front-end development.
Interaction Designer
Interaction Designers are responsible for the design of user interactions with websites and web applications. They work with engineers and designers to create user interfaces that are intuitive and easy to use. This course may be useful for Interaction Designers who want to learn more about front-end development.
Information Architect
Information Architects are responsible for the organization and structure of information on websites and web applications. They work with engineers and designers to create information architectures that are easy to navigate and find information. This course may be useful for Information Architects who want to learn more about front-end development.
Project Manager
Project Managers are responsible for the planning, execution, and completion of projects. They work with stakeholders to define project goals, develop project plans, and track project progress. This course may be useful for Project Managers who want to learn more about front-end development.
Back-End Developer
Back-End Developers are responsible for the development and maintenance of the server-side of websites and web applications. They use back-end technologies to build the logic and functionality of websites and web applications. This course may be useful for Back-End Developers who want to learn more about front-end development.
Data Scientist
Data Scientists are responsible for the collection, analysis, and interpretation of data. They use a variety of data science techniques and technologies to build data-driven models and applications. This course may be useful for Data Scientists who want to learn more about front-end development.
Business Analyst
Business Analysts are responsible for the analysis of business needs and the development of solutions to meet those needs. They work with stakeholders to understand business requirements and develop solutions that meet those requirements. This course may be useful for Business Analysts who want to learn more about front-end development.

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 Build Tools and Single Page Web Apps.
Provides a comprehensive introduction to natural language processing. It covers a wide range of topics, from the basics of natural language processing to advanced topics like machine translation.
Comprehensive guide to the algorithms used in machine learning. It covers a wide range of topics, from supervised learning to unsupervised learning.
Comprehensive guide to speech and language processing. It covers a wide range of topics, from the basics of speech and language processing to advanced topics like speech recognition and natural language understanding.
Comprehensive introduction to computer graphics. It covers a wide range of topics, from the basics of computer graphics to advanced topics like ray tracing and global illumination.
Comprehensive guide to natural language processing with Python. It covers everything from basic concepts to advanced techniques.
Provides a comprehensive introduction to probability and statistics for computer science students. It covers a wide range of topics, from basic probability to advanced topics like Bayesian inference.
Comprehensive introduction to reinforcement learning. It covers a wide range of topics, from the basics of reinforcement learning to advanced topics like deep reinforcement learning.
Provides a comprehensive introduction to computer vision. It covers a wide range of topics, from image processing to object recognition.
Serves as a comprehensive reference for Service Workers, complementing the course's introduction to the technology with a deeper theoretical and practical understanding.
Comprehensive guide to Sass and Compass, two powerful tools for writing CSS. It covers everything from basic syntax to advanced techniques.
Comprehensive guide to deep learning with Python. It covers everything from the basics of neural networks to advanced topics like convolutional neural networks and recurrent neural networks.
Introduces Sass, a powerful CSS preprocessor that can simplify and speed up web development. It covers topics like variables, mixins, and functions.

Share

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

Similar courses

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