1.Create your work environment
Sometimes it is very important that when you work you do not have any problems with finding files or information that are important to you.
Therefore, all developers, and especially front-end developers, need to be able to work “cleanly”
- Create a folder with a ready-made template to get started
- Use CSS Preprocessors
- Make a list of LESS (SASS) snippets
- Use the Emmet website
- Make your own collection of JavaScript plugins
2.Work with HTML
HTML is one of the main tools of a frontend developer. You need to be able to use it and know all its nuances. Then you will become one step higher in your skill.
- Use the minimum number of HTML tags
- Use HTML5 tags
- Include JavaScript before the closing </body> tag
- Use HTML tags correctly
- All text from the layout must remain text when typesetting
- Don’t be afraid of the <br> tag
- Use special links for phone, skype, mail and more
3.Forms
Forms are the main component of all sites, the functions and appearance of the future site will depend on this.
Often, beginners have a catastrophically many errors when working with this tool.
- Set the tabindex attribute for form elements
- Use the autofocus attribute
- Use HTML5 field types
- Use the tel field type for numeric input fields
- Disable JavaScript execution for date, time and <select> tag fields on mobile devices
- Always use the for attribute on the <label> tag
4.Styles
The site should first of all be beautiful and stylish.
It is very important to make sure that when new people come to the site, they want to stay on it and they would be pleased to work with it.
- Don’t use :hover as an action trigger
- Work through different states of elements
- All content image roundings should be done with border-radius
- Follow the principle of graceful degradation
5.Performance
Without performance, the site will be impossible to work with.
It is very important to be able to optimize the work with the site and compactly place all the elements on it.
- Make sprites
- Compress *.PNG and *.JPG
- When using non-standard fonts, connect only the necessary styles through Google Web Fonts or equivalents
- When using jQuery or other libraries use CDN