Learn Web Development by Creating a Social Network

Learn to code from scratch by building your own Social Network with HTML, CSS, JavaScript and Meteor
4.2 (28 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
278 students enrolled
$19
$200
90% off
Take This Course
  • Lectures 80
  • Length 6.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English

Course Description

Learn to code from the ground-up by building a fully functional social network with real-time capabilities.

Sounds crazy right! But it’s not beyond what you can do these days! and this course will guide you step-by-step through the process.

This course is made for absolute beginners. No prior programming knowledge is required to take this course. The main goal of the course is to give you a quick exposure to the full development stack, using JavaScript, as opposed to the usual approach of learning one thing at a time and never getting a “big picture” view.

These are the exciting topics we teach in the course:

  • HTML
  • CSS
  • Responsive web design
  • JavaScript
  • DOM access and manipulation
  • Meteor to build web applications
  • MongoDB to store and query your data

The course follows a project-based approach. Concepts are introduce as we need them to build our social network project. We strongly believe this is the best approach for people who are starting web development and want a quick look at the entire process, instead of covering each topic in depth right away.

Pablo Farias Navarro is a software developer and founder of ZENVA. Pablo has been programming since 1996 and has taught programming to over 100k students. By following our usual project-based approach, by the end of this course you’ll have the skills to create solid web applications.

What are the requirements?

  • Install Google Chrome
  • Install a code editor. Free options include: Atom, Brackets, Notepad++, Geany

What am I going to get from this course?

  • Create websites with HTML, CSS and JavaScript
  • Create web applications using Meteor.js and MongoDB
  • Add user registration to web applications

What is the target audience?

  • Motivated students who want to learn web development and don't know where to begin
  • This course is for beginners, no prior programming experience required.
  • This course is not for advanced programmers or people looking for advanced content

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Intro
Course Intro
Preview
05:13
Section 2: HTML Basics
01:05

Let's get started with HTML! this video is a welcoming intro to the subject.

Article

You can download the source code files of this course from the Supplementary Materials tab.

06:12

In this lesson we introduce html tags, titles and paragraphs.

03:07

In this lesson we introduce html links so that we can connect different web pages.

02:53

In this lesson you'll learn to add images to your HTML documents.

05:18

In this lesson you'll learn to create forms in HTML.

03:09

In this lesson you'll learn to create both ordered and unordered lists in HTML.

02:58

In this lesson you'll learn to create tables in HTML.

Section 3: HTML Template for our Social Network
03:41

In this lesson we'll look into the full structure of a HTML document.

09:12

In this lesson we'll create the structure of our social network project.

Section 4: CSS Basics
01:32

This video is an introduction to the CSS module. We created the HTML skeleton of our project but let's be honest, it doesn't look great. With CSS we can make this project actually look pretty and modern.

Article

Source code files for all the CSS modules.

03:59

In this lesson you'll learn to select elements by tag.

05:04

In this lesson you'll learn to select elements by class.

06:47

In this lesson you'll learn to select elements by ID.

06:02

In this lesson you'll learn to give some styles to fonts using CSS.

05:03

In this lesson we'll talk about CSS pseudo elements, which allow more precise selections.

05:16

In this lesson we'll introduce the Box Model, a core concept of CSS.

Section 5: Styling the Social Network
05:47

In this lesson we'll style the sidebar of our social network project.

09:09

In this lesson we'll take care of styling our form.

06:13

In this lesson we'll style the feed area where the comments will be shown in our social network.

03:00

In this lesson we'll use a CSS3 transition to make a nice effect when the button is hovered.

Section 6: Let's Make it Responsive
03:25

In this lesson we'll introduce floating elements in CSS.

08:19

In this lesson we'll use media queries to style our site differently according to the screen size. We'll also talk about Responsive Web Design (RWD)

03:42

In this lesson we'll use media queries to style our social network so that it looks stunning on a phone screen.

Section 7: JavaScript Basics
02:15

In this video I'll talk about the role JavaScript will have in our project.

Article

Source code files of the JavaScript sections.

06:08

In this lesson we'll get started with adding JavaScript tags to our project.

05:42

In this lesson you'll learn to create variables in JavaScripts

Arithmetic Operations
08:32
06:32

In this lesson we'll learn how to work with the console.

07:01

In this lesson we'll introduce JavaScript objects.

06:37

In this lesson we'll introduce JavaScript strings.

Section 8: JavaScript Arrays
07:13

In this lesson we'll introduce JavaScript arrays.

05:03

In this lesson you'll learn to access and remove array elements.

05:01

In this lesson you'll learn to work with arrays that contain other arrays.

05:39

In this lesson we'll learn how to work with combinations of arrays and objects.

Section 9: JavaScript Functions
Functions
05:14
04:20

In this lesson we'll introduce the concept of scope in JavaScript.

03:37

In this lesson we'll learn about functions inside other functions.

05:47

In this lesson we'll introduce the topic of methods.

03:41

In this lesson we'll talk about function expressions vs function declarations.

Section 10: Conditionals and Loops in JavaScript
03:54

In this lesson we'll introduce the concept of loops.

05:26

In this lesson we introduce conditional statements so that we can execute different actions according to a condition.

04:09

In this lesson we introduce boolean variables, which can have a value of true or false.

04:11

In this lesson we'll learn about the AND and OR boolean operations.

Section 11: DOM Access and Manipulation
03:54

In this lesson we'll introduce the DOM.

03:40

In this lesson we'll cover some basics on DOM access and manipulation.

04:22

In this lesson we'll cover the process of submitting a form and how to intercept it with JavaScript.

Section 12: Other JavaScript Topics
06:49

In this lesson we'll introduce the topic of classes in JavaScript.

Section 13: Starting with Meteor
01:34

In this video we talk about the last part of the project, which is to build it as a full-stack JavaScript app.

06:22

In this lesson we describe Meteor.js and how it differs from other approaches.

03:03

In this lesson you'll learn where to go if you get stuck with Meteor.js.

08:06

In this lesson you'll learn to create a new project in Meteor.js

Updates from version 1.2
Article
07:09

In this lesson we'll take a quick look at a default Meteor project.

07:29

In this lesson we'll create the collection for our posts.

05:46

In this lesson we'll cover how to add new posts to the DB.

Article

Source code files of the Meteor lessons.

Section 14: MongoDB Crash Course
01:45

In this lesson we talk about the role MongoDB has in this project and why it's important to learn how to use it before moving forward.

04:01

In this lesson we describe the main characteristics of MongoDB.

09:30

In this lesson you'll learn how to insert documents to a collection.

08:19

In this lesson we'll add fixtures to our project.

07:17

In this lesson we'll introduce Find queries.

09:45

In this lesson we'll cover more things you can do with find.

05:52

In this lesson we'll cover some of the options you can add to your find queries.

09:35

In this lesson we'll cover update and remove queries.

Section 15: Preparing our Social Network Project
08:15

In this lesson we talk about the special folders and folder loading order in Meteor.

03:59

In this lesson we create the folders for our social network project.

05:52

In this lesson we'll integrate our Meteor project with the HTML template we built earlier.

Section 16: User Accounts
05:33

In this lesson we'll add user accounts to our social network.

02:34

In this lesson we'll add template-level security.

04:22

In this lesson we'll add post authorship.

05:51

In this lesson we'll cover Meteor Methods to run validation code in the server.

Section 17: Completing and Deploying our Social Network
11:03

In this lesson we'll give users the ability to follow other users.

04:44

In this lesson we'll show who you are following.

03:44

In this lesson we'll show who is following you (if any!)

07:08

In this lesson we'll give users the ability to filter posts by author.

Section 18: Conclusion
02:27

Congratulations! you've reached the end of the course!

Hope you found this helpful and look forward to seeing you in our next courses.

Thanks for joining this course!!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Pablo Farias Navarro, Software Developer and Founder of ZENVA

Software developer and founder of ZENVA. Since 2012, Pablo has been teaching online how to create games, apps and websites to over 150,000 students through the Udemy and Zenva Academy platforms, and created content for companies such as Amazon and Intel.

Pablo is a member of the Intel Innovator Program in the Asia Pacific, and has run live programming workshops in San Francisco, Brisbane and Bangalore.

Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile.

Ready to start learning?
Take This Course