Free Course Image Full Stack Web Development

Free online courseFull Stack Web Development

Duration of the online course: 26 hours and 16 minutes

4.82

StarStarStarStarStar

(11)

Build job-ready full stack skills fast with a free web development course: HTML, CSS, JavaScript, Git, APIs, React, Node, MongoDB and hosting.

In this free course, learn about

  • Core web dev workflow: IDE setup, project structure, and responsive design principles
  • HTML fundamentals: doctype, head/body, semantic layout, lists, tables, forms, iframes, images
  • CSS essentials: selectors, combinators, grouping, specificity, colors, shadows, borders, backgrounds
  • Layout skills: box model (margin/padding), box-sizing, grids/rows/columns, responsive images
  • Build common UI: navbar (desktop/mobile), forms, spacing, footer; use browser devtools effectively
  • JavaScript basics: variables, operators, conditionals, loops, functions, arrays, objects, bind, events
  • DOM + forms: grab elements, add event listeners, preventDefault, parseFloat; build a calculator app
  • Version control with Git/GitHub: add/commit/push, CLI use, branching and resolving merge conflicts
  • Bootstrap 4: grid system, responsive utilities, navbars, cards, forms, modals, carousels, icons
  • Sass/SCSS: variables, partials/imports, mixins, extend, compilation tools, scalable stylesheet structure
  • Deploy/hosting: servers, SSH keys, file upload, domains, Nginx setup incl. multi-site configuration
  • Backend with Node: modules, NPM, build REST APIs, test with Postman, URL params, HTTP methods
  • MongoDB basics: shell usage, CRUD (search, update/PUT, delete), models, data population
  • Full-stack React app: tooling, HTTP services, promises, components, props/state, observer notifications

Course Description

Move from curiosity to confidence in web development by learning how real websites and apps are planned, built, styled, and shipped. This free online course is designed for beginners who want a practical path into full stack work, while still being valuable for self-taught developers who need a clearer structure. You will start by understanding how the web works, set up a proper coding environment with an IDE, and create your first pages with clean HTML that follows modern standards.

From there, you will learn how to turn plain pages into polished interfaces using CSS, including selectors, grouping, specificity, text formatting, colors, shadows, backgrounds, borders, spacing, grids, and responsive techniques so layouts look right on phones, tablets, and desktops. You will also practice using browser inspector tools to debug issues quickly and develop a workflow that saves time as projects grow.

Next, you will add interactivity with JavaScript and develop the kind of foundational logic that powers real products: variables, operators, conditions, loops, functions, arrays, and objects. You will apply these skills through hands-on tasks such as building a calculator and connecting code to the page with DOM selection, event listeners, and safe handling of user input. Along the way you will learn conventions for linking scripts and writing maintainable code.

To prepare you for collaborative and professional development, the course guides you through version control with Git and common workflows used with GitHub, including working from the command line and resolving merge conflicts. You will also speed up front-end production with Bootstrap by building responsive layouts and common UI components, then elevate your styling with Sass to keep your CSS scalable, reusable, and easier to maintain.

Finally, you will step into back-end and deployment essentials: hosting setup, servers, SSH, domains, and Nginx configuration. You will build with Node, understand packages with NPM, create an API, test requests, and work with MongoDB for data storage. The course then ties front end and back end together through a project-style workflow, introducing React fundamentals such as components, props, state, services, and patterns that help you structure larger applications. By the end, you will have the skills to build, troubleshoot, and deploy a complete web app with a strong foundation for your portfolio and next career step.

