01
Overview
The first task of the course was to make a website. The main objectives were to introduce the student and to have a section for assignments and project each. Basic concepts of HTML, CSS and Javascript were discussed in class. Since I knew web development before hand, so I decided to make the website of my own without using templates. Here's the final front page of my final website.
02
Designing
I had this idea clear in my mind that I have to make something around Javascript illustrations. I browsed platforms like Behance, Instagram and conceptualised the idea using pages like uibucket and welovewebdesign .I then created the svg files of moon, clouds and the gradient using Adobe Illustrator and picked up the color scheme from awsmcolor. Images were taken from Pexels. Here's the first ideation of my idea in Adobe Illustrator.
03
Scripting
I used fullpage.js by Alvaro Trigo to enable fullscreen scrolling and to add landscape sliders inside the sections of the site. I used extensions from codepen.io, bootstrapcdn.com to animate different sections and to apply beautiful libraries so as to improve the overall behaviour of website. I took help from w3schools.com and The Net Ninja Channel on YouTube to clear my doubts about certain sections.
04
Image Compression
My website was relatively slower because of the high quality of images. I then did batch compression of them through imagecompressor.com The size reduced to around 50% then without compromising with the quality of the photos.
04
Finalizing
I added icons for social media websites, added few buttons for references, a footer and few navigation arrows. I, at the end added new sections for My Introduction, DSL 810 Course, it's assignments, project and documented Assignment 1 and also made the website resposive to perform seamlessly on mobile devices and tablets as well.