1 of 34

Responsive design

2 of 34

Security group

Development environment

Route53�DNS

EC2�Web server

Internet

Node.js�Web services

MongoDB

Gateway

React

VS Code

Console

GitHub

Git

Users

Production environment

Atlas

Web browser

SSH/SCP

HTTPS

3 of 34

Responsive design

4 of 34

<meta name="viewport" />

float:right

display:grid

display:flex

@media

5 of 34

<meta

name="viewport"

content="width=device-width, initial-scale=1"

/>

6 of 34

aside {

float: right;

padding: 3em;

margin: 0.5em;

border: black solid thin;

}

7 of 34

Display

8 of 34

none

block

inline

flex

grid

9 of 34

Grid

10 of 34

<div class="container">

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

<div class="card"></div>

</div>

11 of 34

.container {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-auto-rows: 300px;

grid-gap: 1em;

}

make children a grid

12 of 34

13 of 34

Flex

14 of 34

.container {

display: flex;

}

​

.item {

flex: 0 0 50px;

}

​

make children flexible

grow, shrink, basis

15 of 34

<body>

<div class="container">

<div class="item item-1">Item 1</div>

<div class="item item-2">Item 2</div>

<div class="item item-3">Item 3</div>

</div>

</body>

16 of 34

<style>

* {

box-sizing: border-box;

margin: 0;

}

.container {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

width: 100vw;

height: 100vh;

background-color: lightgray;

}

​

.item {

padding: 20px;

margin: 10px;

background-color: steelblue;

color: white;

text-align: center;

}

​

.item-1 {

flex: 0 0 20%;

}

​

.item-2 {

flex: 0 0 20%;

}

​

.item-3 {

flex: 0 0 20%;

}

</style>

​

17 of 34

18 of 34

19 of 34

Media Queries

20 of 34

@media (orientation: portrait) {

div {

transform: rotate(270deg);

}

}

21 of 34

@media (orientation: portrait) {

body {

flex-direction: column;

}

}

​

@media ((orientation: portrait) and (max-height: 500px)) {

aside {

display: none;

}

}

22 of 34

@media (orientation: portrait) {

main {

flex-direction: column;

}

}

​

@media (max-height: 700px) {

header {

display: none;

}

footer {

display: none;

}

}

23 of 34

24 of 34

☑Assignment

Create a codepen for this:

25 of 34

CSS Frameworks

26 of 34

27 of 34

28 of 34

29 of 34

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />

</head>

​

<body>

<button type="button">Plain</button>

<button type="button" class="btn btn-outline-primary">Bootstrap</button>

​

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>

30 of 34

31 of 34

☑Assignment

  1. Fork Bootstrap CodePen
  2. Add different components

32 of 34

Simon CSS

33 of 34

🚀 Deliverable - CSS

Learn from Simon

Deploy simon-css

Implement startup CSS

Deploy

34 of 34

Get busy!