Course content

  • Video class: Introduction to Web Development | Full Stack Web Development Tutorial 07m
  • Exercise: What is one of the key features taught in the course that enables web pages to adjust their layout across different devices?
  • Video class: 2. What is an IDE? | Installing an IDE | Full Stack Web Development Tutorial 05m
  • Exercise: Which IDE offers a live preview feature for web development?
  • Video class: 3. Building Your First Website | Learn HTML | Full stack web development Tutorial Course 12m
  • Exercise: What is the purpose of the head section in an HTML document?
  • Video class: 4. Intro to HTML, HEAD, BODY, and HEADER | Full stack web development Tutorial Course 2022 10m
  • Exercise: What does the 'doctype' declaration in HTML specify?
  • Video class: 5. Lists, Paragraphs, and Text Styling - Full stack web development Tutorial Course 08m
  • Exercise: Which HTML element is primarily used for creating a bulleted list?
  • Video class: 6. Displaying Data With Table - Full stack web development Tutorial Course 07m
  • Exercise: What was a common use for HTML tables in the early days of web development?
  • Video class: 7. Learn HTML Forms, Img and Iframe Tags - Full stack web development Tutorial Course 12m
  • Exercise: What HTML element was used to embed the YouTube video on the webpage?
  • Video class: 8. What is CSS ? - Full stack web development Tutorial Course 03m
  • Exercise: What is one of the main advancements that CSS3 introduced?
  • Video class: 9. How to use Inline, Internal and External CSS - Full stack web development Tutorial Course 08m
  • Exercise: Which is NOT a way to add CSS to a web project?
  • Video class: 10. Element, ID and Class Selectors - Full stack web development Tutorial Course 10m
  • Exercise: Which method allows targeting a specific HTML element by its class?
  • Video class: 11. CSS Colors and Shadows - Full stack web development Tutorial Course 14m
  • Exercise: What are the three ways to define colors in CSS?
  • Video class: 12. CSS Backgrounds And Borders - Full stack web development Tutorial Course 10m
  • Exercise: Which CSS property prevents an image from repeating in the background?
  • Video class: 13. Using browser inspector tools - Full stack web development Tutorial Course 13m
  • Exercise: Which of the following browsers has a unique feature of popping out the inspector tool, allowing developers to move it to another screen?
  • Video class: 14. Combinators in CSS - Full stack web development Tutorial Course 05m
  • Exercise: What is the difference between CSS descendant and child selectors?
  • Video class: 15. Grouping in CSS - Full stack web development Tutorial Course 05m
  • Exercise: What is a primary benefit of using CSS grouping?
  • Video class: 16. Specificity in CSS - Full stack web development Tutorial Course 15m
  • Exercise: Which CSS rule takes precedence?
  • Video class: 17. Text Styling And Formatting - Full stack web development Tutorial Course 20m
  • Exercise: Which CSS property is used to change the transformation of text to uppercase, lowercase, or capitalized?
  • Video class: 18. Google Fonts API - Full stack web development Tutorial Course 08m
  • Exercise: How can Google Fonts be implemented into a website?
  • Video class: 19. Responsive CSS Images - Full stack web development Tutorial Course 09m
  • Exercise: What CSS property is used to create a circular image from a square one?
  • Video class: 20. CSS Padding And Margin - Full stack web development Tutorial Course 09m
  • Exercise: What is the main difference between margin and padding in CSS?
  • Video class: 21. CSS Rows And Columns - Full stack web development Tutorial Course 13m
  • Exercise: What is the purpose of setting the box-sizing property to 'border-box' in a grid layout system?
  • Video class: 22. Intro to building your first CSS for website - Full stack web development Tutorial Course 01m
  • Video class: 23. Building the Navbar - Full stack web development Tutorial Course 22m
  • Video class: 24. Making the Navbar Mobile Responsive, Part 1 - Full stack web development Tutorial Course 11m
  • Video class: 25. Making the Navbar Mobile Responsive Part 2 - Full stack web development Tutorial Course 23m
  • Exercise: What is the role of JavaScript in creating a responsive navigation bar as described in the text?
  • Video class: 26. Creating the Form Group - Full stack web development Tutorial Course 30m
  • Video class: 27. Working with CSS iframes - Full stack web development Tutorial Course 22m
  • Video class: 28. Working with CSS images and box shadows - Full stack web development Tutorial Course 42m
  • Video class: 29. Working with text and image spacing - Full stack web development Tutorial Course 28m
  • Exercise: What is the purpose of using the HR tag in HTML5?
  • Video class: 30. Building the footer using CSS - Full stack web development Tutorial Course 18m
  • Video class: 31. Introduction to JavaScript Tutorial For Beginners - Full stack web development Tutorial Course 08m
  • Video class: 32. Javascript Quick References for faster learning - Full stack web development Course 04m
  • Video class: 33. Javascript Comments And How to Link Scripts - Full stack web development Course 07m
  • Exercise: What is considered a best practice when incorporating JavaScript in web development?
  • Video class: 34. Javascript Variables And Strings - Full stack web development Course 12m
  • Video class: 35. Javascript Numbers and Operators - Full stack web development Course 08m
  • Video class: 36. Javascript comparison operators and conditional operators - Full stack web development Course 15m
  • Video class: 37. Javascript Logical Operators - Full stack web development Course 15m
  • Exercise: In the context of logical operators, what will be the output of the following JavaScript condition: 'if (true && false || false && true)'?
  • Video class: 38. Javascript Arrays - Full stack web development Course 16m
  • Video class: 39. Javascript Loops (for, while, do while) - Full stack web development Course 14m
  • Video class: 40. Javascript Functions and methods - Full stack web development Course 22m
  • Video class: 41. Javascript Objects - Full stack web development Course 27m
  • Exercise: What is one of the benefits of using JavaScript objects to store related data, compared to using separate arrays?
  • Video class: 42. Javascript Bind - Full stack web development Course 08m
  • Video class: 43. Percentage Calculator 07m
  • Video class: 44. Percentage Calculator And Grabbing Elements With JavaScript - Full stack web development Course 10m
  • Video class: 45. Percentage Calculator using Event Listeners in JavaScript - Full stack web development Course 12m
  • Exercise: What is the purpose of using 'parseFloat' in JavaScript when handling form data?
  • Video class: 46. Percentage Calculator Algorithm And Prevent Default with JS - Full stack web development Course 08m
  • Video class: 47. How Version Control Works - Full stack web development Course 12m
  • Video class: 48. Basic macOS Terminal Commands to learn Git CLI - Full stack web development Course 14m
  • Video class: 49. Learn Git Basics and Github CLI Commands - Full stack web development Course 16m
  • Exercise: What is the purpose of using 'git add' in version control?
  • Video class: 50. Setting up Github on macOS - Full stack web development Course 05m
  • Video class: 51. Github vs Bitbucket - Full stack web development Course 03m
  • Video class: 52. Git Local 17m
  • Video class: 53. Working Through Git Merge Conflicts - Full stack web development Course 11m
  • Exercise: What is the primary reason for merge conflicts in a team setting, as discussed in the text?
  • Video class: 54. What is Bootstrap ? - Full stack web development Tutorial Course 03m
  • Video class: 55. Downloading Bootstrap 4 - Full stack web development Tutorial Course 03m
  • Video class: 56. Bootstrap 4 Project Setup - Full stack web development Tutorial Course 07m
  • Video class: 57. Overview of Bootstrap 4 Components - Full stack web development Tutorial Course 05m
  • Exercise: Which feature in Bootstrap allows you to create interactive image slides that can be navigated with arrows or indicators?
  • Video class: 58. Understanding Bootstrap 4 Classes - Full stack web development Tutorial Course 03m
  • Video class: 59. Using the Grid System in Bootstrap 4 - Full stack web development Tutorial Course 18m
  • Video class: 60. Bootstrap 4 Cards 19m
  • Video class: 61. Bootstrap 4 Forms | Adding an image 16m
  • Exercise: When using Bootstrap to create responsive images, which class should be added to ensure the image adjusts its size according to the parent element's dimensions?
  • Video class: 62. Bootstrap 4 Adding button and labels in login form - Full stack web development Tutorial Course 18m
  • Video class: 63. Bootstrap 4 Grids | Finishing Mobile Compatibility - Full stack web development Tutorial Course 08m
  • Video class: 64. Bootstrap 4 Skate or Die Intro - Full stack web development Tutorial Course 01m
  • Video class: 65. Bootstrap 4 Working with Navbars - Full stack web development Tutorial Course 10m
  • Exercise: Which Bootstrap class is used to change a navbar's color to a dark theme?
  • Video class: 66. Bootstrap 4 Jumbotron and Carousels - Full stack web development Tutorial Course 23m
  • Video class: 67. Bootstrap 4 Nesting rows and columns - Full stack web development Tutorial Course 20m
  • Video class: 68. Bootstrap 4 Modals and PopUp - Full stack web development Tutorial Course 16m
  • Video class: 69. Bootstrap 4 Adding images and buttons - Full stack web development Tutorial Course 18m
  • Exercise: In the context of a responsive web design, which CSS class from Bootstrap ensures that images resize correctly to fit the viewport while maintaining their aspect ratio?
  • Video class: 70. Bootstrap 4 Sizing Modals - Full stack web development Tutorial Course 18m
  • Video class: 71. Bootstrap 4 Building the Footer - Full stack web development Tutorial Course 07m
  • Video class: 72. Bootstrap 4 Working with Font Awesome Favicons - Full stack web development Tutorial Course 15m
  • Video class: 73. How to use SCSS in HTML - Intro to Sass - Full stack web development Tutorial Course 01m
  • Exercise: What is one of the main benefits of using SASS in web development?
  • Video class: 74.  What is Sass? - SASS Tutorial - Full stack web development Tutorial Course 08m
  • Video class: 75 . How to install Sass and compile it to CSS - Full stack web development Tutorial Course 11m
  • Video class: 76.  Your FIRST Sass Website! - Full stack web development Tutorial Course 29m
  • Video class: 77.  Different tools to compile Sass - Full stack web development Tutorial Course 06m
  • Exercise: What is one method for compiling SASS using a text editor?
  • Video class: 78.  How to structure your Sass ? - Full stack web development Tutorial Course 14m
  • Video class: 79.  Sass Partials Maintainable Styles Rules - Full stack web development Tutorial Course 07m
  • Video class: 80.  Sass Variables and Imports | Create a clean Scalable Stylesheet - Full stack web development 20m
  • Video class: 81. Sass Mixins Save time 11m
  • Exercise: What is the main advantage of using mix-ins in SASS when creating web designs?
  • Video class: 82.  Sass Extends Share style properties between other selectors - Full stack web development 06m
  • Video class: 83. Final Project Intro to our Landing Page using SASS - Full stack web development Tutorial 01m
  • Video class: 84 . Final Project Setting up our Variables With Sass - Full stack web development Tutorial Course 15m
  • Video class: 85.  Final Project Styling our Navbar with Sass - Full stack web development Tutorial Course 11m
  • Exercise: What is the primary purpose of creating a container class in web development, as explained in the text?
  • Video class: 86. Final Project Creating the Banner Container - Full stack web development Tutorial Course 03m
  • Video class: 87. Final Project Adding Content to our Banner Container - Full stack web development Tutorial 10m
  • Video class: 88. Final Project Doing some quick cleanup in our Sass files - Full stack web development Tutorial 04m
  • Video class: 89.  Final Project Using the Extend method - Full stack web development Tutorial Course 05m
  • Exercise: In CSS, what is the primary purpose of using the 'extend' feature in a SASS file?
  • Video class: 90. Final Project Styling a section splitter with Sass - Full stack web development Tutorial Course 05m
  • Video class: 91.  Final Project Using advanced Mixings - Full stack web development Tutorial Course 21m
  • Video class: 92.  Final Project Styling the next Container with Sass - Full stack web development Tutorial Course 05m
  • Video class: 93.  Final Project Finishing our Landing Page Congrats! - Full stack web development Tutorial Course 10m
  • Exercise: In web development, when creating a footer section with CSS, what property would you use to prevent content from flowing outside the designated boundaries?
  • Video class: 94. Set Up Hosting For Your Web App 01m
  • Video class: 95. Creating a server 05m
  • Video class: 96. Accessing your server 02m
  • Video class: 97. Installing Nginx 04m
  • Exercise: What is a characteristic of Nginx that differentiates it from Apache according to the video content?
  • Video class: 98. Creating server SSH Keys 04m
  • Video class: 99. Uploading files to your server 02m
  • Video class: 100. Setting up a domain 05m
  • Video class: 101. Final Step Configuring Nginx 07m
  • Exercise: When configuring Nginx to host multiple websites, which directory should you place the configuration files for websites that are live and accessible on your server?
  • Video class: 102. Understanding Web Requests 17m
  • Video class: 103. Installing Node on macOS 07m
  • Video class: 104. Basics of Node 10m
  • Video class: 105. Node Modules 09m
  • Exercise: What is Node Package Manager (NPM) primarily used for in Node.js environment?
  • Video class: 106. Building Your First API 05m
  • Video class: 107. Postman, GET 17m
  • Video class: 108. URL Parameters 19m
  • Video class: 109. Installing MongoDB on macOS 18m
  • Exercise: When implementing a PUT request in a web application, what is the main purpose of using the PUT method?
  • Video class: 110. Working With the Mongo Shell 05m
  • Video class: 111. Working on Mongo Shell 12m
  • Video class: 112. Searching for Documents 08m
  • Video class: Full stack web development Course | 113. DELETION AND DOCUMENTATION 04m
  • Exercise: In a database interaction shell, what command is typically used to remove specific entries from a collection?
  • Video class: Full stack web development Course | 114. SWAG SHOP API: PROJECT CREATION 10m
  • Video class: Full stack web development Course | 115. SWAG SHOP API: CREATING MODELS 14m
  • Video class: Full stack web development Course | 116. Swag Shop API: Posting Products 12m
  • Video class: Full stack web development Course | 117. Swag Shop API: Fetching Products 09m
  • Exercise: In the context of asynchronous operations in JavaScript, which of the following statements is true?
  • Video class: Full stack web development Course | 118. Swag Shop API: Populating Data 19m
  • Video class: Full stack web development Course | 119. Swag Shop: Setting Up React Tooling 18m
  • Video class: Full stack web development Course | 120. Swag Shop: Installing Bootstrap React 11m
  • Video class: Full stack web development Course | 121. Swag Shop: Setting Up the React API 06m
  • Exercise: What is the primary purpose of setting up a server when developing a full stack application with React?
  • Video class: Full stack web development Course | 122. Swag Shop - Creating a HTTP Service 19m
  • Video class: Full stack web development Course | 123. Swag Shop: Promises With ES6 12m
  • Video class: Full stack web development Course | 124. Swag Shop: Components in React - Website Product 13m
  • Video class: Full stack web development Course | 125. Swag Shop: Props in React 11m
  • Exercise: In React, what are 'props' mainly used for?
  • Video class: Full stack web development Course | 126. Swag Shop: Working With State in React 13m
  • Video class: Full stack web development Course | 127. Swag Shop: Creating a WishList Component 24m
  • Video class: Full stack web development Course | 128. Swag Shop: Building a Singleton Data Service 11m
  • Video class: Full stack web development Course | 129. Swag Shop: Creating a Notification Service 13m
  • Exercise: In the implementation of a notification system using the observer pattern, what is the primary function of the observer?
  • Video class: Full stack web development Course | 130. Swag Shop: Posting Notifications to React Components 07m
  • Video class: Full stack web development Course | 131. Swag Shop: Observing Notifications in React 13m
  • Video class: Full stack web development Course | 132. Swag Shop: Finishing Our Full Stack React App 16m

This free course includes:

26 hours and 16 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

Course comments: Full Stack Web Development

FH

Fadl Hashim

StarStarStarStarStar

I coded to make a drop down icon as you coded . but when I click the icon it truly it brings the list down but stil it is in lowercase an lined

More free courses at Web Development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate