5 Necessary Steps Before Starting Front-End Development

Written by : Transbara in web design web development / April 4, 2018

Back To Journal

Illiyin - Starting Front End Website
Front-end development is a stage where design turns into a web page. It is inevitable from every website development project. Every single page made by UI Designer should be translated carefully by Front-End Developer into a set of HTML codes.

Front-end website development is very important that only people who go all-in will be successful. It requires precision in the process so the result well meet the expected needs.

Hence, the way front-end side written will affect the building process of back-end in the next development stage.Therefore, every Front-End Developer should prepare everything carefully before start to code.

Here we summarize five steps before starting front-end development.

1.Review All Website Design

First of all, please review all website designs in your hand. You should give attention to the layout of each design, the color themes, text, images, and other elements. Write down each section that is considered important.

Ask the designer if there is something you don’t understand. Designers usually made elements in consitent style for paragraphs, links, headers, buttons, or content panels. This will help you understand what component, table, or any resources you need to build the front-end side

2. Setting the directory name

There is no standardization in naming the directory or folder. Seting the directory name become important when you start developing a website. The link in your HTML code is dependant on the name of the directory that you’ve created.

You can arrange the project directory by the document type, just like this:

Illiyin - Starting Front-End Website setting directory name
In picture above there is an “admin” folder used to store documents associated with the Admin site. “CSS” folder to save css documents, “fonts” folder to save your webfont, “images” folder to save picture, “js” folder to save javascript documents.

For “images” folder, we provide extra tips to set the directory so it looks like the picture below.
Illiyin Starting Front-End

3. Web Font

Picking up the fonts for your website is tricky, because in many cases not all fonts can perform well in the browser. Rather than using many font types that leads to trouble, it’s better to use common font formats in website development:

  1. EOT (Embedded Open Type) is a Font Format developed by Microsoft for web pages.
  2. TTF or True Type Font is the most used font format on both the operating system and the web browser.
  3. WOFF or Web Open Font Format is a compression font format of the TTF and Font Types, which is the most recent format, and is recommended by W3C.
  4. SVG type or Scalable Vector Graphic is a format that stores vector images it is nor special format for fonts. But we need to use it to make our website better in iOS Safari Version 4.1 and below.

It would be wise to provide web font format by typeface used in design. We can get Font Format from providers site such as https://www.fontsquirrel.com/, www.dafont.com, www.1001fonts.com, https://fonts.google.com/.
After getting the fonts, convert them into web font using https://www.web-font-generator.com or other site that can convert them into web font. You probably won’t have any difficult converting the web fonts.

4. Slicing Images

Slicing images from Photoshop is look simple, but if you do it incorrectly the result will not be appropriate. Things to note while slicing the images are the size, effect like shadow/ border/color overlay, and shape. For further information about slicing images in Front-End Website Development , you can read How To Slice Images Using Photoshop.

5. Use of Front-End Framework

For a front-end web developer with bunch of work but not much time, using framework will be very helpful. Framework is also helpful for you who collaborate with team to develop website. With framework, you dont need to set layout from sctrach, create a css resetter, or create components that will be combined using CSS + Javascript. Front-end Framework has provided all and packed into a product complete documentation. Isn’t it interesting?

There are many frameworks in the front-end world. And these are the most common Front-End Framework:
a. Bootstrap
Mark Otto and Jacob crafted Bootstrap to help front-end geeks. This is still the best framework in front-end web development. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. You can check the details at http://getbootstrap.com

b. Materialize
Materialize use Theme of css based on material design also framework. It’s very useful for website development. Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. You can visit http://materializecss.com

c. Foundation
Foundation has released version 6 and is a good alternative for you who want to use css framework. Foundation is a family of responsive front-end frameworks. It makes designing beautiful responsive websites, apps and emails easy. The responsiveness make the results look amazing on any device. Please visit https://foundation.zurb.com/ to see the full description.
Thats all 5 first steps before starting front-end website development. A good plans will result in good actions, and a good start can lead to a great result. Good luck!

Love to work with us? Let's talk about your great idea!

Talk With Us