How to Create a Web Page with HTML5 and CSS

Resizing the Browser Manually and using Web Developer tools

In order to start this lesson your browser is going to have to be in what I call Resize Mode. You can toggle between Resize and Full Screen by clicking the square box in the upper right corner of the browser. .

You know you're in Resize Mode when you hover the mouse pointer over the right edge of the browser and the curved triangle and vertical line or the double arrow on Windows 11 appear. Then hold down the left mouse button and you will be able to resize the window horizontally.

Now while still in Resize Mode, you want to open Developer Tools. All browsers except Firefox will open Developer Tools by pressing the Ctrl and Shift keys and then the j key at the same time.

Firefox users find the hamburger icon in the upper right corner(3 horizontal lines) and click it. Then choose More Tools - Web Developer Tools.

You should be looking at a split screen with Developer Tools in a right hand side bar.

Note: If Developer Tools opened on the bottom (Firefox again), perform the procedutre on the right edge of the browser or find the 3 dot settings menu (right corner) and choose Dock Right.

Now hover the mouse pointer over the border between the web page and the sider bar until you see a double headed arrow. Grab the edge as you did on the right edge of the browser window by holding down the left mouse button. Start squeezing the web page to the left and watch above the double headed arrow as the page width is displayed and reduces.

Note: If the web page doesn't expand and reduce as you move the double arrow from side to side, it's most likely the Emulator tool is turned on. Find the icon and toggle it off. If you don't know how to find the icon see: Emulator Tool

We can use this process to determine the break points we'll use with our Media Queries.

If you were to repeat the process with myfirstpage in the browser window you'd see something like the image below.

I estimate the header p element wraps just after the width reaches 560 pixels. That means we'll create our first Media Query at 560 pixels viewing width. We'll center the text and prevent the wrapping later on using the Media Query.

Note: You should close Developer Tools before starting the next lesson. Press CTRL SHIFT J again or find the X in the upper right corner of the tool window.

What's Next?

The next Lesson will involve creating the lmenu.html web page, hiding the horizontal navbar and displaying the lmenu.html web page.

You should begin to test the web page with the Emulator Tool.

At this point you should also be checking your code in the W3C Validator.

 

Helps

 

Free Tools and Resources

Need something more advanced? Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.