Create Hardcoded HTML App Pages
After the pages are drawn out on paper, the next step is to start converting them to HTML. A basic website page consists of HTML (for content), CSS (for design), and JS (for interactivity). The website page will be delivered by the server where the data is saved and loaded. Different app frameworks have different structures, but typically for the apps that I build, all of the database code and HTML generation code is handled by the server.
Each of the pages mentioned in the previous post need to become an actual web page. I like to first create the HTML for these pages without having to think about the data and server behind these pages. So when writing the HTML, I "hardcode" the data in these initial page designs, meaning I fake the data for the initial pages so that I can see how it will look.
I also write the HTML without the design in mind. The HTML should be clear and use the most logical tags. Later the HTML may get some minor adjustments to make it easier to implement the CSS but the main goal right now is just to get the HTML written with fake data.
Normally I would build these hardcoded HTML pages in the same location on the site where they will be used and would eventually just switch out the hardcoded fake data with the real data. Because I'm documenting how I'm building this site publicly, I figured I would build the hardcoded HTML pages in a separate location so that they can be fully accessible to anybody reading this blog article in the future.
Below is a list of each of the pages (these pages were originally drawn out on paper) with a link to their hardcoded HTML pages (note that at this stage, the pages will be very ugly).
- Main Feed Page: HTML
- Categories List Page: HTML
- Add Category Page: HTML
- Edit Category Page: HTML
- Edit Color Page: HTML
- Add Feed Page: HTML
- Edit Feed Page: HTML
- Add Tag Page: HTML
- Edit Tag Page: HTML
- Add Word Page: HTML
- Edit Word Page: HTML
- Settings Page: HTML
- Settings Add Tag Page: HTML
- Settings Edit Tag Page: HTML
- Settings Color Edit Page: HTML
Now that the HTML is in place, the next step is adding styling to the pages so that they start to look like an actual app. The design stage will be covered in the next post.