Running through Angular framework's "Tour of Heroes" tutorial a second time was good for me. I learned a lot of web development between my first and second runs, helping me understand and retain a lot more information this time around. I'm still short of what I'd call "proficient", though. In the interest of getting more practice, I will continue my personal Angular learning plan. The main focus of "Tour of Heros" was Angular framework, so it had only minimal attention paid to styling. So my next step is to play with styling this tutorial app.

The main objective is to exercise "think in CSS" portions of my brain. As a computer user it's not hard for me to think of web interfaces that I enjoyed and didn't enjoy using. Now I want to develop an ability to articulate my experience in terms of how I can implement them in CSS. This will start out very slow and rough, with many visits to MDN documentation for reference. I expect to get faster at it with practice and practice starts small. This first round will make only minor changes to CSS and almost no changes to HTML at all.

It's not necessary for results of this first round to be good in an objective sense, but it's important for the layout to be mine. Pick out small things I didn't like and verify I can fix it to my liking.

  • Tutorial CSS used Cambria (a serif font) mixed in with majority of non-serif fonts. I felt those styles clashed for no good reason and that was the easiest place to start.

  • I thought the diagnostics message section at the bottom took up too much space and wasn't distinct enough from the rest of the app. My change packed the "Clear Messages" button on the same horizontal line as the header, removing a lot of whitespace around both. I also changed the diagnostic message text themselves to a monospaced font. This may sound hypocritical because I just removed some serif font usage because they clashed, but in this case a style clash is a feature and not a bug. I always mentally associate monospaced typefaces with technical data, and I wanted it to stand out.

  • Dashboard component had a search box for hero names, and I thought that was not distinct enough from the rest of the dashboard. I gave it a subtly darker background to visually differentiate it from the rest of the dashboard, and I centered the component horizontally because Yahoo, Google, etc. all taught me to expect a search text box to be centered on screen.

  • Similar to how I packed "Clear messages" into the same horizontal space as the message display area header, I packed "Dashboard" and "Heroes" navigation buttons into the same topmost horizontal space as the application header at the top of the screen.

  • In the "Dashboard" view, we have a text box for search at the bottom. In the "Heroes" view, we have a text box for adding a new hero at the top. I didn't like that ordering because I want to review existing data before I add a hero. I moved "add hero" control to the bottom, which also made it consistent with dashboard search.

  • And finally, in the individual hero view, I again added a CSS flexbox to pack buttons together for a more compact layout.

I preferred how the resulting app looked, and I thought it was a good simple warmup round before I dip my toes into more serious UI styling.

Code for this project is publicly available on GitHub.