JavaScript/jQuery/jQuery UI Project

JavaScript/jQuery/jQuery UI Project - student project

So I'm kind of a bad student. So far I'm on Lesson 40 for this course and the time that has passed since I started watching is more than enough time to have already finished by now. I have this habit of learning about something new, being fascinated by it and then experimenting with it to see what I can do with this new knowledge. Inevitably, I run into issues, since the concept is still new to me, and so I scour the internet looking for a solution. In these searches, I end up finding even more fascinating concepts and a domino effect occurs. 

When I take courses for web development, I like to build webpages where I put what I'm learning into practice. While watching this course, I created pages for each lesson. However, in lesson 40, I became very dissatisfied with the original design of my pages, so I decided to completely overhaul the design and build everything up from scratch. 

My original pages were built using HTML5, CSS3 and some very basic JavaScript. While rebuilding my new pages, I discovered technologies and methods I had previously never used. It started with learning about SASS, then I went down the rabbit hole from there. My new page was built using HTML5, SCSS, vanilla JavaScript, jQuery, and jQuery UI. 

My code is still messy and needs a lot of cleaning up, but I am very pleased with what I have so far. My SCSS, in particular, is probably abysmal due to my lack of knowledge and experience with it, but I have crash courses bookmarked so I can improve my skills there. The main focus of this project is to better acquaint myself with JavaScript.

Below this novel of text I have included screenshots demonstrating the webpage. In the research I have done, I came across the concept of "mobile-first", so this page is best optimized for smartphones. Since I write code on my laptop, I built a button in the "Control Panel" section that will display the browser dimensions when clicked on. All buttons except for the ones in the "Output Panel" section were built using jQuery and jQuery UI, however, jQuery UI was only used to make the dimensions container draggable and confined within the body, so that the user does not accidentally drag it out of view. 


All the code for this webpage is available on GitHub:

(Note: I learned how to use GitHub from Kalob's course, which I highly recommend!)



(Note: These screenshots were captured on my laptop, which has the display dimensions of 1900x890px when in fullscreen)

Fullscreen laptop view 

JavaScript/jQuery/jQuery UI Project - image 1 - student project

Fullscreen with menu expanded

JavaScript/jQuery/jQuery UI Project - image 2 - student project

Fullscreen with menu + lessons expanded

JavaScript/jQuery/jQuery UI Project - image 3 - student project

Half screen top

JavaScript/jQuery/jQuery UI Project - image 4 - student project

Half screen bottom

(Note: there is no copyright, I'm just in the habit of adding it to my footers)

JavaScript/jQuery/jQuery UI Project - image 5 - student project

Half screen with menu expanded

(Note: width of menu changes to 100%)

JavaScript/jQuery/jQuery UI Project - image 6 - student project

Half screen with menu + lessons expanded

JavaScript/jQuery/jQuery UI Project - image 7 - student project

Mobile view

JavaScript/jQuery/jQuery UI Project - image 8 - student project


Video demo on mobile