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.
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: https://github.com/tomagrab/JS-CrashCourse
(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
Fullscreen with menu expanded
Fullscreen with menu + lessons expanded
Half screen top
Half screen bottom
(Note: there is no copyright, I'm just in the habit of adding it to my footers)
Half screen with menu expanded
(Note: width of menu changes to 100%)
Half screen with menu + lessons expanded
Video demo on mobile