diff --git a/responsive-html-css.md b/responsive-html-css.md
new file mode 100644
index 0000000..c06209d
--- /dev/null
+++ b/responsive-html-css.md
@@ -0,0 +1,591 @@
+# Ytb be Like
+
+This tutorial will try to make a layout for youtube. We will go from mobile layout through desktop layout.
+> this notes are ported from [github.com/miun173/ytb-be-like](https://github.com/miun173/ytb-be-like/tree/master)
+
+## Part 00
+
+In this part we import the bootstrap grid css and will make the layout without styling, just using some placeholder and bootstrap-grid.
+
+1. Import the bootstrap grid css located in `assets/bootstrap-4.1.3-dist/css/bootstrap-grid.min.css`. By adding this code inside the `` tag
+
+ ```html
+
+ ```
+
+2. Then add header tag inside ``
+
+ ```html
+
+
+ ```
+
+3. Now we will make the container inside the `` by adding this code
+
+ ```html
+
+
+ ```
+
+4. Inside the container (the `div`) we will add a navbar. With three nav-items inside it.
+
+ ```html
+
+ ```
+
+- Here we see after class css `row` it follows by class `col`. This is the pattern to use in bootstrap.
+
+5. To make it looks nice we will add some styling.
+
+- Make a new folder in `assets` folder called `custom`. And in `custom`
+ folder make a css file called `custom.css`.
+
+- Open `custom.css` and add the following code
+
+ ```css
+ /* Reset */
+ * {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Font */
+ * {
+ font-family: Arial, Helvetica, sans-serif;
+ }
+
+ .bold {
+ font-weight: bold;
+ }
+
+ /* Colors */
+ .bg-red {
+ background: #d32f2f;
+ }
+ .white {
+ color: #fff;
+ }
+ ```
+
+- Add this css class to the `header`
+
+ ```html
+
+ ```
+
+- Then we will styling the navbar too. add this to `custom.css` after `.white{}`
+
+ ```css
+ ...
+ /* Alignment */
+ .center {
+ margin: 0 auto !important;
+ }
+
+ /* Components */
+ .navbar {
+ padding-top: 1em;
+ padding-bottom: 1em;
+ }
+ ```
+
+- Add those class to `