Konnor

Find sites you like and try to recreate their style. Chris Coyier had an interesting exercise to try... http://css-tricks.com/excercise-to-get-better-at-web-design/ ..however I think you might need some experience before trying something like that as you will be pulling your hair out. Smashing through some tutorials is great. You'll pick up techniques you can use elsewhere.

Howdy, Is there anyway to reload your javascript on the fly as you are resizing your browser? I'm using some javascript to create equal height columns, the 3 columns equalling the height of the largest column <!-- Equal Footer Column jQuery script --> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script> function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } $(document).ready(function() { equalHeight($(".column")); }); </script> I'm using this so my shadow is centered between the columns. However, as I'm looking to make my design responsive, when you resize the window, you need the javascript to refresh otherwise you end up with this.....

Representing East Anglia. Looking at the map so far we should all meet at Coventry....... Think I'll pass

At the moment it looks quite good down to a size of about 500px. Smaller than that and the navigation becomes unreadable or untidy. Good idea suggesting I could change it to a drop down. Think that would sort it right down to smartphone widths.

I wanted to center those three elements, so I would remove the floats. It's the width part of the elements that I wish to center that's confusing me, as my wrapper width is using max-width and contracts when the browser is re-sized. I've tried max-width and margin: 0 auto on child elements with no success. I stumbled across a solution using display:inline-block and text-align:center for each element. Not sure if I can better that. http://jsfiddle.net/Konnor5092/RQunc/ The centering is going to be used for small screen resolutions as it looks a bit neater.

Struggling to wrap my head round this. I'm trying to create a responsive layout and have a containing 'wrapper' as the following...... .cAlign { max-width: 62.5em; padding: 0 20px; margin: 0 auto; } I've no idea how to center 'stuff' within it. I'm looking to center all these elements....... http://jsfiddle.net/p2m6n/4/embedded/result/ And the full code... http://jsfiddle.net/p2m6n/4/ Many thanks!

I'd recommend trying it in real life, definately without the guns...

+1 on the busy'ness. More specifically.... - I had no idea until I looked properly that your top banner wasn't an advert. - Seems to lack a consistent grid structure. - The image in the logo I feel dominates the text and makes it less readable. - I'm not sold on your nav bar. Looks particularly busy. Has potential. I like the colours.

+1 on the busy'ness. More specifically.... - I had no idea until I looked properly that your top banner wasn't an advert. - Seems to lack a consistent grid structure. - The image in the logo I feel dominates the text and makes it less readable. - I'm not sold on your nav bar. Looks particularly busy. Has potential. I like the colours.

+1 for self study. You get to tailor your learning to the latest trends based on what you read on blogs, forums etc. Helps to try and be structured in your learning. I'm 5 months into learning web design and my knowledge is somewhat fragmented. Building my own test site I have wanted to implement HTML, CSS, some JQuery and PHP, built on wordpress AND wishing to improve my ability to create original design work in photoshop and illustrator. Naturally my brain is a little fried, but I'm inching towards the overall goal of being able to create attractive dynamic websites. Do lots of tutorials and have small little projects to keep you motivated. I like the stuff available on treehouse and tuts+ and from the many books out there. It's a nice change to read text in a book compared to staring at a computer monitor all day.

This piques my interest. As a beginner trying to get a first site live, I'm slowly becoming a jack of all trades, master of none. It's small bits of code that are tripping me up. I'd like to have time to develop in one particular area but I'm constantly jumping around. But yeah, I can see how it would be difficult to colab on a paid project without knowing the person well.

Hi all, I'm looking to implement an image gallery on my website, with something like Lightbox or Shadowbox but am a complete beginner. My intention was keep my markup clean by looping/pulling through every image in a folder. So going from this.... <ul class="gallery"> <a href="img/photo01.jpg" rel="lightbox[gallery]"> <li><img src="img/photo01.jpg" alt="description" /></li> </a> <a href="img/photo02.jpg" rel="lightbox[gallery]"> <li><img src="img/photo02.jpg" alt="description" /></li> </a> <a href="img/photo03.jpg" rel="lightbox[gallery]"> <li><img src="img/photo03.jpg" alt="description" /></li> </a> <a href="img/photo04.jpg" rel="lightbox[gallery]"> <li><img src="img/photo04.jpg" alt="description" /></li> </a> <a href="img/photo05.jpg" rel="lightbox[gallery]"> <li><img src="img/photo05.jpg" alt="description" /></li> </a> <a href="img/photo06.jpg" rel="lightbox[gallery]"> <li><img src="img/photo06.jpg" alt="description" /></li> </a> <a href="img/photo07.jpg" rel="lightbox[gallery]"> <li><img src="img/photo07.jpg" alt="description" /></li> </a> <a href="img/photo08.jpg" rel="lightbox[gallery]"> <li><img src="img/photo08.jpg" alt="description" /></li> </a> <a href="img/photo09.jpg" rel="lightbox[gallery]"> <li><img src="img/photo09.jpg" alt="description" /></li> </a> </ul> To something cleaner using JavaScript that loops through. So you can easily add additional images to a folder without changing the markup. I am a beginner to javascript, having just followed a few tutorials, but don't know where to start with this sort of thing. Any tutorials out there? Ta!

