HTML & Responsive CSS Tutorial using Notepad PDF Download

This tutorial explains how to build a basic index page by using HTML div layers and responsive CSS 3 (Cascading Style Sheet). Learn how to construct a multi device compatible web page. The use of full colour screen shots and step by step instructions will enable you to write and apply CSS to your web page by only using the MS Notepad editor. This Cascading Style Sheets and HTML Layers tutorial in PDF format requires prior knowledge of basic web editing (web coding) learned in the HTML Tutorial Part 1, 2 & 3 and is based on the Cascading Style Sheet (CSS) Tutorial Using Notepad. Duration of this tutorial is approximately 90 - 120 minutes.

Topics covered by this HTML Div & CSS Tutorial:

Div Layers & Responsive CSS:

1. Create and Save a HTML document using MS Notepad
2. Construct a layer to hold the page content
3. Construct a div Layer and insert a Banner Image
4. Applying a Responsive CSS Style to your Banner Image
5. Creating a Menu bar Layer
6. Constructing a Layer for Page Content

Find instructions on how to create an image container and insert an image. In this step a new style rule applied to the banner image will adjust the display to any screen resolution.
View the completed project

Responsive Cascading Style Sheet Tutorial:

You will learn how to create a html div layer to hold an image that adjusts to different screen resolutions. Insert an image tag into the image container, link it to an image residing in your images folder and apply the image_adjust style rule. The project files include a sample image ready for use. If you like to use your own image, dimensions should be around 300px wide and 400px high for this purpose. It is recommended to update and use your own content after completion of this tutorial.
This responsive Cascading Style Sheets and HTML Layers tutorial requires prior knowledge of basic web editing (web coding) learned in the our HTML & CSS tutorials. See Menu for other tutorial pages.

Download Tutorial in Adobe Reader .pdf format 1.7 MB


If you have prior knowledge of HTML and CSS you can download images and web pages used in this tutorial below:
Click to download project files used in this tutorial
Extract ZIP file into a folder in your Documents.

Educational institutions can contact us to print this PDF for study purposes only.
Expand the Tutorials Menu to access other Web Design and Image Editing Tutorials.
Back to Tutorials Main Page

All Creative Designs provide a Web Site Design and Development service with a difference and produce professional and innovative designs to your requirements. Every web site is unique and created without the use of pre-generated templates. We are developing interactive and informative web solutions for non-profit organisations by constructing dynamic member data bases with full administration functions. All Creative Designs services the Nambucca / Coffs Harbour area and NSW.

Tutorials, web designs and all images copyright ©2019 by www.allcreativedesigns.com.au world wide rights reserved.

ABN: 65869832328