Project 01: Recreating the Telegraph - The Results Are In

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.

Project 01: Fighting the Link Formatting

As mentioned previously, I found the task of styling elements that doubled up as an <a> tag to be a tricky task indeed. I still feel that way, so instead of taking on the whole beast with one swing, I decided to extract the "Read More" section of The Telegraph and work on that singularly. It definitely helps, and what I came up with wasn't perfect, but it was definitely a lot more manageable.

While I'm sure any untrained eye can spot the difference (mimicking formatting is proving hard) the key task of getting these links to colour and hover correctly worked like a charm. Using specificity seemed key to success here (thank you, Khan Academy CSS Specificity). While I'm sure it would be more beneficial to up my class game, using definitions such as ol li { } gave me the right amount of control.

I've pasted the code I made for this into a Paste Bin (also included below) for anyone to nosey at. I'm happy enough for now, but that's still not happy enough. I will integrate this mini-project into my main code and go from there.

 

Project 01: Recreating The Telephraph

While I'm not one to be found nose-deep in a broadsheet, let alone The Telegraph, I have to admire the simplicity of their site design, especially when learning to recreate existing CSS content. At least that what I expected this project to be like, but when I finally got pen to paper, I realised just how wrong I was.

A job like this takes a lot of planning, and the nuances within the design have proven to be unexpectedly complex. I've struggled with defining the number of <div> elements I require, scared to add more as the list of classes and tags extends longer and longer. Editing headings and other elements that also double up with the <a> tag has also been difficult - having to style a:link, a:visted, a:hover sometimes individually and sometimes not picking up changes at all. Furthermore, trying to style the numbers in a list seemed near impossible until I found this nifty tutorial which instead utilised the <span> tag (Design Shack - 5 Simple and Practical CSS List Styles You Can Copy and Paste).

While I haven't looked around yet, it would also be nice to have a colour-picker desktop app - no more copying images into Photoshop, thank you very much. I suspect there might be a tool out there for this, if not, hold that thought!

The article in particular that I'm trying to mimic is the 15 maps that will change the way you see the world travel piece. It contains a lot of images, lists, links and interesting formatting qualities. I thought it would prove an interesting challenge while not been beyond my range.

At first glance, I'm not sure if my current attempt would fool anyone, but the building blocks are definitely in place. As you can clearly see, I'm struggling with the positioning, trying to wrap my head around absolute and relative, margin and padding in particular. 

There are also the colouring issues I mentioned when dealing with an element that is both a heading/p element and a <a> tag. For reasons I don't yet understand, their style only applies correctly on hover. 

As a first pass, I'm happy to keep banging my head against the wall until I get to the bottom of this. I hope, by the next major update, to have fixed the positioning and link colouring issues.