BBC website main content!

January 4, 2017 7:45 AM

I have successfully done the header and menu section of the BBC site. The main content section is giving me a headache. This is how far i have gone: here , my goal is here Here is the code https://jsbin.com/yixuqo/edit?html,css,output i do not know, how to align the texts properly and create a div for it. Based on the website, the title and picture are closely related as a link, if you hover it. I am stuck at the beginning. Please i need help!!! I am still learning CSS.
posted by Yiba to Computers & Internet (8 answers total)

Response by poster: The link of the site i am trying to clone, updates very fast but here it is, and my code is here. I am grateful for any help.
posted by Yiba at 7:52 AM on January 4, 2017

Maybe you should give a little background about what you're up to.
posted by humboldt32 at 9:04 AM on January 4, 2017 [1 favorite]

Response by poster: Thanks for your reply. I am trying to code the content section of the BBC website. i am having problems to code exactly the beginning. Please see my original post. Thank you !
posted by Yiba at 9:48 AM on January 4, 2017

In your CSS you are relying on float: left and float: right like developers used to do in the 1990s. The BBC webmasters most likely use more absolute and relative positioning instead (using the "display:" selector) and most likely a modern grid system like the one that comes with Bootstrap (see this link).

Mostly what you should do is get familiar with Chrome Inspector and inspect the HTML elements of the BBC's site...Chrome Inspector will give you all the answers you need as to how to do something right.
posted by johngoren at 10:04 AM on January 4, 2017 [1 favorite]

The BBC developers are also almost certainly using compiled CSS (LESS or SASS) so the CSS that you see was most likely not written by a human.
posted by rockindata at 11:44 AM on January 4, 2017

Response by poster: In your CSS you are relying on float: left and float: right like developers used to do in the 1990s

Sorry, if my knowledge or lack of sound outdated. I am still learning everyday and hope to improve. I used Chrome inspection tools and all i see is numerous clases in the Divs, with no pointer on how to clone it. TBH, i am confused on how to start the content section. The header and menu was no-brainer.
posted by Yiba at 1:46 PM on January 4, 2017

Response by poster: @ rockindata , how do you suggest that i should proceed in learning how to clone the site ?
posted by Yiba at 1:49 PM on January 4, 2017

Basically, you shouldn't. Matching a big site like the BBC, from scratch with no access to source code(looking a bit more at the page source, they have their own homegrown CMS that does most of the heavy lifting) would make even an experienced front end developer, let alone a beginner, very unhappy. To learn to do this kind of thing right, start with a course from somewhere like code academy and go from there.
posted by rockindata at 7:37 PM on January 4, 2017 [2 favorites]