fluid layouts started

Natours/starter/README.md

@@ -0,0 +1,35 @@
+## Run
+
+$ live-server
+$ npm run compile:sass
+
+## Bases of responsive design
+
+- Use fluid layouts
+- Use `%` instead of `px`, especially in images
+- Use `max-width` instead of `width`, especially in images
+- Use `rem` instead of `px`
+- Use media queries when the rest fails
+
+## Fluid Layouts
+
+- Float : older way of doing the same job
+- Flexbox : 1 dimensional rows
+- CSS Grid : 2 dimensional grids
+
+
+## Selectors
+
+- Select all the elements that starts with col-
+```css
+[class^='col-'] {
+    background-color: red;
+}
+```
+
+- Select all the elements that ends with col-
+```css
+[class$='col-'] {
+    background-color: red;
+}
+```