Learn How to Build a Website with jQuery
4.6 (57 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.
4,271 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn How to Build a Website with jQuery to your Wishlist.

Add to Wishlist

Learn How to Build a Website with jQuery

Learn jQuery in One Month
4.6 (57 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.
4,271 students enrolled
Created by One Month
Last updated 8/2017
English
Price: Free
Includes:
  • 3.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Use jQuery to create interactive sites
  • Have a better understanding of how JavaScript works
  • Build real-life jQuery projects, using filtering and local storage
  • Use the DOM, and work with an external library
View Curriculum
Requirements
  • Some HTML & CSS experience is ideal
  • Fluency in English
  • Come self-driven and motivated to learn!
Description

Do you have a website, but can’t figure out how to make it interactive by adding forms, drop-down menus, or filtering lists? Had a hard time trying to learn jQuery or JavaScript in the past? Feeling totally in the deep end? By learning jQuery with One Month you can easily change that.

One Month jQuery is a series of video lessons and tutorials that show anyone -- even a total beginner -- how to build four real-world projects that you can add to your website. You will learn how to make your website more interactive and engaging using jQuery. 

When you sign up, you immediately get access to a member’s area where you can learn jQuery online and take each lesson at your own pace. Through engaging iQuery tutorials, you’ll learn how to interact with the Document Object Model (DOM), use web developer tools, and get started with reading and understanding documentation to help you take the reins of your own projects -- sounds fancy, huh? We promise that it’s not as complicated as it sounds. Each lesson acts as a jQuery tutorial for beginners as we break everything down along the way making it easier than ever to learn jQuery online.

Who is the target audience?
  • Designers who want to get into front-end development
  • Creatives who want to make their own site interactive
  • Anyone with past struggles learning Javascript or jQuery
Students Who Viewed This Course Also Viewed
Curriculum For This Course
44 Lectures
03:16:34
+
Project 1: Lightbox Photo Gallery
6 Lectures 27:40

Glad you could make it! We start with some context about how we'll be approaching JQUERY and what you can use this wonderful API for. 

Welcome to the Wonderful World of jQuery!
03:19

Download All The Things!
00:22

Go On, Say Hello to the Code
02:49

1. Resources:


2. Add the jQuery script tag to our HTML file

index.html

<!-- JavaScript --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

3. Add Lightbox CSS and JavaScript files

index.html

<!-- CSS --><link href="styles.css" rel="stylesheet"><link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">

and 

<!-- JavaScript --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="lightbox2-master/dist/js/lightbox.js"></script>
Love Me Some Libraries
07:53

1. Continue reading along with Lightbox documentation

http://lokeshdhakar.com/projects/lightbox2/


2. Add Lightbox styling to each image

index.html

<a href="assets/images/image1.jpg" data-lightbox="image1" data-title="My caption"> <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing"></a>

Add this <a> tag to each image on your page, but remember to change the path each time.


3. Change the data-lightbox name for each image to create a collection.

index.html

<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="My caption"> <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing"></a>


4. Copy and paste the alt tag to the data-title for each image or create your own.

index.html

<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing"> <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing"></a>


5. Add options JavaScript to your page to customize how your images look.

index.html

<!-- JavaScript -->...<script> lightbox.option({ 'positionFromTop': 200 })</script>  
I've Got A Lightbox Where My Heart Used To Be
09:28

1. Dream Vacation assignment 

What was the greatest vacation you've ever taken? Or where is somewhere you've always dreamed of going? 

This challenge is going to focus on customizing your Lightbox to share images of your dream vacation. 

2. Complete these three challenges 

  1. Choose six of your dream vacation photos from Google Images (or your personal photo library) and replace the current images.
  2. Give it an exciting header, and possibly some additional text describing your dream vacation.
  3. Add one more Lightbox option. Review the Lightbox documentation to see what options are available. 

NOTE: You don't have to submit your project anywhere on the Udemy version of this course. But if you'd like to share it with us, link it and tag us on twitter @onemonthedu! 

Challenge: Dream Vacation
03:49
+
Project 2: FAQ
11 Lectures 20:36

Don't forget to download the starter code!

Let's Get Started
02:06

1. Starter code reminder link

Click here to download the starter code folder

2. Example of commenting out code

Windows shortcut: Select code block, then Control + /

Mac Shortcut: Select code block, then Command + /

styles.css

/*.collapse { display: none;}*/

3. Create new file

Windows shortcut: Click on file in appropriate folder, then Control + N

Mac Shortcut: Click on file in appropriate folder, then Command + N

Save as "index.js"

4. Add index.js to index.html file

index.html

<!-- JavaScript --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="index.js"></script>
A Couple Things You Should Know...
00:56

Ready, Set, Code!
02:41

Resources:

1. Find target we want to use

index.html

<div id="q1" class="question">1. What is jQuery?

2. Add target to JavaScript file

index.js

$("#q1")
Natural Selection
03:21

Resources


1. Add console logging to see what selector returns

index.js

$("#q1").click(function() { console.log($("#q1"));})


2. Find target we want to use

index.html

<div id="a1" class="answer collapse">


3. Add answer selector to JavaScript file

index.js

$("#q1").click(function() { $("#a1");})


4. Add "sliding" option to answer selector

index.js

$("#q1").click(function() { $("#a1").slideDown("slow");})


5. Make it a toggle instead of a one-time event

index.js

$("#q1").click(function() { $("#a1").slideToggle("slow");})


Slide Show
Processing..

Resources:

Change the answer selector effect to fade:

index.js

$("#q1").click(function() { $("#a1").fadeToggle("slow");})
Now We're In Full Effect
Processing..

Resources:

    ###lihttp://api.jquery.com/toggleClass/


1. Identify toggle selectors

index.html

<img id="arrow1-down" class="arrow down" src ="assets/arrow-down.svg"><img id="arrow1-up" class="arrow up" src ="assets/arrow-up.svg">


2. Add collapse functionality to up and down arrows

index.js

$("#q1").click(function() { $("#a1").fadeToggle("fast"); $("#arrow1-down").toggleClass("collapse"); $("#arrow1-up").toggleClass("collapse");})


3. Combine functionality for the same class

index.js

$("#q1").click(function() { $("#a1").fadeToggle("fast"); $("#arrow1-down, #arrow1-up").toggleClass("collapse");})


4. Add functionality to each FAQ question, answer and arrows

index.js

$("#q1").click(function() { $("#a1").fadeToggle("fast"); $("#arrow1-down, #arrow1-up").toggleClass("collapse");})$("#q2").click(function() { $("#a2").fadeToggle("fast"); $("#arrow2-down, #arrow2-up").toggleClass("collapse");})$("#q3").click(function() { $("#a3").fadeToggle("fast"); $("#arrow3-down, #arrow3-up").toggleClass("collapse");})
Get Your Toggle On!
07:29

Meet the DOM
Processing..

1. Comment out toggle functionality and add console logging

index.js

$("#q1").click(function() { console.log($(this)); // $("#a1").fadeToggle("fast"); // $("#arrow1-down, #arrow1-up").toggleClass("collapse");})


2. Replace specific question selector with more general one

index.js

$(".question").click(function() { console.log($(this)); // $("#a1").fadeToggle("fast"); // $("#arrow1-down, #arrow1-up").toggleClass("collapse");})// $("#q2").click(function() {// $("#a2").fadeToggle("fast");// $("#arrow2-down, #arrow2-up").toggleClass("collapse");// })// $("#q3").click(function() {// $("#a3").fadeToggle("fast");// $("#arrow3-down, #arrow3-up").toggleClass("collapse");// })


THIS, not that
Processing..

Resources:


1. Add console logging to detect sibling information

index.js

$(".question").click(function() { console.log($(this).next()); // $("#a1").fadeToggle("fast"); // $("#arrow1-down, #arrow1-up").toggleClass("collapse");})


2. Re-add answer fade, and add console logging for children-arrows

index.js

$(".question").click(function() { $(this).next().fadeToggle("fast"); console.log($(this).children()); // $("#a1").fadeToggle("fast"); // $("#arrow1-down, #arrow1-up").toggleClass("collapse");})


3. Re-add toggling to arrow images, tidy up code

index.js

$(".question").click(function() { $(this).next().fadeToggle("fast"); $(this).children().toggleClass("collapse");})
Travel Through the Depths of the DOM
Processing..

Complete these three challenges 

  1. Create a custom animation for the accordion dropdown using the animate() method
  2. Replace one of the answers with an image or GIF that will be revealed when the question is clicked. Need help finding a GIF? Check out http://giphy.com/
Challenge: Project 2
04:03
+
Project 3: Todo List
12 Lectures 01:08:48

Now that we're half-way through the course (!), we review what we've learned so far and cover the project we're about to build. Put it on your to-do list. 

Don't forget to use the starter code (download here)!

Just a Quick Look at Our Roadmap
01:15

jQuery code likes to be loaded early in the page, after the document is ready. This is why we add our custom jQuery code after (document).ready !

This Document Was Born Ready
02:08

Resources:

1. Bind submit functionality to add-items selector and add console logging

index.js

$(document).ready(function () { $(".add-items").submit(function() { console.log("HI!";) });});

2. Prevent default behavior to retain logging information

index.js

$(document).ready(function () { $(".add-items").submit(function(event) { event.preventDefault(); console.log("HI!"); });});
Default? No Thanks!
07:33

Resources:

1. Identify selector and add console logging

index.html

<input type="text" class="form control" id="todo-list-item" placeholder="what do you need to do today?">

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); console.log($("#todo-list-item").val()); });});

2. Save user input as a variable that we will later be able to add to our list

index.js

 var item = $("#todo-list-item").val(); });
Our Very First Variable
04:48

Resources:

1. Add new selector

index.html

<ul id="list-items">

2. Append input from item variable into list

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); $("#list-items").append("<li>" + item + "</li>"); });});

