Hello ,

 

My name is Rainier laan and i'm a student that is still learing to understand HTML CSS and also JS. I do know alot about HTML and CSS if it come's to me, u might see it diffrent.

I have this site called 'Rainierlaan.nl' and it's in an early stage. i'm trying to improve it in so many ways but i dont really know what to improve or how to begin with it. First thing i want to do is to make my site responive i think most of u guys know what that is so i dont have to explain it.

the second thing i want to improve is the overall layout and design. i make a sketch but its missing so much stuff and i dont really know anymore what there was suppose to be.

 

I hope we can all improve my site,

i left my 'horrible' sketch and my HTML and CSS code.

my site doesnt have any JS yet.

 

Rainier laan

index.html

style.css

Edited January 24, 201610 yr by Rainieren

First thing would be to look into why the font isn't loaded. I see the page with the default Times font.

My guess is that the path to the font is broken. If you see the Nexa font yourself it is probably because it is installed and being pulled from your local system.

 

Actually it is, and i see that on your screen my whole site is screwed up. How can i fix this?

Edited January 24, 201610 yr by Rainieren

The font won't display from the supplied code as it is a relative URL not a Google or other online hosted font.

@font-face {
    font-family: "Nexa Bold";
    src: url('font/Nexa%20Bold.otf');
}
@font-face {
    font-family: "Pacifico";
    src: url('font/Pacifico.ttf');
}@font-face {
    font-family: "Quicksand-Light";
    src: url('font/Quicksand-Light.otf');
}#font {
    font-family: "Quicksand-Light";
    width: 65%;
    float: right;
    padding-top: 210px;}
#font2 {
    font-family: "Pacifico";
    font-size: 100pt;
    float: left;
    padding-left: 30px;
    padding-top: 30px;}
#font3 {
    font-family: "Nexa Light";
}
#fontmain {
    font-family: "Nexa Light";
    padding-top: 20px;
}

Also the fact that you are specifying Nexa Light instead of Nexa Bold won't be doing things any favours. You might also run into issues with spaces in the file names.

 

You will also find problems further down the line by using all these ids for your selectors. What if you want to reuse id="fontmain" later in the page? You might as well specify it as class="fontmain" and then it is reusable

Edited January 25, 201610 yr by nfc212

Boter kaas en eieren

 

 

Butter, cheese and eggs. Sounds interesting and possibly tasty.

 

Worked in Amsterdam many years ago. Always started the day with an uitsmijter.

 

So you are saying that i have to change the Div ID to Div class? Am i correct?

Changing an ID to class won't make any real difference.

 

Forget all about fonts and whatnots for now. Focus on the site structure, get your content written, organise the navigation, develop footers and headers and do it all with a simple plain layout.

 

If you want to learn all about responsive design this is an excellent resource: https://responsivedesign.is/

 

Top Tip: build your site for small screens first and adapt up through tablets until you get to a large screen. Your current layout is going to need a huge amount of CSS to make it work on a phone. So start with the phone layout, you will find it much easier.

Can u send me sort of sketch of a good design that i can make? I would like to contact you via skype or anything to do this together not only the desgin but the code also. but if u dont want to im fine with that but ill really apprieciate it! My idea is a simple flat design with nice fonts and just an overall good looking site. im not the best designer if it comes to that so i would like some help.

my skype is Feudelcosine148 if u want to contact me some other way

Edited January 25, 201610 yr by Rainieren

A good design is one that your clients like. What I like is not what you like so there is no simple answer.

 

This is my layout: https://aerin.co.uk/

 

I get told it looks rubbish but it ranks well, has a bounce under 20% and gets me new clients. I'm told there is no design but what you see it the result of years of research and testing - there is a lot of design. The simpler you make the layout the easier it is to maintain and the less it distracts people from the content. Reduce the width of your browser and you will see the responsive changes.

 

I'm busy most of today but I will contact you via skype later.

Your website looks great in my opinion and it's responsive as well, correct me if i'm wrong. My idea for a design is a black bar at the top what i have on my site right now. At the left of the bar i want my logo and in the bar it self a navigation menu on the right that sinks in with the bar, just pich black. the navigation menu says "Home | creatie's | contact" but without the tripes ofcourse. the text is just white but when u go over it with your mouse is has this sort of effect to it and it goes grey. Ofcourse its clickable otherwise i wont have any effect. The navigation menu tab "creatie's" has a dropdown menu with all the creations i made (Creatie's is dutch for "creations"). And maybe i want a search bar also but i will take a look at that later on

That's just the top part, and also the postion of the bar need to be set to Fixed; but that's easy i think.

The header and the content i dont really know what to put there for now so ill just leave it there.

And the footer is a sort of facebookblue color with all the contact information such as facebook and twitter ect.

So i hope you have a pretty good idea now for what i am trying to do and i hope we can do this together.

Edited January 25, 201610 yr by Rainieren

You have got the basic structure in place.

 

I'd put your top bar in the <header>

 

Don't use fixed widths or sizes. Float your navigation next to your logo. Or better still put the navigation under the logo and get rid of that huuuuuge green box., It's not needed.

 

Simplify everything. Then make this simple layout work on all devices. Then start to make it look pretty. Don't add anything to the site until you have checked it works on all screen sizes.

 

For example, you can probably use small padding sizes on links on a large screen but you may need to increase this for a small screen (fingers are fatter than a pointer).

Here is what I think is the best way to replicate the layout in your image. This technique uses floats and a clearfix "hack".

The design has only one breakpoint (at 500px)

Fiddle here:

https://jsfiddle.net/Nillervision/33djmjzj/

It is the same approach that I use in my video tutorial that you commented yesterday, everything is explained in the tutorial.

 

BTW I totally agree with @@fisicx that your main focus should be on learning the layout techniques first. The first rule of design aesthetics is that "form should follow function" meaning that the main purpose of your design should be to present your content in the most readable/accessible way. After that is done you can start to work on the emotional/communicative design qualities (colour scheme, shapes, decorations)

Edited January 25, 201610 yr by Nillervision

Without actually knowing what your site is about it's really impossible to give tips on design as it isn't apparent who the target mugs,, errm users are.

 

Unfortunately design isn't as simple as some would have you believe and there are always people on little forums like this expounding on how they have found the elusive magic bullet. If they had they wouldn't be on little forums like this expounding on how they found the elusive magic bullet.

 

It's a little like being on LinkedIn and reading the profiles of all those CEO's whose company name always includes their surname. Yes, quite.

 

So ask yourself why successful brands whose CEO's aren't here or on LinkedIn spend a small fortune in market research, brand awareness and advertising each year. It's not just to keep commercial TV in business.

I will make a small sketch for what i mean with the bar and the footer. because if i have to be honest i dont really know what u are saying fisicx. im still a student in school and im only 17 years old. some things that you find easy are things i dont understand. some things i do understand otherwise i would not have my website by now.

I can send you the sketch but i dont know how, the most easiest way is via skype i think. beacuse i cant find a way to post it on here

Edited January 25, 201610 yr by Rainieren

the purpose of my website is just a simple website of myself and it has no purpose at all, not for real customers, they can not buy anything, the only thing they can do is learn who i am and what i do thats it. im trying to learn things here so i can do it on my own when im ready.

i know Nillervision, correct me if im wrong but i think what you trying to say is that i first need to make a sketch of my website, make it how the sketch is and then after im done with that do all the function behind it? i really apprieciate it by the way that you made that sketch of my site!

Edited January 25, 201610 yr by Rainieren

the purpose of my website is just a simple website of myself and it has no purpose at all, not for real customers, they can not buy anything, the only thing they can do is learn who i am and what i do thats it. im trying to learn things here so i can do it on my own when im ready.

i know Nillervision, correct me if im wrong but i think what you trying to say is that i first need to make a sketch of my website, make it how the sketch is and then after im done with that do all the function behind it? i really apprieciate it by the way that you made that sketch of my site!

I think what is causing you problems is very common for all beginners. There is so much to learn so it can be hard to figure out where to start. The best advice is to break your project into as many small tasks as possible and focus on one at the time.

Also remember that only very few people master all the aspects of producing a profesional looking website.

Some learn to master visual branding/ communicative design, others specialize in UI design and front-end development and others in SEO, back-end/ databases etc.

As a beginner you might not be sure what direction to follow , but you should definitely know a little about all the aspects, and as long as you keep it simple and break things up into small task you have a good chance of producing something decent.

 

Here is a typical workflow of the professional design process.

 

NOTE: This is just for inspiration on how to break down the design process. I dont expect you to follow every step

• Review the content: Find out what exactly is it that should be presented. Should more content be created/updated? Decide what is the purpose of the website what do you want to say and to whom.
• Research: Study how other sites (with the same purpose) have achived the goals.
• Ideation: Think about different approaches to structure and present your content visually.
• Sketching: A quick layout draft of your ideas using pencil and paper (just layot dont worry about colours and typography yet)
• Wireframing: Create all the main blocks of your layout (Can be done with graphic software or even better with HTML/CSS)
• Prototype: At this point we can develop a functional prototype for tests and evaluation.
• Branding UX and visual identity: Now you can move on to developing a visual "language".

  (This is the hardest part and requires knowledge about graphic design elements and some artistic skills).

  Decide on one or two main typefaces, imagery and colours. Remember the purpose of this is to strengthen the communication of the content and enhance the user experience - not (just) to make the site look pretty. Some tools you can look into here are mood boards, style tiles etc.

In the profesional process there are test evaluations and reviews between the different tasks and some tasks might overlap.

 

I hope this will give you an understanding of the many aspects of designing a webpage

• Branding UX and visual identity: Now you can move on to developing a visual "language".

Unfortunately this is where most people begin. Instead of properly managing the project people leap into the layout and get fixated on fonts and colours instead of creating content.

Your reply really really helped and its an amazing response. i will defently take a look at my work schedule and improve it, the first thing im going to focus on now is to make my design. if im done with that ill do the function after it. i worked the whole weekend on my website and if i dindt find out about this forum my website would not be this far. Fisicx said he would like to help me so im looking after that! and its always nicer to have somone with you to help you with problem you dont know the answer to. I will keep you guys up-to-date with my design and everything and if i run into problems ill just ask you all because i know you guys always know the answer.

With this out of the way i want to say something else.

My teacher gave me the assignment to make a game called "boter kaas eieren" its called tic tac toe in english, and its all about javascript.

he helped us many lessons but i still dont know what to do. i dont know what is what?

the final thing i need to fix about this game/program is the make the scoreboard function.

if PLAYER 1 wins it needs to say PLAYER 1: 1 point and that is the same for player 2 and if its a draw both of the players get 1 point.

i know this sounds really weird for u now but i think u need to see the overal thing. i can't put it online so i would like to show you via skype, to share the screen and then you can see the code behind it and the overall thing.

if u want to contact me my skype is feudelcosine148

if u want to contact me somewhere else just say so

 

Thank you guys for everything so far!

Edited January 25, 201610 yr by Rainieren

why don't you take help of any company.

Just copy the source url of some website ..