A sketching UI that utilizes DOM manipulation and events.
The purpose of this project was to create a simple way for users to sketch a picture within their web browsers, and I accomplished this through utilizing DOM manipulation and mouseover events. I've created many projects in the past that have utilized click and submit events, especially in the context of forms, so it was a new experience to think about how to use mouseover events to create a sketching effect. I'm not entirely sure what would be the best approach to mimic mouseover events on tablets and mobile devices, but that would be a great idea for future development to enhance the user experience.
I developed several skills in the process of creating this page that I am certain will benefit me in future projects. This was the first project I have created where I created a nested HTML list. I also created a custom animation for hovering over nav links, utilized smooth scrolling (which creates a slow scrolling effect when a user clicks on one of the navbar options), and I divided the page into sections that each take up the full viewport height. I personally really like sites that divide a page into sections that take up the full viewport height, so it was a wonderful experience to create a page like this.
Furthermore, this was the first project in which I have created custom vector graphics. I created the pencil and eraser graphics in Vectr so that I could make them exactly how I wanted them to be (i.e. matching the color scheme of the page). I love the sleek, simple design of vector graphics and so I am excited to continue creating my own graphics for future projects (where possible).
Please find the deployed page here: https://vruss14.github.io/sketch-pad
- HTML
- CSS
- JavaScript
- Google Fonts
- Canva
- Vectr
No installation steps are required to view this project. To view the page, visit the URL above. The application's source code can be found on GitHub here: https://github.com/vruss14/sketch-pad.
This page is a simple sketching user interface meant to showcase the power of front-end web development technologies such as CSS and JavaScript. It is not intended to mimic any commercial products currently on the market. This webpage includes responsive design and can be viewed on all devices.
Below is a screenshot of the desktop version of the deployed page:
Valerie Russell was the sole contributor to this project. Contact her at vruss14@gmail.com.