In this lesson we learn how to position and size our elements to utilize the full height and width of the browser window. We use different layout and positioning strategies for this “application” layout than we would normally use for a traditional “page” layout.
Link to demo page shown in lesson
Direct link to CSS
Direct link to JS
Put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? The next step is to use a web host to share your site with the world. Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month.
Hi Brad,
I started to watch your YouTube tutorials and found one that interests me, it’s called
“Full Height and Width Web App Style Layout Tutorial”,. I noticed the direct links to CSS and Jscript and the Demo page, but no direct link to the HTML page. Is there anyway I can get a copy of the coding for the HTML page?
Hi Mathew, sorry for the late reply, but you can find the HTML code for the demo by viewing and using your web browser’s “view source” option. Sometimes this can be found by right clicking on an empty part of the page, but every browser is different. If you Google for “how to view HTML source in XYZ” and replace XYZ with the name of the web browser you’re using (Google Chrome, Mozilla Firefox, Internet Explorer, Safari, etc…) you should find advice.