FOLLOW THE DIRECTIONS

Hands-On Practice 7.8 In this Hands-On Practice you'll work with a web page that demonstrates responsive web design. Figure 7.25 depicts the three-column desktop browser display and shows the effects of medi viewport size is 1024 pixels or smaller (a tablet display) and display a single-column page optimized for smartphone display when the viewport size is 768 pixels or smaller. You will edit the CSS to configure flexible images. a queries which are configured to display a two-column page when the Tablet Display Width Smartphone Display Width Desktop Browser Figure 7.25 The web page demonstrates responsive wet design techniques Create a folder named flexible7. Copy the starter4.html file from the chapter7 folder into the flexible7 folder and rename it index.html. Copy the following images from the student files chapter7/starters folder into the flexible7 folder: header.jpg and pools.jpg. Launch a browser and view index.html as shown in Figure 7.26. View the code in a text editor and notice that the height and width attributes have already been removed from the HTML View the CSS and notice that the web page uses a fluid layout with percentage values for widths. Edit the embedded CSS. Hands-On Practice 7.8 In this Hands-On Practice you'll work with a web page that demonstrates responsive web design. Figure 7.25 depicts the three-column desktop browser display and shows the effects of medi viewport size is 1024 pixels or smaller (a tablet display) and display a single-column page optimized for smartphone display when the viewport size is 768 pixels or smaller. You will edit the CSS to configure flexible images. a queries which are configured to display a two-column page when the Tablet Display Width Smartphone Display Width Desktop Browser Figure 7.25 The web page demonstrates responsive wet design techniques Create a folder named flexible7. Copy the starter4.html file from the chapter7 folder into the flexible7 folder and rename it index.html. Copy the following images from the student files chapter7/starters folder into the flexible7 folder: header.jpg and pools.jpg. Launch a browser and view index.html as shown in Figure 7.26. View the code in a text editor and notice that the height and width attributes have already been removed from the HTML View the CSS and notice that the web page uses a fluid layout with percentage values for widths. Edit the embedded CSS