3. Add checkbox and x (for later removal of item)

index.js

$("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a></li>"); });

4. Add <hr> for separation styling

index.js

$("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>"); });

5. Clear input field after each new item is added to our list

index.js

 $("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>"); $("#todo-list-item").val(""); });
Insert Here
08:09

Resources:

Add conditional statement to have only text-based inputs create new list items

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) { $("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>"); $("#todo-list-item").val(""); } });});
Under One Condition
05:47

Resources:

1. Add checkbox class to jQuery file

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) {  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");  $("#todo-list-item").val(""); } }); $(".checkbox")});

2. Add console logging to see if checkbox has changed

index.js

$(".checkbox").change(function() { console.log("Checkbox checked!"); })

3. Comment out unusable code, target the dynamically created checkbox

index.js

 // $(".checkbox").change(function() { // console.log("Checkbox checked!"); // }) $(document).on("change", ".checkbox", function() { });
You're Just Too Dynamic
05:34

Add completed functionality to check items off the list with the checkbox

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) {  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");  $("#todo-list-item").val(""); } }); // $(".checkbox").change(function() { // console.log("Checkbox checked!"); // }) $(document).on("change", ".checkbox", function() {  $(this).parent().toggleClass("completed"); });});
My Life is Complete
05:03

Resources:

Make the little x actually remove the list item

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) {  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");  $("#todo-list-item").val(""); } }); // $(".checkbox").change(function() { // console.log("Checkbox checked!"); // }) $(document).on("change", ".checkbox", function() {  $(this).parent().toggleClass("completed"); }); $(document).on("click", ".remove", function() {  $(this).parent().remove(); });});
Remove With Care
03:41

Resources:

1. Save list items to Local Storage

index.js

$(document).ready(function () { $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) {   $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");   localStorage.setItem("listItems", $("#list-items").html());   $("#todo-list-item").val(""); } }); // $(".checkbox").change(function() { // console.log("Checkbox checked!"); // }) $(document).on("change", ".checkbox", function() {   $(this).parent().toggleClass("completed"); }); $(document).on("click", ".remove", function() {   $(this).parent().remove(); });});

2. Tell page to load any previously-added list items from Local Storage

index.js

$(document).ready(function () {  $("#list-items").html(localStorage.getItem("listItems")); $(".add-items").submit(function (event) { event.preventDefault();
Live On With Local Storage
10:25

Resources:

1. Make removed and checked items persist in Local Storage after page refresh

index.js

$(document).ready(function () {  $("#list-items").html(localStorage.getItem("listItems")); $(".add-items").submit(function (event) { event.preventDefault(); var item = $("#todo-list-item").val(); if (item) {   $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");   localStorage.setItem("listItems", $("#list-items").html());   $("#todo-list-item").val(""); } }); // $(".checkbox").change(function() { // console.log("Checkbox checked!"); // }) $(document).on("change", ".checkbox", function() {   $(this).parent().toggleClass("completed");   localStorage.setItem("listItems", $("#list-items").html()); }); $(document).on("click", ".remove", function() {   $(this).parent().remove();   localStorage.setItem("listItems", $("#list-items").html()); });});

2. Keep checked checkbox checked, and unchecked checkbox unchecked!

index.js

 $(document).on("change", ".checkbox", function() {   if ($(this).attr("checked")) {     $(this).removeAttr("checked");   } else {     $(this).attr("checked", "checked");   }    $(this).parent().toggleClass("completed");   localStorage.setItem("listItems", $("#list-items").html()); })


Local Storage Continued...
09:11

1. Complete these two challenges 

    Add an interesting animation to the item removal. You can use fadeOut()  or slideDown() method like we did in Project 2. Or any other type of interactive you like. 

    Add an easter egg" to the project. So for example, if the listItem === "dance", append a dance GIF to the todo list. Have fun with it!

    Challenge: Project 3
    05:14
    +
    Project 4: Launch Pads
    15 Lectures 01:19:34

    Welcome to our final project! We're going to build our most complex and realistic application yet, so check out this video for a roadmap of where we're going. 

    So, What Are We Building?
    02:00

    Don't forget to use the starter code (download here)!

    Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

    JSON, It's a Thing
    02:34

    But Wait, There's More - Arrays and Objects
    06:42

    Resources:

    Bootstrap All Day
    03:46

    Just Add AJAX
    03:20

    Resources:

    Add the JSON data to our Ajax method and make sure it returns helpful information

    index.js

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     debugger;    } })});
    How Do You Respond
    06:48

    Resources:

    Create an HTML element from each apartment object

    index.js

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     $.each(response.apartments, function(i, apartment) {       debugger;     });    } })})
    Each and Every One
    06:44

    Resources:

    <div class="list-group">
      <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
      </a>
    </div>


    Building More With Bootstrap
    01:49

    1. Add Bootstrap styling

    index.js

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     $.each(response.apartments, function(i, apartment) {       <a href="#" class="list-group-item active">       <h4 class="list-group-item-heading">List group item heading</h4>       <p class="list-group-item-text">...</p>       </a>      });    }  })})

    2. Add variable and change " to '

    $.each(response.apartments, function(i, apartment) {  var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'></h4><p class='list-group-item-text'></p></a>"

    3. Add variable input and concatenation so it displays properly

    $.each(response.apartments, function(i, apartment) { var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + "</h4><p class='list-group-item-text'></p></a>";   $(".apartments").append(listing);

    4. Extra styling

    $.each(response.apartments, function(i, apartment) { var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";   $(".apartments").append(listing);
    Display That Data
    08:01

    1. Add error logging and "BR" to apartment listing

    index.js

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     $.each(response.apartments, function(i, apartment) {       var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";         $(".apartments").append(listing);     });    },   error: function(error) {       console.log(error);   } });})

    2. Start using borough ID to create a class and filter listings

       error: function(error) {      console.log(error);    }  });  $(".filter").click(function() {  });})
    Plan of Attack
    03:51

    Resources:

    1. Implement city ID as class for filtering

    index.js

     $(".filter").click(function() {   var city = $(this).attr("id"); });});

    2. Filter out cities that DON'T match our selected borough, add listings class, and apartmentClass variable.

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     $.each(response.apartments, function(i, apartment) {       var apartmentClass = apartment.city.toLowerCase().replace(" ", "-");       var listing = "<a href='#' class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";         $(".apartments").append(listing);     });    },   error: function(error) {     console.log(error);   }  });  $(".filter").click(function() {   var city = $(this).attr("id");   $(".listings").not("." + city).css("display", "none"); });});
    Filter Your Heart Out
    08:56

    Resources:

    1. Show all listings before hiding filtered listings

    index.js

     $(".filter").click(function() {   var city = $(this).attr("id");   $(".listings").show();    $(".listings").not("." + city).css("display", "none"); });});

    2. Add conditional so all listings can be displayed

     $(".filter").click(function() {   var city = $(this).attr("id");   $(".listings").show();   if (city !== "all") {     $(".listings").not("." + city).css("display", "none");   } });});

    3. Remove active class when new filter is clicked, add it to correct filter, tidy up code

     $(".filter").click(function() {   $(".filter").removeClass("active");   $(this).addClass("active");   $(".listings").show();    var city = $(this).attr("id");   if (city !== "all") {     $(".listings").not("." + city).css("display", "none");   } });});


    Filtering Continued
    06:29

    Resources:

    1. Add skeleton of function that happens when a listing is clicked

    index.js

    $(document).ready(function() { $.ajax({   url: "https://api.myjson.com/bins/2sadq?pretty=1",   dataType: "json",   success: function(response) {     $.each(response.apartments, function(i, apartment) {       var apartmentClass = apartment.city.toLowerCase().replace(" ", "-");       var listing = "<a href='#' class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";         $(".apartments").append(listing);     });    },   error: function(error) {   console.log(error);   } }); $(".filter").click(function() {   $(".filter").removeClass("active");   $(this).addClass("active");   $(".listings").show();    var city = $(this).attr("id");   if (city !== "all") {     $(".listings").not("." + city).css("display", "none");   } });  $(document).on("click", ".listings", function(){ });});

    2. Add unique identifier to each apartment listing

    var listing = "<a href='#' id=" + apartment.id + " class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";

    3. Find the apartment info that matches the ID of the listing that was clicked, add debugging

     $(document).on("click", ".listings", function(){   var id = $(this).attr("id");   $.ajax({     url: "https://api.myjson.com/bins/2sadq?pretty=1",     dataType: "json",     success: function(response) {       var selectedApartment = $.grep(response.apartments, function(apartment){         return apartment.id == id;       })       debugger;     },     error: function(error) {       console.log(error);     }   }); });});

    4. Add address variable which stores the address of the clicked apartment

    success: function(response) { var selectedApartment = $.grep(response.apartments, function(apartment){   return apartment.id == id; }) var address = selectedApartment[0].address;}

    5. Open selected address using Google Maps in a new browser tab

    success: function(response) { var selectedApartment = $.grep(response.apartments, function(apartment){   return apartment.id == id; }) var address = selectedApartment[0].address; window.open("http://maps.google.com/?q=" + address);},
    You're So Clickable
    13:04

    We're at the end of jQUERY. Well done! This door has closed, but now many others are now open to you.

    That's a Wrap!
    00:55

    You up for one more challenge? We can make our application more interesting and unique with Javascript from bootstrap. And then you can submit your ideas to OneMonth/brag about your modal jQUERY mastery. 


    1. Complete these two challenges 

      Add Bootstrap JS to your application. To do so, add a new <script> tag to the <head> with the Bootstrap CDN link of the "Latest compiled and minified JavaScript"

      The way the site is now, when you click on a new listing it opens up the listing in Google Maps. What we want to do is keep that feature, and add a Bootstrap modal to notify the user that a new tab has been opened. Follow the Bootstrap documentation on modals to add this feature. 


    Challenge: Project 4
    04:35
    About the Instructor
    One Month
    4.4 Average rating
    376 Reviews
    18,353 Students
    8 Courses
    Learn Anything In a Month

    One Month is an online teaching company started by two Columbia University professors. The platform provides tutorials for entrepreneurs and programmers, including One Month Rails, Project & Product Management, Ruby, Python, HTML, React, Programming for Non-Programmers, and more. The company's name comes from courses that are designed to teach a programming language in 30 days. The company has had over 50,000 users, including employees of Google, Bloomberg L.P., Singularity University and the School of Visual Arts in New York City.