April 2, 2014

Full Height and Width Web App Style Layout

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.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

2 thoughts on “Full Height and Width Web App Style Layout

  1. 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?

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *