Take this
course

Software Development / Web Development

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

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.
Full details

Curriculum

  • Course Intro
    Course Intro
    5:14
  • HTML Basics
    HTML Intro
    Let's get started with HTML! this video is a welcoming intro to the subject.
    1:03
    Download HTML Source Code Files
    Download the source code files of this course here.
    Titles and Paragraphs
    In this lesson we introduce html tags, titles and paragraphs.
    6:13
    Links
    In this lesson we introduce html links so that we can connect different web pages.
    3:08
    Images
    In this lesson you'll learn to add images to your HTML documents.
    2:54
    Forms
    In this lesson you'll learn to create forms in HTML.
    5:20
    Lists
    In this lesson you'll learn to create both ordered and unordered lists in HTML.
    3:10
    Tables
    In this lesson you'll learn to create tables in HTML.
    2:59
  • HTML Template for our Social Network
    HTML Structure
    In this lesson we'll look into the full structure of a HTML document.
    3:42
    Project Structure
    In this lesson we'll create the structure of our social network project.
    9:13
  • CSS Basics
    CSS Intro
    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.
    1:33
    Download CSS Source Code Files
    Download the source code files for all the CSS modules.
    Selecting by Tag with CSS
    In this lesson you'll learn to select elements by tag.
    4:00
    Selecting by Class
    In this lesson you'll learn to select elements by class.
    5:05
    Selecting by Id
    In this lesson you'll learn to select elements by ID.
    6:48
    Styling Fonts
    In this lesson you'll learn to give some styles to fonts using CSS.
    6:03
    Pseudo Elements
    In this lesson we'll talk about CSS pseudo elements, which allow more precise selections.
    5:04
    Box Model
    In this lesson we'll introduce the Box Model, a core concept of CSS.
    5:17
  • Styling the Social Network
    Sidebar
    In this lesson we'll style the sidebar of our social network project.
    5:48
    Styling Form
    In this lesson we'll take care of styling our form.
    9:10
    Comments Area
    In this lesson we'll style the feed area where the comments will be shown in our social network.
    6:14
    CSS3 Transitions
    In this lesson we'll use a CSS3 transition to make a nice effect when the button is hovered.
    3:01
  • Let's Make it Responsive
    Floating Elements
    In this lesson we'll introduce floating elements in CSS.
    3:26
    Media Queries and Responsive Web Design
    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)
    8:20
    Phone View
    In this lesson we'll use media queries to style our social network so that it looks stunning on a phone screen.
    3:43
  • JavaScript Basics
    Module Intro
    In this video I'll talk about the role JavaScript will have in our project.
    2:16
    Download JavaScript Source Code Files
    Download the source code files of the JavaScript sections.
    Hello JS
    In this lesson we'll get started with adding JavaScript tags to our project.
    6:09
    Variables
    In this lesson you'll learn to create variables in JavaScripts
    5:43
    Arithmetic Operations
    8:33
    Console
    In this lesson we'll learn how to work with the console.
    6:33
    Objects
    In this lesson we'll introduce JavaScript objects.
    7:02
    Strings
    In this lesson we'll introduce JavaScript strings.
    6:38
  • JavaScript Arrays
    Arrays
    In this lesson we'll introduce JavaScript arrays.
    7:14
    Accessing and Removing Elements
    In this lesson you'll learn to access and remove array elements.
    5:04
    Multidimensional Arrays
    In this lesson you'll learn to work with arrays that contain other arrays.
    5:02
    Arrays and Objects
    In this lesson we'll learn how to work with combinations of arrays and objects.
    5:40
  • JavaScript Functions
    Functions
    5:15
    Scope
    In this lesson we'll introduce the concept of scope in JavaScript.
    4:21
    Nested Functions
    In this lesson we'll learn about functions inside other functions.
    3:38
    Methods
    In this lesson we'll introduce the topic of methods.
    5:48
    Function Expressions
    In this lesson we'll talk about function expressions vs function declarations.
    3:42
  • Conditionals and Loops in JavaScript
    While Loops
    In this lesson we'll introduce the concept of loops.
    3:55
    If and Else Statements
    In this lesson we introduce conditional statements so that we can execute different actions according to a condition.
    5:27
    Boolean Variables
    In this lesson we introduce boolean variables, which can have a value of true or false.
    4:10
  • Starting with Meteor
    Intro to Meteor.js
    In this video we talk about the last part of the project, which is to build it as a full-stack JavaScript app.
    1:35
    What is Meteor
    In this lesson we describe Meteor.js and how it differs from other approaches.
    6:23
    Where to Get Help
    In this lesson you'll learn where to go if you get stuck with Meteor.js.
    3:04
    Creating a Meteor Project
    In this lesson you'll learn to create a new project in Meteor.js
    8:07
    Overview of Default Code
    In this lesson we'll take a quick look at a default Meteor project.
    7:11
    Posts Collection
    In this lesson we'll create the collection for our posts.
    7:30
    Add Post
    In this lesson we'll cover how to add new posts to the DB.
    5:47
    Download Meteor and MongoDB project Source Code Files
    Download the source code files of the Meteor lessons.
  • MongoDB Crash Course
    Intro to MongoDB
    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.
    1:46
    What is MongoDB
    In this lesson we describe the main characteristics of MongoDB.
    4:02
    Inserting Documents
    In this lesson you'll learn how to insert documents to a collection.
    9:31
    Find Queries
    In this lesson we'll introduce Find queries.
    7:18
    More Operations for Find
    In this lesson we'll cover more things you can do with find.
    9:46
    Options in Find Queries
    In this lesson we'll cover some of the options you can add to your find queries.
    5:53
    Update and Remove
    In this lesson we'll cover update and remove queries.
    9:36
  • Preparing our Social Network Project
    Special Folders and Loading Order
    In this lesson we talk about the special folders and folder loading order in Meteor.
    8:16
    Project Folder Structure
    In this lesson we create the folders for our social network project.
    4:00
    Implementing Existing Template
    In this lesson we'll integrate our Meteor project with the HTML template we built earlier.
    5:53
  • User Accounts
    Adding User Accounts
    In this lesson we'll add user accounts to our social network.
    5:34
    Template-Level Security
    In this lesson we'll add template-level security.
    2:35
    Saving Post Author
    In this lesson we'll add post authorship.
    4:23
    Meteor Methods
    In this lesson we'll cover Meteor Methods to run validation code in the server.
    5:52
  • Completing and Deploying our Social Network
    Follow
    In this lesson we'll give users the ability to follow other users.
    11:04
    Show Following
    In this lesson we'll show who you are following.
    4:45
    Show Followers
    In this lesson we'll show who is following you (if any!)
    3:45
    Filtering Posts
    In this lesson we'll give users the ability to filter posts by author.
    7:09
  • Conclusion
    Conclusion
    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!!
    2:31

Skills

  • Cascading Style Sheets (CSS)
  • Hyper Text Markup Language (HTML)
  • JavaScript
  • MongoDB
  • Responsive Web Design

Similar Courses

More Courses by this Instructor