How to Create a Web Page with HTML5 and CSS

Resizing the Browser Manually and using Web Developer tools

Just to be clear, I'm working on a Linux OS and hoping Windows and Mac users's procedures are similar.

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

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

If it isn't already there , open myfirstpage.html in the browser.

Now while still in Flex 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.

When performing this operation we're looking for elements on the web page that wrap. The first will be your header text.

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

I estimate the header p element wraps slightly after the width reaches 560 pixels. That means we'll create our first Media Query at 560 pixels viewing width. It would look better if it was centered, so let's center it.

The Media Query would look like this:

@media (max-width : 560px) {
header p {
float:none;
text-align: center
}
}

Copy and paste the Media Query below the last entry in your style sheet.

The media query is activated at 560px width, turns off the float: left property and centers the text.

Flex the page in and out and you'll notice that the navbar wraps at about the same point.

What's Next?

The next Lesson will involve creating the lmenu.html web page. hiding the 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.