Console.log: Your First React App (Part 3)

Today we’re going to learn about Responsiveness.
Responsive

What is Responsiveness? In the context of web development it refers to how the website looks when the browser window is different sizes.

Full screen:
My document (2) 2

Varied sizes:
My document (2) 3

Or depending on devices. You can open websites on iPads or phones.
My document (3) (5)

Why does it matter?

Well, the really powerful property of web applications is that the same website can be accessed across a whole host of devices. Native development, like Android apps or iOS apps are dependent to the operating system and must be written accordingly to each. However, because websites can be accessed across all devices (with some differences in browser behavior) it cuts out the work and makes information or utility readily available to the greatest number of people fairly quickly.

Why not just build everything in websites?

There is a role to play for native applications. They can access system operations and utility that are not available to websites. This article does a great job of illustrating the pros and cons of each.

So… how do we make the web app responsive?
There’s two main CSS approaches:

– Media Queries for different breakpoints
– Using viewport and specifying percentages of the view

Whether we want to pick one over the other, it’s important to decide how detailed the smallest view would be. Imagine having a layout with horizontal images that in a mobile device would be too small to see if they were side by side vs if they were stacked. If you think the web app will look differently in smaller screens (i.e. the content will not flow identically just smaller), then I would recommend using media queries to target each size screen.

Given how simple the todo app we’re building is, we can just use the viewport and have the UI take a certain percent of the view always.

Let’s try it:

How to learn more?
Screen Shot 2020-05-17 at 9.44.08 PM
– responsive design
– responsive website
– media queries
– viewport

Other resources:
Google’s guide, it’s really good!
Cats Who Code made a media query guide

When selecting a source to learn from, I recommend getting acquainted with reputable sources. MDN, or Mozilla Developer Network, is a widely known and supported resource. w3schools has been around and is widely used. caniuse.com is amazing for checking what web technologies are available in which browsers. Ultimately, you will find yourself on stackoverflow as all developers do and I urge you to only use what you find if you understand it. Ask questions, read answers, and reason about what you see.


Part 1: May 4th
Step 1: Set up your development environment
Step 2: Run create-react-app
Part 2: May 11th
Step 3: Let’s build the home for our to-do app
Step 4: Let’s build a re-usable component
Part 3: May 18th
Step 5: Is it responsive???
Part 4: May 25th
Step 6: Is it accessible???
Part 5 June 1st
Step 7: Pretty, please
Part 6 June 8th
Step 8: Deploy
Step 9: Reflection