Quick note about Treehouse. I did like the service for the brief one month stint I was a member. They are fast moving in the right direction but not quite there yet for me. I understand they are working on it, but at the moment most of courses seem to lack decent quizzes, tests, challenges that push you to replicate and develop the skills you have learned in the videos. There is also Tuts+ premium which is a little cheaper. I think Treehouse is a better learning resource, but Tuts+ represents amazing value, especially with the ability to download all their ebooks for no additional cost. Both are great IMO. I love the way learning (in this subject) is moving forward and becoming more interactive.

I had thought about grunge, If I knew how to do grunge well....... Interesting you mention the background. I wonder if it can be tweaked with a more 'fitting' pattern.

I've finished my salsa design and would welcome some feedback. I'm a relative beginner so finding it much easier to do clean, corporate designs that don't require as much artistic photoshop flair. Any thoughts/concerns, likes/dislikes? Ta!

Too old? Never too old to do what you want with your life. I remember the days when I was a spritely 21 year old. I shall be requesting a pipe and slippers for my upcoming 27th birthday.

Is a hobby at the moment. Have a full time job which is arse. Seems to be working as an excuse to get away from the girlfriend when required....

This will vary between person to person in how they work, but can anyone recommend any resources, preferably books that give you a good handle on the full design process behind getting an idea to a completed template? Yes there are plenty of template tutorials out there, but you know what you are creating before hand. I'm still new, so most of this will come with time. More specifically I'm struggling with.... - The order of things. In which order do you do the logo design, colour palette, font choice, layout, actual front page design etc - I have ideas, but they typically look odd when translated to the page in photoshop. I need to learn things like how to use white space, how to proportion the logo with the navigation in the header, how to design banners etc. Any good books for this? - Fonts. What process do people go through to determine what fonts to use? Lots of font sites out there, definitely will be using free ones for the time being. Do people go to @font-face or google web fonts first to choose suitable fonts? - Correctly working with inspiration. I will usually have a browse of websites that match my planned colour scheme/theme for inspiration. This usually then determines what layout I might use. Is this the right way round? Should you do layout sketches before looking for inspiration? - There are too many moments of ‘I wish I could have thought to create a design like that’. Perhaps after 3 months learning photoshop/HTML/CSS part time I’m putting too much pressure on myself! BUT I sort of feel a little stagnant, randomly trying what I know in photoshop with poor, frustrating results. - Not quite got the mentality for choosing and doing appropriate tutorials. I’ll be thinking I’m just following a set of instructions that someone else has thought up. Am I experiencing early designers block?!

Stupid stock imagery that depict people much happier and more successful than myself.

They tend to look good in silhouettes IMO. Palm trees are rife in Cuba, and it's a Cuban salsa club. I wish I could say I knew that before adding them to the design.....

Just finished following a few tutorials to achieve the desired look for a salsa website I'm keen to setup as practise. What do you chaps reckon? The keen eyed will notice the dancers are doing the tango.... not salsa, BUT that was the only free stock I could find. Hit me.

It was just to check the code. It 'feels' clean but I'm curious to learn if there was anything that could be done better. No feedback is probably good feedback in this case!

After a couple of weeks I've finally finished coding a template. I followed the photoshop tutorial first here... http://designinstruct.com/web-design/create-a-light-textured-web-design-in-photoshop/ Then figure I'd challenge myself trying to code it. My effort is here.... http://www.mrbeanzy.co.uk/mattoconnor/designinstruct/ You'll notice certain small design elements are missing, but I'm quite pleased with it for the most part. I'm a little iffy on the buttons. Had all sort of formatting issues due to margins and padding on inline elements and the like. Hit me with your best feedback, good or bad. Thanks!

When you have the same values, used in different div's, where appropriate should you condense your code? So if I've got some CSS..... /************************************* Latest Works Styles **************************************/ #latestWorks { background: white url('../img/boxBG.jpg') top left repeat-x; float: left; width: 591px; border: 1px solid #bfc5c8; } #latestWorks ul li { float: left; padding-bottom: 25px; width: 50%; } #latestWorks ul li img { float: left; border: 1px solid #acacac; margin-right: 17px; } #latestWorks ul li p { padding-right: 10px; } /************************************* Latest Posts styles **************************************/ #latestPosts { background: white url('../img/boxBG.jpg') top left repeat-x; float: right; width: 246px; border: 1px solid #bfc5c8; } #latestPosts ul li { padding-bottom: 25px; } Because the <ul>'s in both these divs are lined up horizontally, they both have a padding-bottom of 25px; Is it good or bad practise to, wherever possible, streamline code to the following.... #latestWorks ul li, #latestPosts ul li { padding-bottom: 25px; } On one hand it seems it could be more difficult to read if your grouping values in your CSS. On the other hand it's easier to change just one value to all the relevent elements. Thoughts? Ta!

That's brilliant. Just what I needed. Had no idea you could set explicit height and width to the background attribute. Cheers fella,