Style The HTML Using CSS
Once the basic HTML has been created, the next step is to provide styling for each of those pages. When building a site using TACE, the HTML and CSS should be separated into different files. This allows for the design of the site to be updated without touching the HTML.
The design that I created for the site is pretty basic, but it focuses on making everything simple and easy to use. It basically consists of a header with a drop shadow, sidebars, and then important content raised up with drop shadows. The typography is just using the built in sans-serif font of the browser. I prefer to use standard fonts to minimize loading times. The font styling itself could definitely be improved but it is functional in its current form.
Below is a list of each of the pages with a link to their hardcoded HTML pages and then next to those links are the styled pages which link to the styled version of the same HTML pages (a few minor HTML changes have been made from the original HTML to make certain items easier to style). The design pages should work both on desktop and mobile devices.
- Main Feed Page: HTML | Styled
- Categories List Page: HTML | Styled
- Add Category Page: HTML | Styled
- Edit Category Page: HTML | Styled
- Edit Color Page: HTML | Styled
- Add Feed Page: HTML | Styled
- Edit Feed Page: HTML | Styled
- Add Tag Page: HTML | Styled
- Edit Tag Page: HTML | Styled
- Add Word Page: HTML | Styled
- Edit Word Page: HTML | Styled
- Settings Page: HTML | Styled
- Settings Add Tag Page: HTML | Styled
- Settings Edit Tag Page: HTML | Styled
- Settings Color Edit Page: HTML | Styled
Now that the design is in place, the next step is to figure out the data structure for the app and build out the database. The building of the data structure for the app will be covered in the next post.