Frontend Development

This course is perfect if you want to learn how to code websites from scratch. You will learn the basics of HTML and CSS through interactive challenges. Along the way, you will build multiple projects, like a Google.com clone, a Space Exploration page, and a fun birthday site filled with GIFs. While most of the challenges are done in Scrimba's interactive editor, you will also learn how to use professional tools like VS Code for code editing, GitHub for hosting your code, and Netlify for deploying your projects to the world wide web.

This is perhaps the most interactive JavaScript course ever recorded. It contains 140+ coding challenges, meaning that you will finally build that ever-so-important JavaScript muscle memory. You will solve the challenges directly in the browser thanks to Scrimba's interactive video technology, so there's not setup needed. Say goodbye to "tutorial hell" and get ready to start feeling your JavaScript superpowers grow exponentially. Another unique thing with this course is that you will build projects from the very start. Instead of long and boring theoretical lessons, you will dive head-first into building products and solving challenges. At the end of the course, you will have built a game, a Chrome extension, and even a mobile app the uses Google Firebase to persist data. This is learning by doing on steroids.

This is the ideal starting point for anyone eager to learn modern React basics in the most interactive, hands-on way possible. Throughout this course, you'll tackle over 170 interactive coding challenges and build six exciting projects. If you're tired of React courses that leave you staring blankly at an empty editor screen, you're in the right place! Here, you'll **actually build React projects by the end**, giving you the confidence and skills to tackle real-world applications. Section 1: Static pages (project: ReactFacts site) In this introductory section, you'll get familiar with React basics, including components, JSX, and styling. You’ll create a simple ReactFacts site, learning about composable and declarative code, React elements, and best practices for building static pages in React. Topics covered: - Intro to React - Why React?: Composable & Declarative - React Elements - JSX - Creating custom components - Fragments - Styling with Classes Section 2: Data-Driven React (project: Travel Journal) Next, you’ll discover how to make your React apps dynamic by introducing reusable components, props, and data-driven rendering. In the inspiring Travel Journal project, you’ll map data to components, handle static assets, and use props to personalize the user experience. Topics covered: - Reusable components - Props - Evaluating JS inside JSX - Handling static assets - Mapping data to components Section 3: React State (project: Chef Claude) This module introduces you to React's state management, allowing you to handle events, manage complex state, and create responsive forms. The Chef Claude project will help you see the difference between props and state, implement conditional rendering, and dynamically style components based on user interaction. Topics covered: - Event listeners - Props vs. State - Creating & changing state - Complex state - Forms & form actions - Conditional rendering - Setting state from children - Dynamic styles Section 4: Side effects (project: Meme Generator) Explore side effects in React with this module on data fetching, controlled components, and refs. In the Meme Generator project, you’ll practice managing side effects, optimizing dependencies, and cleaning up resources, giving you a robust foundation for handling external data and effects. Topics covered: - Controlled components/forms - Functional programming in React - Fetching data - Handling side effects - Side effect dependencies - Cleaning up side effects - Refs Section 5: Capstone project 1: Tenzies game This capstone project challenges you to put everything you've learned into action by building a complete Tenzies game. Through step-by-step challenges, you'll improve your skills by learning lazy state initialization and accessibility, creating a polished, interactive experience. Topics covered: - Series of challenges to build the capstone project - Lazy state initialization - Accessibility improvements Section 6: Capstone project 2: Assembly: Endgame In this final capstone, you'll face a series of challenges to build a complex, multi-featured app. By the end of Assembly: Endgame, you’ll have gained real-world experience in problem-solving and combining all the React skills you've developed throughout the course. Topics covered: Series of challenges to build the capstone project Why this course? This course is filled with coding challenges that you'll complete by writing React code directly inside the browser! Before you know it, you'll have written six interactive React applications! You’ll also benefit from spaced learning and repetition in this course. Make sure you give yourself time (days/weeks) to finish it, and include lots of breaks. Don't try cramming it all in at once. Once you are done, you will feel confident in your React skills and be ready to continue your coding journey.

This massive UI design course teaches you to build beautiful and well-functioning user interfaces using HTML and CSS. It's filled with interactive tutorials to ensure that the knowledge sticks with you. Created by Gary Simon, the most popular online instructor on this subject. While we can all clearly recognize what a great user interface looks like, it's actually really hard to build one! That's exactly what this course is all about. In it, Gary Simon will turn you into a UI design master. He'll teach you UI design from the ground up, and give you the skills you need to make sure that your next project both looks good and feels good to use.
 
It starts from the very basics, so you don't need any UI design experience to join, just basic HTML and CSS skills.


Elevate your expertise with our Advanced React course. Building upon your foundational knowledge, this course delves into advanced React patterns, internal workings, and the implementation of complex applications using React Router. Taught by industry veteran Bob Ziroll, who has successfully guided thousands of students towards rewarding careers in front-end development, this course equips you with in-depth React proficiency that stands out in the competitive job market. Why React? As the most sought-after front-end library globally, React not only offers abundant job opportunities but also enhances your overall JavaScript proficiency. Unlike other libraries, React fosters core JavaScript skills, empowering you to master the art of web development. Take your front-end development career to the next level with our Advanced React Development course.

This course is all about making the web a better place for everyone. You'll dive into what it truly means to build accessible websites and why it's so important. You'll get to grips with all the fundamentals of accessible development, like understanding contrast ratios, exploring the accessibility tree, getting familiar with WCAG levels, and much more. But it's not just about theory. You'll be applying what you learn in interactive challenges, fixing up a real-world website that contains a range of accessibility flaws.
 By the time you finish this course, you'll have the skills and knowledge to create websites that are welcoming to everyone, making a tangible difference in the digital world.

