2019 Calendar App: Let's Build It!

Build a real world web application using HTML, CSS, Javascript, PHP and MySQL.

4.15 (52 reviews)
Udemy
platform
English
language
Web Development
category
instructor
4,907
students
7.5 hours
content
Mar 2020
last update
$54.99
regular price

What you will learn

Build a real world web application

Use CSS media queries to make your pages responsive

Use Javascript to create & control the operations of an application

Description

This entire course is one big code along, broken up into byte sized chunks.  I start by creating the markup and styling all the pieces.  The  I use JavaScript to add all the front-end functionality.  Then at the end I start using PHP and MySQL to connect to a database to make all of the changes made in the front end persistent, so that the app will remember how it was the last time you used it.

Keep in mind that there may be some technologies used in this course that you aren't used to using.  I use Flexbox, AJAX, MySQL, etc.  These technologies aren't aren't taught in this course, as that isn't the main objective, for me, these technologies are just a means to an end.

Content

Introduction

Reviewing the Final Product
About the App's Appearance
The Tools I'm Using
Getting the Course Files

HTML/CSS - Making the Left Side

Setting up the Index
Writing the Left Side Markup
Writing Generic Styles
Styling the Left Side

HTML/CSS - Making the Calendar

Writing the Calendar Markup
Styling the Calendar: Part 1
Styling the Calendar: Part 2
Styling the Post-its and Tooltips

HTML/CSS - Creating the Popups

Setting up the Modal
Creating the Theme Markup
Styling Theme Popup: Part 1
Styling Theme Popup: Part 2
Creating and Styling the Create Note Popup

HTML/CSS - Making the App Responsive

Preparing the Media Query
Making the Left Side (Or top) Responsive
Making the Calendar Responsive
Making the Popups Responsive

JS - Setting the Current Day Values

Writing the updateCurrentDates() function
Continuing the updateCurrentDates() function
Adding Ordinal Indicators
Translating Month/Day Numbers to Strings
Writing the UpdateCalendarDates() Function

JS - Filling the Calendar

Using month_data
Writing the fillInCalendar() Function: Part 1
Writing the fillInCalendar() Function: Part 2
Writing more Functions
Changing Months on the Calendar
Fixing the Color Problem
Calendar Borders

JS - Updating the Theme

Using color_data
Triggering the Modal
Updating Color Data
Updating the Theme
Adding Check Marks to the Current Theme

JS - Posting Post-it Notes

Embedding Data into the Table Cells
Trigger a Function when Cells are Clicked
Adding post_it objects to post_its array
Writing the Function to Add Notes/Tooltips to Cells
Posting Notes
Editing Notes
Deleting Notes

Final Touches Before PHP

Cleaning up the Index
Note about cleanCells()
Fix "Calender" Misspelling
Refactoring Code
Refactoring FillInCalendar()
Re-styling

PHP - Getting out Data to Persist

Putting Our App on a Local Host Server
Creating the Database and Tables
Connecting to the Database
Writing the Function to Update Database Theme
Updating the Database Theme in Front-End via AJAX
Persisting the Theme
Writing the Database Functions for the Notes
Creating, Updating & Deleting Notes in Front-End
Reading Notes from Database
Fixing 'that' Big
That's a Wrap!
Course Files

Screenshots

2019 Calendar App: Let's Build It! - Screenshot_012019 Calendar App: Let's Build It! - Screenshot_022019 Calendar App: Let's Build It! - Screenshot_032019 Calendar App: Let's Build It! - Screenshot_04

Reviews

Henrique
November 22, 2021
excellent ! valuable content ! I just have one comment: you hard code the months when you could do this dynamic
Trevor
April 2, 2021
The app is awesome! I really liked building it and the course was fun. I just wish there could've been more discussion. I felt like we coded and coded, and I didn't get much explanation.
Paul
December 12, 2019
Issues: 1. font-size for Atom is too small. I have very high resolution 24" monitors and had trouble reading some of the code. 2. ALWAYS assume that students are at least a word or two behind you when you're typing. Finishing a line and jumping immediately to another screen is extremely frustrating since there's not time to pause the video and then you have to go hunt for the spot just before you jumped away so you can complete the code. 3. Why is section #50 even here. My code was working. I understood it. If this is how you wanted it coded just make it that way otherwise leave it alone and move on. I'm here to learn how to do new functionality, not optimize code. Overall great course and I would recommend it to others.
Peter
October 15, 2019
Congratiulation!!! This is one of the best courses I've ever made. Excellent! And for the most: IT IS RUNNING ;-)
Marie
June 13, 2019
Font of the code too small, video quality : blurred an eyesore. Untoward animations flashing and breaking concentration. This calendar spans only over 13 months : pretty short. The professor explained the obvious but not the more complex ...
Jill
January 26, 2019
I liked the real-time real-world aspect of the course. I learned a lot of really helpful tips for the material that I was somewhat familiar with (HTML, CSS) and I thought it was a good exposure to using other material I was not as familiar with (mySQL). I had to draw a logic diagram because I could not keep it all in my head while trying to follow along. It was a good exercise. I'd do it again. I thought Jesse was funny, and helpful, engaging, and just real. Enjoyed this.
Robert
January 6, 2019
The only thing that I would like to be different is to make the instructors screen larger. It is very difficult to see what the instructor is typing with regards to the html and css. I am having to pause the video, then expand my screen so that I can see what the instructor has typed, then make my screen smaller again and continue with the video. This is NOT a complaint, it is just a suggestion. I am rating the instructor FIVE STARS and I am looking forward to other Udemy classes by this instructor.
Abir
January 1, 2019
This is a course that should be in premium but the instructor make it free. How big-hearted is he ! Faboulus Course

Charts

Price

2019 Calendar App: Let's Build It! - Price chart

Rating

2019 Calendar App: Let's Build It! - Ratings chart

Enrollment distribution

2019 Calendar App: Let's Build It! - Distribution chart

Related Topics

2112674
udemy ID
12/28/2018
course created date
6/18/2019
course indexed date
Bot
course submited by