Hello I am developing a full scree website. I have got my basic designs on the paper however I am having trouble with coding it.
Here is a simple example of my site:
Google Glass Start
Since it will be simple like this I think designing it responsive will not be difficult.
Please put me on to a right track.
Where are you getting stuck? As you say, the site you liked to is pretty simple. Have you studied its code?
Yes I am having trouble understanding the CSS code:
http://www.google.com/glass/start/assets/css/google-glass.css
Lol. I would to. In fact I’d take one look at that and throw it all way. Never to return
That’s the wrong way to study it, obviously. 
Instead, use the dev tools in your browser. For example, in Chrome, right click > Inspect Element to view the HTML and CSS of the page.
All the same, this sort of layout is not hard, so I would suggest you just start from basics and build your page up. Firstly, establish the layout that you need to create.
When you say “a full screen website”, it’s not clear what you are really picturing. All websites are full screen, so to speak. Perhaps you mean something like this?
The site has a fullscreen effect, actually a full window with a youtube movie, when you press the “How it feels” button, a javascript effect. That CSS is hard to understand because its compacted, thats all. So if browse the whole document pressing enter after each element, youll get a nice code so everyone understands. Im not sure if Dreamweaver does that automatically ?
Yes that is what exactly what I meant!
I have studied the code and looks like its using percentages instead of pixels.
That’s fine, though: just switch from % to px on the inner divs if that suits better. Keep width: 100% on the outer divs, though, or it won’t work.
I can’t figure out how the color of header-outer and footer-outer is it is.
I can’t find any hex color values for the both of them.
Here is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout: full width bands</title>
<style media="all">
body {
font: 100% Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
background: #30353b; margin: 0; padding: 0;
}
.header-outer, .main-outer, .footer-outer {
width: 100%;
}
.main-outer {
background: #f7f7f7;
}
.header, .main, .footer {
margin: 0 auto;
width: 50em;
padding: 20px 0;
overflow:hidden;
max-width: 98%;
}
.header, .footer {
color: white;
}
a {
color: #D45227;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.footer p {
margin: 0; font-size: 0.85em;
}
.logo {
float: left;
padding: 30px;
background: #D45227;
}
h1, h2 {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 69%;
padding: 0 5% 0 0;
}
.sidebar {
width: 24%;
float: left;
}
@media only screen
and (max-width : 480px) {
body {-webkit-text-size-adjust: none;}
.content, .sidebar {float: none; width: 100%;}
.content {padding: 0;}
.sidebar {margin-top: 1em; padding-top: 1em; border-top: 1px solid #e7e7e7;}
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header-outer">
<div class="header">
<div class="logo">Your Logo here</div>
</div>
</div>
<div class="main-outer">
<div class="main">
<div class="content">
<h1>Layout: 100% width bands</h1>
<p>This is a simple page layout with bands of color across the page.</p>
<p>The basic idea is to have outer and inner divs for each section, the outer set to width: 100% and the inner divs centered with a width and margin: 0 auto;</p>
<p>The body background color serves as the background for the header section and the footer, but extends to the bottom of the screen if there is extra space. (That's much nicer than having a white gap at the bottom of the page under the footer.) Of course, each section could have its own background color. It's up to you.</p>
<p>The .header, .main and .footer divs are given a width in ems to make them more elastic, but the columns within the .main div are given % widths so that they will adjust in width on narrow browsers. (Squeeze the browser to a narrow width to see the effect. Also try zooming in on the page to see how nicely everything fits at a large size.)</p>
<p>The .header, .main and .footer divs are set to overflow: hidden to ensure that they <a href="http://pageaffairs.com/notebook/containing-floats">encose any floated content</a> within them.</p>
<p>@media rules are added so that, on small screens like handhelds, the floated columns will be unfloated.</p>
<p>Return to <a href="http://pageaffairs.com/code/layout-full-width-bands">original Page Affairs article</a>.</p>
<p>For more details on the fluid/elastic nature of this layout, see the <a href="http://pageaffairs.com/notebook/fluid-elastic-fantastic">Fluid, Elastic, Fantastic!</a> article.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Content relevant to the sidebar</p>
</div>
</div>
</div>
<div class="footer-outer">
<div class="footer">
<p>Footer text goes here. Layout by <a href="http://pageaffairs.com/">Page Affairs</a></p>
</div>
</div>
</body>
</html>
I have solved the problem.
How would I put images like https://www.spotify.com has done?
Looks like they are using CSS, not JavaScript.
Do you mean the background video? That’s relying heavily on JS.
https://www.spotify.com/nz/ is the website.
Sorry, I forgot the fact that it redirects accordingly to the clients IP address.
If you mean the full-screen background images, there are various ways to do that, from JS to the new CSS3 background-size property.