Digital E-Learning Resources
(Web Design Course)
E-learning resources for the Yoobee Colleges. The UI/UX design layout, asset creation and the web layout development using HTML & CSS is fully developed by Tomie Sato (Satomic Design). Please see below to see the results. The motion graphics intro video animation is also developed by Tomie Sato using Adobe After Effects and is currently being used campus-wide.
To see a breakdown of the UX/UI process, please check the blogpost here:
https://www.satomicdesign.com/portfolio/ux-ui-visual-design
For this part of the portfolio, I will breakdown the web resources and tutorials that I have taught for the web development course as a proof of knowledge in front-end HTML & CSS development coding skills. The course was taught between myself (Tomie Sato) and Gail Estrella. I have developed all of the web coding tutorials and ran of the web design course (completely from scratch to cater for the blended-online students). For this portfolio, I will be sharing just the contents that I have created for the web development part of the Diploma in Web & Graphic Design (Level 5) programme.
After each tutorial series below, I have attached a link to the final output of the web tutorial so do have a look at the link :) Just a note, the further you scroll, the more complex the coding examples will be! So fill free to skip ahead.
The below banners are created using HTML and CSS for a fluid responsive banner design for narrower screens.
Design type
Client
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1t4B6gnVrjzRwW7zUwjw5T2j7rWRvgjL2/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-parallax-and-favicon.superhi.com/
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1fi38GGbVXrFTFnEmQ64yWc1p54666v9X/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-intro-to-css-animation.superhi.com
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1L4j-c66n7UEy356yvrW37z-FFtoQkqc0/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-css-keyframe-animation.superhi.com
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1MUAS8u38ysZ9BO5xy1BWT2g5Dl8hYhR3/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-chain-animation.superhi.com/
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1EMyOrG6Q2ScnfUXIOoWfIDgCW6i6IxNG/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-webpage-cursor.superhi.com
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1dLTkwfJ1-asxkc1Hn_198IPuPGULoI8n/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-basic-slider.superhi.com
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1qiHRaUuJFMMDssKdW2qFaT3XT9EflAi8/view?usp=sharing
To view just view the live preview, click below (please note the hamburger menu appears when the screen is small, this version of the hamburger menu is static. For the animated version, scroll down to the next section!):
https://tutorial-hamburger-menu.superhi.com
To view the final output of this coding that I have developed, please click here to download the file:
https://drive.google.com/file/d/1UgJvbqf7TXkHh7eOYnCGttIGAYLopsXt/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-animated-hamburger-menu.superhi.com/
To view the final output of this coding that I have developed, please click here to download the file: https://drive.google.com/file/d/1kDNYR67DhL0z5NkPkKBqC2IwJjfneRe1/view?usp=sharing
To view just view the live preview, click below:
https://tutorial-animated-auto-slider.superhi.com