Tools to use:
- Bootstrap (Front-end framework)
- Sass (preprocessor language)
- Compass
- Grunt (to compile the Sass files to CSS)
Step 1: Draft the structure
Ideally use a whiteboard or draw it out by hand. Once you feel comfortable with the layout, create a wireframe using a specialized app like Mock Flow or just use PPT.
Step 2: Create the structure in HTML
- Create all the DOM elements (as possible) and don’t worry about aesthetics.
- The key is to get all the elements on the page in the right order
- Add CSS classes in logical places Tip: using a very basic scaffolding (e.g. barebones Bootstrap page) helps you get started
Step 3: Create the CSS outline based on the HTML structure
- Write down the HTML tags and CSS classes that you want to reference
- Pseudo-code in the various CSS classes of what you want to do
Step 4: Iterate with the CSS styles until it looks ideal
- Gradually put in actual CSS code so the page begins to resemble the design you set out to create
- Make one feature and then test
- Frequently commit throughout the process as it’s easy to break the visual design of a page
Step 5: Validate the HTML and CSS page (code-wise and visually)
- Use HTML / CSS / Javascript validator to make sure the code is valid
- Do a visual test to make sure all the elements that you need are visible on the page