We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Beginner Full Stack Web Development

HTML, CSS, React & Node

Mark Wahlbeck and Devslopes by Mark Wahlbeck

Welcome to the Ultimate Web Developer Bootcamp. This is your one-stop-shop to learn front-end AND back-end development.

We'll take you from absolute beginner to competent full-stack web developer in a matter of weeks.

Read more

Welcome to the Ultimate Web Developer Bootcamp. This is your one-stop-shop to learn front-end AND back-end development.

We'll take you from absolute beginner to competent full-stack web developer in a matter of weeks.

  • Anyone who is curious about programming
  • Entrepreneurs
  • Those looking for a career change
  • Serious coders & hobbyists
  • Students & teenagers
  • Anyone who wants to learn web development

Using our exciting, hands-on teaching style you are sure to master the principles AND have fun at the same time.

We also have a free chat community with over 50,000 students where you can interact and get help from others.

See you on the inside.

- Mark Price

Enroll now

What's inside

Learning objectives

  • Build websites with html & css
  • Build backend servers & apis with node and express
  • Work with nosql databases like mongodb
  • Build full-stack web apps with facebook's react framework
  • Build mobile-friendly websites with bootstrap 4 & css

Syllabus

Intro to Web Development

In this video we you'll get an overview of everything you're going to learn to become a full-stack web developer. Learn front end to backend web development with HTML, CSS, Bootstrap 4, es6, Node, Express, Mongo & React.

Read more
Join Our Free Student Group
What is web development?
Where should I start as a beginner?

In this lesson you're going to build your very first Hello World website with HTML! You'll create your first .html file and preview it.

What you can do as a web developer
Frontend vs Backend development

In this video we're going to show you how to install Brackets, a simple Integrated Development Environment (IDE) used for developing. This makes working with HTML, CSS, Javascript and other frameworks a breeze.

Install the tools, write your first lines of code

An introduction to the basic and foundational HTML tags

An introduction to more advanced HTML tags

In this lesson you'll learn how to use HTML tables to display data. 

Simple rule when using tables - Use tables for tabular data, use other elements for presentation (designing layouts using css) like div, section, aside, nav etc . which provides meaning to the content they hold rather than using table for everything.

In this lesson you'll learn how to use HTML <img> tags for displaying images and <form> tags to group form data.

You're going to learn how to make websites look pretty with CSS

In this lesson we'll discuss what CSS is and how it has evolved over the years.

In this lesson we'll discuss 3 different ways to set up CSS in your projects. A few CSS styles will be used that we haven't covered yet. No worries, we will cover how these style properties later in this section.

In this lesson we'll cover element, class and id selectors and how they're used to style HTML. 

I'll be using TONS of different CSS styling rules we haven't covered. DON'T WORRY about that. We'll cover all of these styling rules later on in the lessons. Just pay attention to how to use the element, class and id selectors.

In this lesson we'll cover the basics of using colors in CSS

In this lesson we'll cover the basics of using backgrounds and borders in CSS

Quiz - CSS Basics

In this lesson we'll demonstrate how to use the browser inspector tools for Chrome, Firefox and Safari. These tools will give you an "under the hood" look at how your HTML and CSS are working together. This is a crucial tool that you will use everyday in web development.

In this lesson we'll discuss how HTML parent and child element relationships work. This means having an element with additional elements nested within it. This is important to know so you can understand which CSS rules will apply to certain elements.

In this lesson we'll cover how you can group selectors and apply the same CSS declaration to multiple elements.

My favorite word haha. In this lesson we'll discuss how different HTML elements hold a different "point value". Different HTML selectors will take priority over other selectors. This is important to learn so you can understand how browsers decide which CSS rules to apply to your HTML.  

Specificity Domination
Intermediate CSS

In this lesson you'll learn how to work with different CSS methods for styling text

In this lesson you'll learn where to find a variety of fonts you can use in your HTML/CSS project. Just remember, using too many different fonts will make your website look "busy" and bring down the quality.

In this lesson you'll learn a variety of ways you can work with images using CSS.

In this lesson you will learn the difference between CSS margin and padding and how and when to use them on HTML elements.

Using CSS you will create your own row and column classes to use in your HTML. Using Rows and Columns are the most powerful way to structure and place content on your website.