Immerse yourself in the world of web development with our interactive "Build a Responsive Website with HTML and CSS" course. This course offers 33 engaging lessons, perfect for honing your responsive design skills. Our comprehensive course covers everything you need to know about responsive design. You'll start by understanding the fundamentals and quickly move to practical applications, including flexible containers, media queries, and mobile-first principles. Through hands-on challenges, you'll learn to adapt web layouts for various screen sizes, ensuring a seamless user experience. By the end, you'll be ready to deploy your site on Netlify, showcasing your newfound expertise.

Already know the basics of HTML and CSS? Then it's time to take the next steps in Web Development with Scrimba's "Build a Product Splash Page" course! This hands-on, engaging course is designed for learners with a basic understanding of HTML and CSS. Consisting of 22 comprehensive lessons, the course offers just over an hour of immersive content, accompanied by 15 interactive challenges. You'll create a stunning product splash page from scratch, employing contemporary design methodologies and adhering to responsive web design principles. Each lesson builds on the previous, ensuring you develop practical skills in HTML, CSS, and Flexbox. Upon completion, you will deploy your project on Netlify to showcase your new skills live. In this course, you'll build a unique hands-on project: a tool to transform your photo into an iconic Scrimba avatar. This project reinforces your learning and adds a personal touch to your portfolio. Ready to elevate your frontend capabilities and take one more step towards becoming ready for that first developer job? Let's get coding!

Become a pro at responsive web design with our comprehensive CSS Grid course. This engaging and hands-on course will guide you through the intricacies of CSS Grid, transforming your web development skills. Over 18 concise lessons, you'll master grid columns, rows, and areas, and learn to create dynamic layouts that adapt seamlessly to any device. Whether you're building mobile, tablet, or desktop layouts, this course ensures your designs are flexible and robust. Perfect for aspiring front-end developers, this course offers practical exercises and expert insights to elevate your web development game. You'll gain confidence in creating visually appealing and user-friendly websites that meet modern standards. By the end of this course, you'll have the skills to implement responsive designs that enhance user experience and optimize site performance. Join us and take a significant step towards becoming a proficient web developer with advanced CSS Grid techniques.

This course offers a comprehensive introduction to HTTP requests, REST APIs, and how to build dynamic web applications. You'll learn the fundamentals of HTTP, including request methods such as GET and POST, headers, and bodies. Through hands-on projects, you will retrieve data from APIs, send data to servers, and work with real-world APIs like JSON Placeholder and OpenWeatherMap. The course also gives you hands-on experience. You'll create a functional blog space, retrieving posts from a server and displaying them on a webpage. You’ll enhance the user interface by adding CSS styling, create forms to submit new posts, and use JavaScript to handle form submissions. You’ll also learn how to implement URL parameters and query strings to filter data. By the end of this course, you'll understand how to structure and send HTTP requests, use a basic REST API, and create interactive web pages that communicate with a server. Whether you're a beginner or looking to enhance your web development skills, this course will equip you with essential tools to build dynamic applications.

This course is your gateway to mastering APIs! It breaks down the essentials of how APIs work, how they interact with clients and servers, and how you can use them to fetch and display data in your web applications using JavaScript. You'll learn the technical concepts and get hands-on practice by building a fun, interactive project - the BoredBot! As well as programming your bot to fetch random activity suggestions from the Bored API, you will also structure it using HTML and style it with CSS. Along the way, you'll ensure the bot is accessible and user-friendly. By the end, you'll have a solid understanding of APIs, asynchronous JavaScript, and fetch, and real-world project experience that will demonstrate your skills to potential employers or clients.

In this course, you'll learn to create a dynamic, data-driven web dashboard using a combination of modern JavaScript, CSS, and API integrations. The course covers essential concepts like layout design with Flexbox, asynchronous JavaScript with Promises, and real-time data handling, including fetching cryptocurrency and weather data. Additionally, you’ll explore how to integrate user-friendly features, such as displaying the current time and weather information, while also learning to handle errors gracefully. Through completing hands-on challenges, you'll build your own responsive, personalised dashboard and deploy it as a Chrome extension.

Are you ready to elevate your JavaScript skills with a project-based approach? This course is designed to guide you through fundamental and advanced JavaScript concepts using practical, real-world challenges. Through hands-on projects, you'll explore functional methods such as .map() and .reduce(), key logical operations such as the ternary operator and short-circuiting, form submission, and much more. Next up, you'll explore increasingly advanced JavaScript concepts including loops, filter(), imports, and object destructuring by building three full projects; A meme picker, a cookie consent banner and an X/Twitter clone. You’ll learn to write cleaner, more efficient code and tackle challenges that solidify your understanding of JavaScript. By the end of this course, you'll have a solid understanding of powerful JavaScript methods and techniques ready to apply directly to your coding projects and in your coding career.

This course introduces you to the fundamentals of asynchronous JavaScript through hands-on challenges and an engaging project. You will start by learning the basics of callback functions and progress towards understanding promises, method chaining, and the power of async/await. Along the way, you'll apply these concepts in practical coding challenges, such as building a fully functional "War" card game, complete with features such as scoring, card drawing, and a final winner display. The course also explores custom JavaScript functions, the fetch API, and real-world scenarios involving asynchronous code. By the end, you'll have a strong foundation in asynchronous programming, ready to tackle more advanced JavaScript projects.