From db3e2377d86f8b3d2938ec714d5fee8f54da5864 Mon Sep 17 00:00:00 2001 From: Mehul Mohan Date: Sat, 24 Sep 2022 15:00:34 +0530 Subject: [PATCH] Update headings --- bird-app/step0/Instructions.md | 4 +- bird-app/step1/Instructions.md | 2 - bird-app/step2/Instructions.md | 2 - bird-app/step3/Instructions.md | 2 - .../step0/Instructions.md | 2 - .../step1/Instructions.md | 56 +++++++++---------- .../step2/Instructions.md | 38 ++++++------- 7 files changed, 48 insertions(+), 58 deletions(-) diff --git a/bird-app/step0/Instructions.md b/bird-app/step0/Instructions.md index 3cea385f..3b1c9182 100644 --- a/bird-app/step0/Instructions.md +++ b/bird-app/step0/Instructions.md @@ -1,7 +1,5 @@ -# Getting Started - Hello there, welcome to the first step of the making bird app social media project. The aim for this project is to build a simple CRUD app for manipulating social media posts but only with localStorage knowledge. -# Build a landing page for the social media +## Build a landing page for the social media This step involes you building a landing page for the social media website. Take a look inside the task checklist on the left to see all the steps you have to complete to pass this step. diff --git a/bird-app/step1/Instructions.md b/bird-app/step1/Instructions.md index 5d130432..3fc5258c 100644 --- a/bird-app/step1/Instructions.md +++ b/bird-app/step1/Instructions.md @@ -1,5 +1,3 @@ -# Build a register page at /register - In this step, we will aim to build a register page on /register path. You will have to work with `localStorage` API to add the registered user to `localStorage` once they register successfully. ## Pointers to note diff --git a/bird-app/step2/Instructions.md b/bird-app/step2/Instructions.md index 7aeea64a..c6d7a3eb 100644 --- a/bird-app/step2/Instructions.md +++ b/bird-app/step2/Instructions.md @@ -1,5 +1,3 @@ -# Build a login page at /login - In this step, the main goal is to build the /login page to extend functionality of the /register page. Your users should be able to login with the same credentials. Check the challenges tabs to know what all you should be implementing. All the best! diff --git a/bird-app/step3/Instructions.md b/bird-app/step3/Instructions.md index 5bac1049..741b41b0 100644 --- a/bird-app/step3/Instructions.md +++ b/bird-app/step3/Instructions.md @@ -1,5 +1,3 @@ -# Building dashboard - The dashboard should load feed from all the users. This feed should be also stored in localStorage as feed as the localStorage key, and the following structure as the value (feel free to change it to add more features): ```json diff --git a/multiverse-html5-photo-gallery/step0/Instructions.md b/multiverse-html5-photo-gallery/step0/Instructions.md index ace301ae..a4f569ab 100644 --- a/multiverse-html5-photo-gallery/step0/Instructions.md +++ b/multiverse-html5-photo-gallery/step0/Instructions.md @@ -1,5 +1,3 @@ -# Getting Started - Hello there, welcome to the first step of the HTML5 Photo Gallery tutorial. In this project, we are going to build a photo gallery using an existing set of images. You can find these images in the `assets` folder. We will be using only `HTML5` and `CSS3` to build this project. Go through the `README.md` file to get a better idea of the project. You can view the final design of the project in the `design` folder. It contains the screenshots of the final output in desktop and mobile viewports. diff --git a/multiverse-html5-photo-gallery/step1/Instructions.md b/multiverse-html5-photo-gallery/step1/Instructions.md index c133fee2..0855836c 100644 --- a/multiverse-html5-photo-gallery/step1/Instructions.md +++ b/multiverse-html5-photo-gallery/step1/Instructions.md @@ -2,15 +2,15 @@ In this step our goal is to set up the basic boilerplate code and link the `styl Before jumping into the code of the project, make sure that you understand the basic structure of the HTML5 document and what the boilerplate code does: -- `` tag: Tells the browser that we are using HTML5 and not any previous versions of HTML. -- `` tag: Tells the browser that the content inside the `` tag is, well, HTML! -- `` tag: Tells the browser that the content inside the `` tag is metadata about the HTML document. -- `` tag: Tells the browser that the content inside the `` tag is the content to be displayed on the browser page. -- `` tag: Tells the browser that we want to link an external file with the HTML document, and process it. +- `` tag: Tells the browser that we are using HTML5 and not any previous versions of HTML. +- `` tag: Tells the browser that the content inside the `` tag is, well, HTML! +- `` tag: Tells the browser that the content inside the `` tag is metadata about the HTML document. +- `` tag: Tells the browser that the content inside the `` tag is the content to be displayed on the browser page. +- `` tag: Tells the browser that we want to link an external file with the HTML document, and process it. It is advised that you go though the [HTML & CSS Fundamentals course](https://codedamn.com/learn/html-css) for a comprehensive and detailed understanding of these tags. -# What will you do? +## What will you do? In this step you are tasked to create a new `style.css` file and link it with the existing `index.html` document. @@ -18,38 +18,38 @@ In this step you are tasked to create a new `style.css` file and link it with th 2. Create and link the `style.css` file with the `index.html` file. Add the following line of code inside the `` tag of the `index.html` file, using the `` tag. - ```html - - ``` + ```html + + ``` - Here the `rel` attribute specifies the relationship between the HTML document and the linked file. The `href` attribute specifies the path to the linked file. + Here the `rel` attribute specifies the relationship between the HTML document and the linked file. The `href` attribute specifies the path to the linked file. 3. Add some styling to the document. Set `margin` and `padding` to `0`, and `box-sizing` to `border-box`, for all the elements of the HTML Document. - ```css - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - ``` + ```css + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + ``` - `margin`, `padding` and `box-sizing` are the CSS properties that are used to set the spacing between the elements of the HTML document. + `margin`, `padding` and `box-sizing` are the CSS properties that are used to set the spacing between the elements of the HTML document. - By settings these values globally to all the elements, it removes the different pre-defined margins and paddings of the elements (which are set by browsers), making it easier to style. + By settings these values globally to all the elements, it removes the different pre-defined margins and paddings of the elements (which are set by browsers), making it easier to style. 4. Set the `background-color` of the `body` element to `#242629`. - ```css - body { - background-color: #242629; - } - ``` + ```css + body { + background-color: #242629; + } + ``` - The six digit value is written in hexadecimal (base 16) and here + The six digit value is written in hexadecimal (base 16) and here - - the first two digits `24` represent the intensity of red - - the next two digits `26` represent the intensity of Green - - the last two digits `29` represent the intensity of Blue + - the first two digits `24` represent the intensity of red + - the next two digits `26` represent the intensity of Green + - the last two digits `29` represent the intensity of Blue Now that we setup the basic boilerplate code and linked the `style.css` file with the `index.html` file, let's move on to the next step and create the HTML. diff --git a/multiverse-html5-photo-gallery/step2/Instructions.md b/multiverse-html5-photo-gallery/step2/Instructions.md index 1e32c9d2..654c733e 100644 --- a/multiverse-html5-photo-gallery/step2/Instructions.md +++ b/multiverse-html5-photo-gallery/step2/Instructions.md @@ -2,41 +2,41 @@ In this step the main goal is to build the HTML structure for the gallery projec Here the `>` means the child of the parent, the `+` means the sibling of the previous element: -- `article` is the parent -- `img` & `span` are the siblings +- `article` is the parent +- `img` & `span` are the siblings -# What will you do? +## What will you do? 1. Create the `
` tag inside the `div#gallery-container` element: - ```html -
- ``` + ```html +
+ ``` 2. Add `` and `` tags to `
` element: - ```html -
- - -
- ``` + ```html +
+ + +
+ ``` - This represents the HTML structure for 1 image. Do this for 11 other images as well. + This represents the HTML structure for 1 image. Do this for 11 other images as well. 3. Set the `src` attribute of each individual ``: - ```html - - ``` + ```html + + ``` - Make sure to set the `src` attribute refers to all the images in the assets folder. + Make sure to set the `src` attribute refers to all the images in the assets folder. 4. Adding `lorem` text to the span tag. `lorem` refers to random placeholder text. You can add custom text if you want. - The text we are adding to the span tag represents the title of the image. So we'll restrict the word length to three. + The text we are adding to the span tag represents the title of the image. So we'll restrict the word length to three. - `Emmet` is available on Codedamn Playgrounds, you can directly write `lorem3` and hit space to generate three words inside the `` tag. Or you can choose to write any three words of your choice for all the span tags. + `Emmet` is available on Codedamn Playgrounds, you can directly write `lorem3` and hit space to generate three words inside the `` tag. Or you can choose to write any three words of your choice for all the span tags. ## For Geeks