Quiz: Intermediate CSS
Advanced CSS: Building and styling website

Get excited to build your first website using pure HTML and CSS!

In this lesson you're going to learn how to build a navbar for a desktop view using raw HTML and CSS. You'll get a taste how powerful CSS is and how you can completely change HTML with it.

In this video you're going to learn how to make your navbar mobile compatible using CSS. You'll learn how to get all your nav links to hide on collapse of the viewport.

In this lesson you're going to learn how to get your nav links to appear in a dropdown menu using CSS. We'll be using a tiny bit of Javascript to do this - Don't worry if you don't understand Javascript yet, you'll learn more about Javascript in later video's. Just follow along and have fun!

In this lesson we're going to build a section of our website using form groups and styling them with CSS.

In this video you're going to learn how to use responsive iframes in your HTML which are used to embed video into your websites. We'll also add some addition tweaks to this using CSS.

In this video you're going to take your CSS skills to a new level and use box shadows to create really cool effects on images. You can use these box shadows on almost anything! Just don't go crazy with them on your own websites ;)

In this video you're going to learn how to place text and images next to each other in your HTML. We'll also use CSS to help control the layout of it. This is going to be helpful to learn as you'll use this skill when you build your own websites.

Drum roll please....Using HTML and CSS lets build the last part of our website, the footer!

Computers & Code
How Computers Work
Understanding Binary
How code works
Heap vs Stack
Understanding hexadecimal
Variables & storage capacity
Quiz: Computers & Code
We'll take things up a notch and teach you how to make your websites think with Javascript

In this video you'll get an introduction to Javascript, what it is and how it's used.

In this video we're going to show you some great references to help you with Javascript.

In this video we'll learn how to properly use comments and link javascript files in our projects.

In this video we are going to learn how to use Variables and Strings in Javascript

In this video we are going to learn how to use Numbers in Javascript

In this video we are going to learn how to use Comparison Operators in Javascript

In this video we are going to learn how to use Logical Operators in Javascript

In this video we are going to learn how to use Arrays in Javascript

In this video we are going to learn how to use Loops in Javascript

In this video we are going to learn how to use Functions in Javascript

In this video we are going to learn how to use Objects in Javascript

In this video we are going to learn how to use Bind in Javascript

In this video we are going to set up an HTML form. We will later interact with this form using Javascript.

In this video we will cover how to grab HTML elements with Javascript.

In this video we are going to learn how to respond to an event using Javascript when a button is clicked.

In this video we are going to learn how to use Javascript to perform math algorithms so our calculator can solve "x is what % of y"

Learning how to manage files and versions with version control and Git
How Version Control Works
macOS Terminal Basics
Git Basics
Setting up Github on macOS
Github vs Bitbucket
Local & Remote Repositories
Working Through Git Merge Conflicts
Introduction to Bootstrap 4

Bootstrap 4 is the most popular HTML, CSS, and JS framework in the world. It makes laying out websites a breeze!

In this video you're going to learn how to download Bootstrap 4

In this video you're going to learn how to setup and use Bootstrap 4 in your project.

Bootstrap 4 has so many pre-built HTML components which also include pre-defined styled classes! It's nice when someone does the work for you  

In this video we dive through some of Bootstrap 4's pre-built classes so we can get a basic understanding how these classes are set up. This way, if we need to override any Bootstrap 4 classes we'll have a better understanding how to.

Bootstrap 4: Using the Grid System
Bootstrap 4: Creating a Login Portal

In this video we are going to use a Bootstrap 4 card component for our Login Portal. We'll make some additional adjustments to it with CSS.

In this video we are going to use a Bootstrap 4 form group in our HTML for our input fields. We'll use some additional CSS to style them.

Bootstrap 4 comes with some great button classes. In this video we're going to create the Sign In button and add some labels to our HTML.

The greatest part of Bootstrap 4! Bootstrap 4 has different column classes you can add which change the column width behavior on different sized viewports. 

Bootstrap 4: Skate or Die Website

In this video we are going to preview the awesome skate website we're going to build using Bootstrap 4 and CSS.

In this video we are going to use a Bootstrap 4 navbar component in our HTML for the first building block of our  website! You'll see how cool this is and how it works right out of the box on desktop and mobile. Wow I love Bootstrap 4 

