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. browser icon .

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.

web page in browser

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

Lovely Keyboard Laptop users: I just can't believe how much faster and easier I can work on my laptop since I added a wireless mouse and keyboard.

I bought a MOFII Lovely for my wife as a birthday present and she loved it. I borrowed it one day just to see if it would speed things up on my laptop.

Trying to do web development on a laptop can really be a pain if you've got a lot to do.

So, I bought one for myself and plugged the little nano 2 in 1 receiver into my USB port. Started cranking out pages instantly.

Kick myself now for not getting it sooner.

Desktop or laptop, I highly recommend MOFII wireless mouse and keyboard.

Check it Out!

Free Tools and Resources We Recommend

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.

Free Responsive Web Design Certification freeCodeCamp: freeCodeCamp is a proven path to your first software developer job.; More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.; Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.; FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3: "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light: All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp: Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users: If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.; For image resizing we've found the easiest Linux tool to be Krita.