You will probably get a somewhat different answer from every person you ask. Good rules of thumb, however, are:
- For HTML5, fully understand the differences between block level and inline elements, as well as the ways they interact with one another.
- Also for HTML5, have a firm grasp, or at least solid working knowledge of the semantic elements such as <main>, <header>, <footer>, <aside>, <nav>, <video>, <canvas>, <menu> and <menuitem> (newly included in the HTML 5.1 Draft specification>. These name but a few.
- Though commonly used, try to use the generic <div> tag only when absolutely necessary. The alternative HTML5 tags make semantic sense and produce far more readable code.
- Where CSS3 is concerned, the first thing of importance is to understand the style cascade, that is, how one CSS declaration affects its neighbors. There are rules which set a priority as to which style within the cascade will have precedence. Study these rules in order to gain more mastery.
- Additionally, probably a good current standard to grasp is the flex box model which is part of the newest CSS3 practices.
- To enrich your web content, it is worthwhile to learn CSS3 transformations and animations.
- Finally, and possibly most important of all, is to devote a good amount of practice to responsive grid layout, which makes use of media queries to ensure that your web page displays as well on a cell phone or tablet screen as it does on a 25″ 5K monitor.
IMPORTANT GENERAL POINTS
Given the current market and profusion of powerful mobile devices, it is important to adopt a mobile-first design practice. While there are numerous frameworks out there such as Zurb Foundation and Twitter’s Bootstrap (perhaps the two most popular), I would urge anyone to first practice by setting up your own responsive grid that includes the media queries and breakpoints for different size devices before using one of these frameworks as you will then better understand how to take the best advantage of your chosen framework.
hope this article help to your.