A carousel? Are we going to the fair? Heck no! We're going to use a Bootstrap 4 carousel component to display an image slide in our HTML.

In this video we are going to learn how to nest Bootstrap 4 rows and columns so we can more precisely place content in HTML. 

In this video we are going to learn how to use a Bootstrap 4 Modal component. This is like a popup that can display on your HTML page. We'll create our first Modal and add some content to it.

In this video we are going to use some Bootstrap 4 image and button classes to style......well....our images and buttons!

Did ya know....you can size your Bootstrap 4 modals!! Yup!

In this video we're going to build the footer of our website using Bootstrap 4. Why do they call it a footer? Well....your feet are placed at the bottom of your body.... So it only makes sense that the footer is placed at the bottom of an HTML body, RIGHT?

In this video we're going to show you how to add some awesome icons to your Bootstrap 4 website! Skate or Die 

Intro to Flexbox
What is flexbox?

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Develops back-end servers and APIs, front-end websites, databases, mobile-friendly websites, and full-stack web apps
Builds a strong foundation for beginners in web development
Provides hands-on, interactive learning experiences
Course is taught by Mark Wahlbeck and Mark Price, who have extensive experience in web development
Provides a free chat community for students to interact and get support

Save this course

Save Beginner Full Stack Web Development: HTML, CSS, React & Node to your list so you can find it easily later:
Save

Reviews summary

Fair introduction to full stack

Learners say this course is a fair introduction to full stack web development. The course covers HTML, CSS, React, and Node.js. The instructor is knowledgeable and provides a good overview of the material. However, some learners found the course outdated. Additionally, some videos have annoying intro music and incorrect information. The instructor is also not responsive to questions.
The instructor is knowledgeable.
The course provides a good overview of full stack web development.
"Good overview of the basics."
The course is somewhat outdated.
The instructor is unresponsive to questions.
"People have been asking questions, but getting no responses."
Some videos have annoying intro music.
"Extremely annoying intro music/noise at the beginning of most videos."
Some videos contain incorrect information.
"One of the CSS videos had a completely false explanation of using rbga() for setting the color for box shadows."

Career center

