While I am under no illusion that this is a perfect mimicry of the actual Telegraph site design, I feel comfortable enough here, to hang up my hat and call it a day on this project. Working by eye (besides the use of the Photoshop colour-picker tool) is never easy, even more so when it comes to sizes, positioning, widths, etc. As you can see, there are some clear alignment errors - the majority of which, I tried to fix and failed.
 |
| Original article: The Telegraph - 15 Maps That Will Change the Way You See the World |
For me, padding, border, margin is the clincher. W3Schools has a very clear diagram of this here, but I'm still struggling to visualise this in practice. I have most clearly failed in this area in with the ordered list within the article.
position and float are also two concepts I'm struggling to apply. The distraction of the content definitely isn't helping, so it's probably worth making a playground where I can test all the function of these elements correctly.
Designing and formatting the list numbers in CSS was the most fun part, as it gave the richest reward. To think up a method of creating circular borders (using the border-radius tag with a high value), see it work, then inspect the actual CSS and find it was originally created using a similar method is very rewarding indeed. While mine may be a little rough round the edges, it is fit for purpose.
Once again I'm supplying the HTML/CSS here. I think it's always worth sharing for the shake of learning and evolving. Even if it is learning through not what to do. I haven't seen any good HTML/CSS to know if mine is well-written, well-formatted, correct use of specificity, or class/id overload, but I can safely say that it's probably not. If it's bad, it's bad, but these are all skills to develop.
No comments:
Post a Comment