Modest is my personal project about web development. I assigned myself to create a fully responsive landing page without using any frameworks. Because the main purpose of this project is to improve my coding skills so I started looking at some free high-fidelity wireframes so that I could start coding right away. I found this modest template with PSD format and I decided to transfer it to a responsive landing page web style.

The first step is called “slicing PSD”. This work required a meticulosity and an understanding on using Adobe Photoshop. From the Psd file I gathered all the assets I needed( Fonts, Images, Icons).

Next step, I used the grid to divide the image so that I could layout the page and have a comprehensive look at how to arrange assets effectively using HTML and CSS.

On this step, I displayed all the assets by using HTML, CSS and tried to make everything looks the exact same as the psd image with as less code as possible.

Last step, I quick sketched some low-fidelity wireframes for smaller devices and made it fully responsive on 3 devices ( Desktop, Tablet, Mobile) with CSS, Javascript and jQuery.

Through this project, I learned not only coding skills, but also the discipline when I tried to make a pixel-perfect web development

During the process of making this landing page, I learned advanced CSS and some useful tricks which elevated my coding much more than before

Making this responsive landing page helps me to understand more about front-end development works and inspires me to become a web-developer in the future