Help With HTML/CSS Design

[DezUk]

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

 

[MonsterMoshi]

I would highly recommend using Bootstrap for such a site. You can replicate everything you have there including making it responsive and the image slider with very little CSS and no Javascript
http://getbootstrap.com

Good luck

 

[DezUk]

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?

 

[MonsterMoshi]

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

 

[dmsims]

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?

You still need plenty of CSS/HTML with Boostrap/another framework. It just takes the pain away IMHO

 

[radderfire]

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.

 

[DezUk]

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.

 

[AHarvey]

https://www.freecodecamp.com/

This will cover html, css, bootstrap and jquery to start with, i've not touched the later lessons yet

 

[radderfire]

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.

 

[OspreyO]

...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. ...

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]

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.

You won't, because you will add a breakpoint with a CSS media query to give a different layout for desktop.

 

[DezUk]

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.

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.

 

[OspreyO]

You won't, because you will add a breakpoint with a CSS media query to give a different layout for desktop.

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.

 

[radderfire]

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.

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

 

[Jono]

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

All of the above in bootstrap?

 

[dmsims]

All of the above in bootstrap?

No

 

[radderfire]

All of the above in bootstrap?

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.

 

[Jono]

Got ya

 

[DezUk]

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

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

 

[radderfire]

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:

<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;
}