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:
For “images” folder, we provide extra tips to set the directory so it looks like the picture below.
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:
- EOT (Embedded Open Type) is a Font Format developed by Microsoft for web pages.
- TTF or True Type Font is the most used font format on both the operating system and the web browser.
- 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.
- 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
There are many frameworks in the front-end world. And these are the most common Front-End Framework:
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
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
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!