HTML5 Help to help me get a new job

SpaceCowb0y

Hi

This isn't a work wanted post, this is a student wondering if there are any experienced web designers in Dublin (preferably on the north side) who would be willing to give me an hour or two of their time to show me a few things that could help me secure a new job.

Basically I have been given 3 designs (1 for mobile, 1 for tablet and 1 for desktop) and have to build a responsive site to reflect these designs without the aid of any frameworks and using clean semantic HTML5 and CSS3. The idea being that if they are happy with the end result they'll have some work for me!

I have never coded a responsive site from scratch before so to say i'm finding this difficult is an understatement. I went through a few tutorials to get the fundamentals and have made a good start on things over the weekend but I'm running into problems all over the place now as I try to move down the screen sizes.

If anyone thinks they can help out and has a bit of time to spare where they wouldn't mind sharing their knowledge with someone really eager to learn I'd really appreciate it!

Cheers

Fussgangerzone

1. When's the deadline?
2. Are you using media queries for size in your css?
3. Do you have all your common css rules outside the width-specific blocks of css?
4. Can you show us where you are with it?
5. Or at least tell us what's causing you problems?

SpaceCowb0y

Hi Thanks for your reply!

The deadline is next Monday, i thought i would have had something for them this week but i had assignments due in last week and I've an exam tomorrow that i had to put time into too so i asked if they could hold off until next Monday now and they said no problem.

Yes i'm using media queries, well trying to at least but its not all going swimmingly really hence why I'm reaching out for a bit of help.

When you say common rules im not exactly sure what you mean, Basically they asked for me to build it mobile first but i wasn't able to so i found a good tutorial that started with the desktop and worked its way down in size. I'm hoping if/when i finish it that it's good enough that they will take into consideration I've never done this before and still give me a chance! But to answer your question i started off with all the css for the desktop view to get the main layout down and then started on the media queries if that helps to answer?

I'm not sure how i could show you as i haven't it hosted anywhere but if you have any suggestions id be happy to display it somehow

The main problem i have are getting the nav to move where i want it as the screen moves down in size and to have the articles in different sections align how they are in the mock designs i was given which i haven't been able to replicate so far.

SpaceCowb0y

Also below the header there is a "banner" section or whatever you want to call it with a main background image that is supposed to scale down but i can't get this to work properly either

off.the.walls

I don't mean this in a bad way but why should you get the job if you're not able to do it when someone else who possibly can preform these tasks may be getting turned down from the role? I know this sounds harsh and you do have to learn how to do these things but at the same time if you don't know how to do this you shouldn't be spoofing your way into a position.

SpaceCowb0y

Cheers for your input, good man really helpful!! The position i'm going for is part time and they are well aware i'm a final year student! I'm already working for a web design agency in Dublin im just not learning anything where i am hence why i went looking for a new job! I didn't feel i had to explain myself to anyone on the forum to simply ask for some help!

Fussgangerzone

By common rules, I mean all the css rules that are the same no matter what size the browser is.

This would be colour schemes, fonts and other typesetting, all the css that is for every size. These css rules should not be wrapped in a media query.

Is the background image for the banner a css background?
Consider this rule: background-size
I find it invaluable for responsive layouts.
Alternatively, you can set a different background image for different resolutions, using media queries.

Also, just because they've told you not to use any frameworks, doesn't mean you can't learn from those frameworks. You might look at the site for Twitter Bootstrap. Observe how it changes at different sizes. Use the Inspect Element feature in Chrome or Firefox to see how the css changes. Figure out what has been done, and why.

This slideshow on OOCSS and SMACSS, both of which are just approaches to writing css, not a weird new technology, is very good. You won't see the point of it all straight away, but if you start combining classes, you'll find your code much easier to work with.

Regarding the nav: what isn't working exactly?

SpaceCowb0y

Ah yes that's all done, i just went at it like i was building a normal site except used width: auto; max-width: 1000px for example and built the site like i normally would for a static site.

I've then moved on to the media queries but i think mine are a bit all over the shop as im just sticking in rules now to compensate for things that are going wrong.

one things that's really bothering me is inside all of my section tags i have articles but all the articles are left aligned no matter what i try!

As for the nav well i'll show you:

Here is the desktop, tablet and i was given, i have the desktop layout pretty much exactly the way it is but as i move down both of the nav menus go crazy!

They both start displaying vertically in the centre of the screen as opposed to the top nav simply sliding to the left and the bottom nav moving down under the logo! I have a jQuery plugin in to use for the mobile version of the bottom nav that i have styled to suit i just can get the menu to sit in the right place

Desktop


Tablet


also as i move from the desktop down to tablet that background image disappears on me! i just set it using

section#banner {
background: url (..path to image);
background-size: cover;
}