jamiemcuk

Love the flat design and simplicity of it. Great job for a first site.

Well, it doesn't have to be flat! OP: Design for your users, not for other designers and trends.

Well, Your website looks normal. You need to add attrative graphics. Make with best color combination. There are several Flat Design available on the web for your inspiration. Develop website as per users point of view, users should get easily what they want.

This is my method..
 
1st you have to create a database for save all images's urls and descriptions..
all uploaded images must be resize as you wish.
after that, you must needed to load images when the page is loading... (you can use php for the load images)
 
then. there must be a jquery solutions for randomly get image view...
 
are you going with this method?

Exactly the opposite, actually. Personally, I feel even better about their presence.
 
These kind of easy web builders, even advanced ones that create top-notch and modern websites, always have limitations and always have full control. They're aimed at the designer newbies market (in a nice way), but at the end of the day, having a website tailor-made 100% around your specification as opposed to using a web builder will always prove more beneficial.
 
I like to think of Subway when I compare web builders to actual web developers: pre-made sandwiches off the shelf in a supermarket are web builders - there's a bit of variety but you can't make it yourself, whereas with Subway, you can get exactly what you want right down to the last shred of red onion, which is precisely what a web developer does. Tadaaa.

I'll make sure to link you it

Thanks very very very much lol. Much appreciated.

Two simple options: either add spaces after each link with   (the ASCII for a one character space), or add span classes to each link and set margins. I would go with the latter, it's better practice. Here, I did it for you. New codes:
 
HTML:
<h1>Yijian Jin</h1> <ul> <span class="link"><a href="/Index">HOME</a></span> <span class="link"><a href="/About">EDUCATION</a></span> <span class="link"><a href="/Work">LOVED ONES</a></span> <span class="link"><a href="/Blog">HOBBIES/INTERESTS</a></span> <span class="link"><a href="/Contact">CONTACT</a></span> </ul> CSS:
 
.link{ margin-right: 15px; } Add that CSS to your stylesheet somewhere.
 
EDIT: Although the margin method causes the last link to shift sideways and look out of place, so add this:
 
HTML:
<span class="link" id="contactlink"><a href="/Contact">CONTACT</a></span>  
CSS:
 
#contactlink{ margin-right: 0px; }  

Here you go, new CSS:
 
