Help With HTML/CSS Design

DezUk

DezUk

DezUk

Associate
Joined
20 Sep 2003
Posts
2,376
Location
Scotland
Hi Folks,

I have been out of web dev/design for a good few years and the last site I put together was in WordPress using a custom theme. The site was not maintained and became broken so I have not had it online for a while now but i can be found here.

I am a bit of a n00b when it comes to CSS but I don't think it will take me long to pick up and I wanted to use this design as a template to start and learn again. So without using WordPress and just using a text editor I want to try and re-create the above via HTML/CSS and I am looking for help on how to go about it as looking at the code for this it seems very bloated for what it is.

I realise it uses a js slider for the animated images, just looking to replicate the layout and menu system for now.

Cheers
 
Yeah I've read about bootstrap but I feel I should learn from the roots with CC before I dive into using a framework. Or is that over doing it?
 
Honestly, if you are just wanting to do this one site then just learn the framework. Perhaps if you are wanting to do a lot more then it's worth learning the roots so you know how Bootstrap does what it does but it's not critical
I did a few websites just using plain old CSS and HTML thinking that was the right thing to before moving onto a framework but when I eventually discovered Bootstrap I realized how much time I had been wasting
 
DezUk said:
Yeah I've read about bootstrap but I feel I should learn from the roots with CC before I dive into using a framework. Or is that over doing it?
Click to expand...

You still need plenty of CSS/HTML with Boostrap/another framework. It just takes the pain away IMHO
 
I would say try and build it first from scratch using HTML, as that will teach you all the fundamentals of CSS based design. I think learning this is quite a hard task as things go. I have done it myself and I can code a CSS layout from scratch, but the hard part is finding out all the information and getting to know how CSS layout and floats and stuff work. It takes a lot of effort.

Then learn Bootstrap because it's good at creating different layout types quickly and handling the more technical stuff.
 
Last edited:
Thanks guys, I do like the idea of learning to code it in HTML/CSS from scratch, just the desktop site, not mobile. As you say this will allow me to understand whats actually going on behind the scenes and get a grasp of CSS. Once I have that I can use bootstrap to then get the site working cross platform.
 
I will help you a bit if you post in this thread.

The first thing you need to do is create a mobile design. You should design to mobile first, then you add CSS media queries to adjust layout as the screen size increases.

So, first thing to do is create a graphic mockup for mobile.

You need to create the various divs for header, body content and footer. Use divs with 100%.

Decide on your navigation solution for mobile.
 
radderfire said:
...The first thing you need to do is create a mobile design. You should design to mobile first, then you add CSS media queries to adjust layout as the screen size increases. ...
Click to expand...

I know why you say/do that, and yes its probably best starting off.

But personally I hate that approach. I don't want a mobile experience on my desktop.
 
radderfire said:
I will help you a bit if you post in this thread.

The first thing you need to do is create a mobile design. You should design to mobile first, then you add CSS media queries to adjust layout as the screen size increases.

So, first thing to do is create a graphic mockup for mobile.

You need to create the various divs for header, body content and footer. Use divs with 100%.

Decide on your navigation solution for mobile.
Click to expand...

Really appreciate this offer man. I want to first try and design it on desktop first just to get my head around CSS as its been ages since I last touched it. Let me try and come up with something over the next week or so and see how we get on from there.
 
radderfire said:
You won't, because you will add a breakpoint with a CSS media query to give a different layout for desktop.
Click to expand...

Thats my problem with it. A Desktop experience can a lot more than being simply a different layout. For example you have a mouse and keyboard you can do a lot of drag and drop and UI functionality that wouldn't be usable with a mobile. So many sites are dumbed down to the lowest common denominator which is mobile or tablet for many.

Anyway apologies I didn't mean to drag this off topic. Creating a common site make sense for many sites.
 
DezUk said:
Really appreciate this offer man. I want to first try and design it on desktop first just to get my head around CSS as its been ages since I last touched it. Let me try and come up with something over the next week or so and see how we get on from there.
Click to expand...

Sure, if you want to do that no problem.

I would advise a mobile first approach though, use Ctrl+Shift+I in Chrome to design to a screen width of 320px. Set 100% width divs for:

Header

Main Nav (unless you want it as part of header)

Main Body

Footer

Get a mobile site working first.

The reason I say this, is it's then easy to see how the media queries work, and where you need/want to set your break points.

Keep things as simple as possible while you are first learning.

Rgds
 
radderfire said:
Sure, if you want to do that no problem.

I would advise a mobile first approach though, use Ctrl+Shift+I in Chrome to design to a screen width of 320px. Set 100% width divs for:

Header

Main Nav (unless you want it as part of header)

Main Body

Footer

Get a mobile site working first.

The reason I say this, is it's then easy to see how the media queries work, and where you need/want to set your break points.

Keep things as simple as possible while you are first learning.

Rgds
Click to expand...

All of the above in bootstrap?
 
Jono said:
All of the above in bootstrap?
Click to expand...

No, I'm saying code this yourself from scratch with HTML and CSS, to learn how it works. You need to fully understand the fundamentals, before moving to Bootstrap, which does eveything needed but won't give you the fundamental knowledge you should have.
 
So I made a very basic start to trying to re-create the website in my op. Its basic HTML/CSS as I want to learn from the ground up and then go rom there. Not had much time as just became a Dad so time is limited as you can imagine :D

http://rdoyle.info/temp/

  1. So how can I get the columns more spaced out, currently using % widths?
  2. How can I style the menu the same as the original site?

I used this video to help me get this design up and running
https://www.youtube.com/watch?v=9tzyJEwO9Os
 
So how can I get the columns more spaced out, currently using % widths?

Apply left and right margin to the divs.

How can I style the menu the same as the original site?

You've already started with some list styling. Best to add a unique identifier to your navigation, so:

Code: 
<div id="navcontainer">

<div id="navigation">
<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
</div>
</div>

Then in your stylesheet have:

#navcontainer {
/* Insert your styles */
}

#navigation {
/* Insert your styles */
}

#navigation ul
{
/* Insert Your styles */
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a {
/*Insert your styles */
}

Then to style the hover:

#navigation li a:hover {
      border-top: 2px solid #5aa5d0;
}
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom