Web design, How do I?

54kroc

I've seen something a similar design on a few websites that I would like to try myself.
Here's one of the sites - http://themovieblog.com/
It's the part below the News, Chat, Trailers, Posters and Interviews links.



What I'd like to do is have six of these sections on my webpage.
I was hoping someone could explain to me how it's done.

SimonTemplar

Do you know any web technologies? HTML and CSS?

54kroc

SimonTemplar wrote: »

Do you know any web technologies? HTML and CSS?

Very basic.

John_Mc

54kroc wrote: »

Very basic.

In fairness, no one here is going to explain the fundamentals of HTML and CSS when there are hundreds of thousands, if not millions, or tutorials on the internet doing it already.

Kur4mA

There are literally tons of tutorials to teach this. Surround each section of content with a div tag in the HTML, then create some CSS called content or whatever you wish to call it, then implement a 1 pixel border within that CSS.

SimonTemplar

Also a good idea to look at the source code of that page and try to reverse engineer the code. I'd recommend you install Firebug which is an addon for Firefox for that purpose. That allows to you click on part of the website and the Firebug panel will show its corresponding HTML and CSS. You can also turn off each CSS declaration to see their individual effects on the rendering of the page.

Feathers

It can be overwhelming if you think people are saying "Go learn all HTML/CSS before asking for help", but that's not what we mean — the best thing to do would be to attempt to do it yourself & when you get stuck, post a specific question on what you don't know (& make sure to mention what you've tried so far to fix it and what happened differently to what you expected to happen).

Coders really like talking about code & arguing over detail: thinking about the different ways to address or explain a specific problem or quirk of CSS can be quite interesting to the wider forum & gets a good discussion going, even on a basic problem. You're much more likely to get people involved when it's not so high level.

So people don't mind you asking basic questions, but the more effort you put it, the more effort it encourages people helping you to put it (which applies to everything!).


Good luck, & please come back when you get stuck!

StupidLikeAFox

That site is using Wordpress. Might be less of a learning curve if you were to install it and find a suitable template

ChRoMe

SimonTemplar wrote: »

Also a good idea to look at the source code of that page and try to reverse engineer the code. I'd recommend you install Firebug which is an addon for Firefox for that purpose. That allows to you click on part of the website and the Firebug panel will show its corresponding HTML and CSS. You can also turn off each CSS declaration to see their individual effects on the rendering of the page.

This, a thousand times this.

Kur4mA

If you're using Google to search for good tutorials and are getting fed up with the insane amount out there, or are confused by the waffle of nettuts or one of the other huge course websites, I'd advise you to simply start here:

http://learn.shayhowe.com/html-css/

Shay is extremely straight forward with his explanations and gives really good examples. It's only 9 steps and covers the basics of both HTML and CSS. Oh, and it's free too.

54kroc

Cheers for the replies guys, I forgot to post back.
I managed to get pretty close to what I was looking for the night I asked the question and tbh it wasn't at all hard.

Thanks.