body { background: url(http://www.powerplayrealty.com/uploads/Image/beach.jpg) no-repeat; background-attachment: fixed; background-size: cover; margin:0 auto; padding:0; } .container { background-image: url(http://www.simonbutcher.net/images/boxbg.png); background-repeat: repeat-x repeat-y; height: 80px; position:relative; margin-top:60px; width: 100%; } .content { width:960px; position:relative; z-index:2; margin: auto; padding:0; } h1 { float:left; font-family:calibri, sans-serif; font-size:20px; color:#dedede; letter-spacing:-1px; margin-top:25px; } h1:hover { color:#fff; } ul { float:right; margin-top:29px; } ul a { display: inline; width: 33.3%; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#dedede; } ul a:hover { color:#fff; } #beach { z-index: -999; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } .container2 { position: relative; width: 960px; margin: auto; } .content2 { width:960px; background-image: url(http://www.simonbutcher.net/images/boxbg.png); background-repeat: repeat-x repeat-y; position:relative; left: 0px; top: 0px; z-index:9; margin-top: 10px; padding: 10px; padding-top: 1px; } h2 { font-family:calibri, sans-serif; font-size:20px; color:#fff; letter-spacing:-1px; margin-top:25px; } p { font-family:calibri, sans-serif; font-size:14px; color:#fff; letter-spacing:0px; margin-top:25px; }  

Fair point, missed that. The easiest solution I've found is to make (or find) a tiny black background image, which is already faded, and repeat it X and Y. Use mine if you want: http://www.simonbutcher.net/images/boxbg.png - want help implementing it?

Fixed. Here's the code:
 
HTML:
 
<!DOCTYPE html> <html> <head> <title>Yijian Jin - Home</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="C:/Users/user/Documents/WebDesign/Project/globalstyles.css" /> <link rel='icon' type='image/ico' href='/favicon.ico'/> </head> <body> <div class="container"> <div class="content"> <h1>Yijian Jin</h1> <ul> <a href="/Index">HOME</a> <a href="/About">EDUCATION</a> <a href="/Work">LOVED ONES</a> <a href="/Blog">HOBBIES/INTERESTS</a> <a href="/Contact">CONTACT</a> </ul> </div> <!-- content --> </div><!-- container --><!-- banner --> <div class="container2"> <div class="content2"> <h2>Welcome</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> </div> <!-- content2 --> <div class="background2"></div><!-- background2 --> </div><!-- container2 --> </body> </html>  
CSS:

body { background: url(http://www.powerplayrealty.com/uploads/Image/beach.jpg) no-repeat; background-attachment: fixed; background-size: cover; margin:0 auto; padding:0; } .container { background-color: black; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; height: 80px; position:relative; margin-top:60px; width: 100%; } .content { width:960px; position:relative; z-index:2; margin: auto; padding:0; } h1 { float:left; font-family:calibri, sans-serif; font-size:20px; color:#dedede; letter-spacing:-1px; margin-top:25px; } h1:hover { color:#fff; } ul { float:right; margin-top:29px; } ul a { display: inline; width: 33.3%; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#dedede; } ul a:hover { color:#fff; } #beach { z-index: -999; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } .container2 { position: relative; width: 960px; margin: auto; } .content2 { width:960px; background-color: black; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; position:relative; left: 0px; top: 0px; z-index:9; margin-top: 10px; padding: 10px; padding-top: 1px; } h2 { font-family:calibri, sans-serif; font-size:20px; color:#fff; letter-spacing:-1px; margin-top:25px; } p { font-family:calibri, sans-serif; font-size:14px; color:#fff; letter-spacing:0px; margin-top:25px; } If (in future) you want a div to be centered in the middle of a page, you need to set the containing div's position: relative and then the content div to position: absolute with margin: auto. Another side recommendation - use IDs instead of classes for your divs. Classes are universal to the document, whereas IDs are unique to a single div (or other element) - you don't use 'container' or 'content' (etc) in any other cases, so they don't need to be classes.
 
Need any more help, just ask.

Not sure I agree, we had a client who saw ~35% mobile traffic. We made his site responsive and bounce rates dropped across the board. We've seen similar elsewhere.
 
Also "It Costs More And Takes Longer" - again a bit of a fallacy.
 
We've created our own in-house 'boilerplate' and yes that took time, but now we can turn out responsive websites quicker than starting a fresh. In fact the work that used to take 5 days now takes just 3.
 
Ok if you have to create every site from scratch it wouldn't be as cost-effective as 'static', but why would you?

It's quite interesting that they discuss on a Wordpress blog that a responsive site takes more cost and effort.
Responsive themes are available for wordpress, why should it be a big deal to use them?

Pandas comments are pretty spot-on.
 
Design wise it's a good start. I would probably left align the 'What services...' to the 'find out more' button. Also the menu would look better vertically aligned in the middle rather than the top, again next to the right 'find out more' button.
 
Code wise there are a few old techniques being used. Regarding the rollovers, you can achieve those using CSS (http://jsfiddle.net/jack_pallot/Zgcdq/). The icons are a bit confusing, if an element isn't clickable it shouldn't really have a hover (rollover) state, it's a bit of a usability issue.

I think so far the light blue is too light at the moment and can be difficult to read with the white background.
 
Make the logo a link to the homepage, it's the convention and most people browse home using the logo.
 
I also saw that your "Find out More" buttons are images with JS showing another image using the onmouseover function. It would be better for speed to use css instead with the :hover function.
 
Your menu is wrapped with the <ul> tag but there are no <li> tags wrapped around each menu item making the <ul> tag pointless. It would be best to put each menu item in an <li> tag.
 
I don't see the need for the Internet/Monitor/Social images to have a mouseover unless they are linking to the same place as the "find out more" button. I think it would be better that both the button and the image above would hover together rather than seperate.
 
The closing tag for #info is spelt incorrectly ("</dov>").
 
I saw you're using the <center> tag. It's best to use CSS as it's a depricated tag.
 
The gap between the "Web Design" and "Graphic Design" is different from the other side. Best you make the gaps the same.
 
Also the favicon links to your local folder!
 
I like the font you're using for your logo but I think it's a bit weak. I think something is needed to spice it up a little.
 
Maybe the <p> tags are a tag too light. I'm all for contrast!
 
It's coming along nicely so far, looking forward to seeing the final product! Hope this helps somewhat.

Dribbble is great! Behance is good, too, both allow you to post your work in progress, as well and finished and polished projects, also you can get a lot of work enquiries through Dribbble

Behance. I like it a lot. Dribble is also good but haven't used it, plus you need to be invited.

The tutorial referenced is a decent starting place to give you an overview of what is required to process a form, validate the data, insert to a d/b and send an email but it is nearly 4 years old and using deprecated functions.
 
First and foremost - don't use the mysql functions, PHP 5.5 is now out and soon mysql functions will not be supported. Learn the mysqli extension or even better learn the PDO class. Since you're new to this, you might as well learn techniques which have a future.
 
Secondly, look up PHP's filter functions for validation. They are more secure and make validation easy, particularly email addresses and urls. You can find these functions and a lot more in the php manual. If you have any specific questions on any of these functions, post them here.

<div id="banner"> <div class="container"> <div class="banner_left"> </div><!--banner_left--> <div class="banner_right"> </div><!--banner_right--> <div class="clear"></div> content goes here </div><!--container--> </div><!--banner-->  
.container {width:800px;margin:0 auto;} #banner {width:100%;height:300px;background:#0071bc;} .banner_left{float:left;width:350px;height:200px;background:orange;margin:0 10px 0 0;} .banner_right{float:right;width:400px;height:200px;background:orange;margin:0 0px 0 0;} .clear{clear:both;}

wrap #banner in another div, Let's say .wide and just apply the colour to that instead.
 
On mobile so can't give you the code mate, should be easy to follow though.