Responsive

Due Date: Monday, 4/1/24

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

The Bootstrap framework is perhaps the most popular tool for RWD.

Go to W3schools and read the RWD introduction.
Continue to click the "Next" button. Read through:

RWD Intro
RWD Viewport
RWD Grid View
RWD Media Queries
RWD Images
RWD Videos

Start reading the next section (RWD Frameworks), but skip the first part about Using W3.CSS. Start reading again at the large heading that says "Bootstrap." When finished, you'll see "To learn more about Bootstrap, go to our Bootstrap Tutorial." Click on that.

Click "B3." From the left menu, select and read just the following two sections.

BS Grid Basic
BS Templates (in the section called Bootstrap Themes)

Look at the different templates and themes. Do at least 2 of the "Try-it" links and see what happens when you resize the window in each case.

One of the problems with understanding what's going on is that it uses css from " bootstrap.min.css " via a link statement. But that is public, too. So we can examine it.

Navigate to https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css and look at the file.

Search the sheet (Try using "find" on the window) for @media (min-width:. You can see that bootstrap uses media queries. What are the three "break points?"

Make a website with all new content, any topic you want. Make it responsive. All aspects of the site should look good both on phones and on desktops. Start by creating a small responsive site from a template.

Begin with the "collapsing columns" type of responsiveness shown in the first Bootstrap reading. You can copy the template given in that reading if you want, but then add your own content. Or start with one of the other templates at: First Example Template or Other Example Templates.

But that's just the "columns" thing. There are other aspects to responsiveness. Many of these can be handled with a set of media queries, that can contain any styling you want.

Include a set of media queries with standard break points.(600, 768, 992 and 1200px) Include at least some styling in each one. It can be

a different font size
choice of font
color
menu look and clickability (size) of menu items
hiding some elements on phones to streamline the look and feel

There are examples of these at W3Schools.

Images

Use images and make them responsive, too. For at least some of your images, use the img-responsive class to get them to shrink when viewed on a phone. Read about that here

Testing

It is essential that you test it out on your phone. In replit, do "open in a new tab," then copy the url of the page you made and send it to yourself. One way is to paste the url into an email, make it a clickable link in the email and mail it to yourself. Then open your email on the phone and click the link. See if everything looks good and behaves well: getting around on the page, font size, image size, menu clickability, etc.

If you can find a friend who has a different type of phone or a tablet, ask them for feedback in the same way.

Make sure that:

"collapsing columns" type of responsiveness works.
you have a set of media queries with standard break points. Include at least some styling in each one.
images shrink to fit when viewed on a phone.

Once it looks the way you want it to, then submit.

Rubric