Learners who complete Beginner Full Stack Web Development: HTML, CSS, React & Node will develop knowledge and skills that may be useful to these careers:
Front-End Developer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node introduces students to front-end web development, which involves designing and coding the user interface and behavior of a website. As a Front End Developer, you will be responsible for creating websites and web applications that are visually appealing, user-friendly, and functional. This course can provide a solid foundation for aspiring Front End Developers by teaching the fundamentals of HTML, CSS, React, and Node, which are essential technologies used in front-end development.
Web Developer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers both front-end and back-end development, making it a great choice for aspiring Web Developers. This course will provide you with a comprehensive understanding of how to design, code, and maintain websites and web applications. Whether you're looking to build a personal website, a business website, or a web application, the skills you'll learn in this course will be invaluable.
Full-Stack Developer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node provides a comprehensive overview of full-stack web development, covering both front-end and back-end technologies. As a Full Stack Developer, you will be responsible for all aspects of website and web application development, from designing the user interface to building the back-end infrastructure. This course will provide you with a solid foundation in the essential technologies used in full-stack development, including HTML, CSS, React, Node, and MongoDB.
Back-End Developer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers both front-end and back-end development, making it a great choice for aspiring Back End Developers. This course will provide you with a solid foundation in the fundamentals of back-end development, including Node and Express. As a Back End Developer, you will be responsible for building and maintaining the back-end infrastructure of websites and web applications.
User Interface Designer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of front-end development, including HTML, CSS, and React. As a User Interface Designer, you will be responsible for designing and coding the user interface of websites and web applications. This course will provide you with a strong foundation in the skills and technologies you need to create visually appealing and user-friendly interfaces.
Web Designer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of front-end development, including HTML, CSS, and React. As a Web Designer, you will be responsible for designing and coding the user interface of websites and web applications. This course will provide you with a strong foundation in the skills and technologies you need to create visually appealing and user-friendly interfaces.
Software Engineer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of web development, including HTML, CSS, React, Node, and MongoDB. As a Software Engineer, you will be responsible for designing, developing, and maintaining software applications, including websites and web applications. This course will provide you with a solid foundation in the essential technologies used in web development, which will be valuable for a career as a Software Engineer.
Data Analyst
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of NoSQL databases, including MongoDB. As a Data Analyst, you will be responsible for collecting, analyzing, and interpreting data to identify trends and patterns. This course will provide you with a solid foundation in the essential technologies used in data analysis, including MongoDB, which will be valuable for a career as a Data Analyst.
Information Technology Specialist
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of web development, including HTML, CSS, React, Node, and MongoDB. As an Information Technology Specialist, you will be responsible for supporting and maintaining computer systems, including websites and web applications. This course will provide you with a solid foundation in the essential technologies used in web development, which will be valuable for a career as an Information Technology Specialist.
Computer Scientist
The course Beginner Full Stack Web Development: HTML, CSS, React & Node provides a comprehensive overview of the fundamentals of web development, including HTML, CSS, React, Node, and MongoDB. As a Computer Scientist, you will be responsible for studying the theory and practice of computation, including how to design, develop, and analyze software applications. This course will provide you with a solid foundation in the essential technologies used in web development, which will be valuable for a career as a Computer Scientist.
Software Developer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node can be a helpful introduction to software development for those interested in a career in this field. While the course focuses specifically on web development, the concepts and skills you'll learn, such as how to code, debug, and solve problems, are transferable to other areas of software development. If you're interested in a career as a Software Developer, this course can provide a foundation for further learning and development.
Computer Programmer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node provides a comprehensive overview of the fundamentals of web development, including HTML, CSS, React, Node, and MongoDB. As a Computer Programmer, you will be responsible for coding and developing software applications, including websites and web applications. This course will provide you with a solid foundation in the essential technologies used in web development, which will be valuable for a career as a Computer Programmer.
Technical Writer
The course Beginner Full Stack Web Development: HTML, CSS, React & Node covers the fundamentals of web development, including HTML, CSS, React, Node, and MongoDB. As a Technical Writer, you will be responsible for writing documentation and other technical materials to explain how software applications, including websites and web applications, work. This course will provide you with a solid foundation in the essential technologies used in web development, which will be valuable for a career as a Technical Writer.
Product Manager
The course Beginner Full Stack Web Development: HTML, CSS, React & Node can provide a helpful introduction to the technical aspects of web development for aspiring Product Managers. While the course focuses specifically on web development, the concepts and skills you'll learn, such as how websites and web applications are built and maintained, can be valuable for Product Managers who need to understand the technical side of their products. This course may be particularly helpful for Product Managers who are responsible for managing web-based products.

Reading list

We've selected nine 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 Beginner Full Stack Web Development: HTML, CSS, React & Node.
Comprehensive guide to Node.js, covering the core concepts of the platform and how to use it to build web applications. It valuable resource for both beginners and experienced Node.js developers.
Comprehensive guide to React, covering the core concepts of the framework and how to use it to build web applications. It valuable resource for both beginners and experienced React developers.
Comprehensive guide to MongoDB, covering the core concepts of the database and how to use it to build web applications. It valuable resource for both beginners and experienced MongoDB developers.
Comprehensive guide to Git, covering the core concepts of the version control system and how to use it to collaborate on web development projects. It valuable resource for both beginners and experienced Git users.
Comprehensive guide to JavaScript, covering the core concepts of the language and how to use it to build web applications. It valuable resource for both beginners and experienced JavaScript developers.
Comprehensive guide to React, covering the core concepts of the framework and how to use it to build web applications. It valuable resource for both beginners and experienced React developers.
Classic guide to JavaScript, covering the core concepts of the language in a clear and concise manner. It valuable resource for both beginners and experienced JavaScript developers.
Provides a comprehensive overview of HTML and CSS, covering the basics of web design and development. It valuable resource for beginners who want to learn the fundamentals of web development.

Share

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

Similar courses

Here are nine courses similar to Beginner Full Stack Web Development: HTML, CSS, React & Node.
Front End Web Development: Get Started
Most relevant
Build Websites from Scratch with HTML & CSS
Build an Online Auction Server with ExpressJS
Getting Started with Sitecore 10 and Helix
Getting Started with Sitecore 9 and Helix
Introduction to Back-End Development
Introduction to Front-End Development
WordPress Development with Bootstrap: The Complete Course
Building a Web App with ASP.NET Core, MVC, Entity...
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