This quiz tests your basic knowledge of Git commands.

Git Commands Level 1

This quiz tests your basic knowledge of HTML elements.

How well do you know HTML elements? Beginner Level

This quiz tests your basic knowledge of JavaScript object.

How well do you know JavaScript object?


One of the things a lot of newbie developers overlook often is the format of their commit messages. Properly formatted commit messages can do so much more than just looking neat, such as:

1. **Provide context to the code reviewer:**  A good commit message provides basic information to the reviewer about what the commit achieves, without them needing to dive into the code unless they are looking for specifics. This saves up a lot of time on the review process.
2. **Help in maintaining a feature log:**  While writing release notes before shipping, developers can often quickly look at the history of commit messages to have a broad idea of the features added/removed/modified since the last release.
3. **Provide knowledge transfer:**  Most projects involve multiple people/teams working on different features. Each entity generally works on their local branch, which they rebase with the master at regular intervals. In such cases, having a broad idea of the code changes implemented by other collaborators via proper commit messages can save a lot of developer time spent in cross-communication.

## DOs and DONTs of commit messages

Now that we have seen the 'Why' of a good commit message, let us look at the 'How'. There are certain points to be kept in mind while crafting a commit message, which is outlined below.

### Subject in a single line

Most commit messages are short enough that they require just one line. For example,

```
Add authentication to user routes
```

But in other cases, where you feel the commit messages are too long to fit in a single line, then split your commit messages into a subject and body. Separate the subject and body by a blank line. For example,

```
Switch app architecture to MVVM

Convert components with memory management issue from MVP to MVVM arch
```

By doing so, you give other developers the option to see a git log with a detailed commit message (by using `git log`) or a log with just the subject (by using `git log --oneline`).

### Subject within 50 characters

Ensuring that the subject text remains 50 characters at maximum encourages developers to think of a brief and concise way about what their code implements. By default, in Github, you get a warning if the commit subject text is more than 50 characters. In a list view, if the subject is more than 72 characters, then Github truncates the end with an ellipsis. Hence, it's considered a good practice to aim for a subject line with 50 characters while keeping a strong check on not exceeding 72 characters.

### Begin subject with a capital letter

Begin all subject lines with a capital letter, i.e. `Fix image cropping issues` instead of `fix image cropping issues`. This tends to give your messages a much neater and uniform look in the git log.

### Do not end subject with a full stop

This is self-explanatory

### Use the imperative mood(present tense) when framing messages

Think of each commit in your code as a change that is being applied to your codebase. Each commit in your code is used to apply a change. Few examples are

1. Add a feature
2. Modify an existing feature
3. Remove a feature

Sentences written in the above tone are what is known as the imperative mood(present tense). This is different from how we are tempted to write messages, called the indicative mood(past tense). Corresponding examples are

1. Added a feature
2. Modified an existing feature
3. Removed a feature

Git commits are better written in an imperative mood since Git by default uses the imperative mood to report its actions. For example, look at commands such as `git merge master`, `git add index.html`, `git merge branch1`. Even actions performed in Github are written in an imperative mood, for example, `Merge pull request #10 from user1/user1branch`.

To avoid any confusion, try to write a subject line that satisfies this sentence:

`If applied, this commit will <subject_line>`

For example,

1. If applied, this commit will add payment integration
2. If applied, this commit will update database configurations
3. If applied, this commit will remove redundant code

Keep in mind that this rule of imperative mood applies only to the subject of the commit message. Feel free to use any tense in the body.


How to write good Git commit messages



## Pictorial Representation

| Data | Method | Condition/Parameter | Result |
| :-- | :-- | :-- | :-- |
| 🥚️🍓️🍎️🍗️🍖️🍇️ | filter | veg | 🍓️🍎️🍇️ |
| 🥚️🍓️🍎️🍗️🍖️🍇️ | filter | non-veg | 🥚️🍗️🍖️ |
| 🍗️🍖️🍞️🌶️🌰️🥩️ | reduce | sandwich | 🥪️ |
| 🍗️🍖️🍞️🌶️🌰️🥩️ | reduce | eat | 💩️ |
| 😷️🤒️🤕️🤧️🤮️ | map | meet a doc 👨‍🎨️ | 😌️😌️😌️😌️😌️ |
| 🐓️🐓️🐓️🐓️🐓️ | map | edible | 🍗️🍗️🍗️🍗️🍗️🍗️ |
| 👨️👶️👴️👦️ | sort | default | 👶️ 👦️👨️ 👴️ |
| 🤵️🤵️🤵️🤵️🤵️🤵️ | concat | 🎓️ | 🤵️🤵️🤵️🤵️🤵️🤵️ 🎓️ |
| 🍗️🍖️🍞️🌶️🌰️🥩️ | push | 🐓️ | 🍗️🍖️🍞️🌶️🌰️🥩️ 🐓️ |
| 🍗️🍖️🍞️🌶️🌰️🥩️🐓️ | pop |  | 🍗️🍖️🍞️🌶️🌰️🥩️ |
| 🥚️🍓️🍎️🍗️🍖️🍇️ | shift | default | 🍓️🍎️🍗️🍖️🍇️ |
| 🥚️🍓️🍎️🍗️🍖️🍇️ | unshift | 👨️👶️👴️ | 👨️👶️👴️ 🥚️🍓️🍎️🍗️🍖️🍇️ |
| 🦊️🐺️🦅️🦌️🐰️ | reverse |  | 🐰️🦌️🦅️🐺️🦊️ |

---

## Array methods

### 1. concat()

The `concat()` method is used to concatenate two or more arrays. It doesn't mutate the original arrays, rather creates a new one.

**Returns -** A new Array instance.

**Example -**

```js
var concatAlphabets = ['ab', 'bb', 'cb'].concat(['db', 'eb', 'fb']);
console.log(concatAlphabets);
// The value of concatedAlphabets would be - ['ab', 'bb', 'cb', 'db', 'eb', 'fb']
```

### 2. filter()

The `filter()` method returns an array of all those elements who have passed the testing conditions. The returned array length is always less than or equal to the original length. It doesn't mutate the original array.

**Returns -** A new array with all the elements that pass the test else an empty array.

```js
var words = ['spray', 'exuberant', 'destruction', 'present'].filter(
  word => word.length > 7
);
console.log(words);
// The value of words would be - ["exuberant", "destruction", "present"]
```

### 3. map()

The `map()` method accepts a callback function and executes the function on each element. The length of the returned array is the same as the mapped array. It doesn't change the original array.

**Returns -** A new array with each element being the result of the callback function.

**Example -**

```js
var multiplyByTwo = [1, 4, 10, 16].map(x => x * 2)
console.log(multiplyByTwo);
// The value of multiplyByTwo would be - [2, 8, 20, 32]
```

### 4. pop()

The `pop()` method mutates the original array by removing its last element. The resulting array has a length less than the original array.

**Returns -** The removed element from the array, undefined if the array is empty.

**Example -**

```js
var returnedValue = ['hey', 'hello', 'array', 'object', 'tomato'].pop();
console.log(returnedValue);
// The value of returnedValue would be - "tomato"
```

### 5. push()

The `push()` method mutates the original array by adding new elements to the end of the array.

**Returns -** The new length of the array upon which the method was called.

**Example -**

```js
var returnedValue = ['pigs', 'goats', 'sheep'].push('cows');
console.log(returnedValue);
// The value of returnedValue would be - 4
```

### 6. reduce()

The `reduce()` method accepts a callback function and executes the function on each element.

**Returns -** The single value that results from the reduction. The returned value can be a string, number, array, object, or any other data type.

**Example -**

```js
var returnedValue = [1, 2, 3, 4].reduce(
  (accumulator, currentValue) => accumulator + currentValue
);
console.log(returnedValue);
// The value of returnedValue would be - 10
```

### 7. reverse()

The `reverse()` method reverses the original array.

**Returns -** The reversed array.

**Example -**

```js
var reversedArray = ['one', 'two', 'three'].reverse();
console.log(reversedArray);
// The value of reversedArray would be - ["three", "two", "one"]
```


### 8. shift()

The `shift()` method mutates the original array by removing elements from the beginning. As a side effect, it changes the length of the array.

**Returns -** The removed element from the array; undefined if the array is empty.

**Example -**

```js
var returnedValue = [1, 2, 3].shift();
console.log(returnedValue);
// The value of returnedValue would be - "1"
```

### 9. sort()

The `sort()` method sorts the elements in ascending order by default. The default method includes converting elements to strings and comparing their sequences of UTF-16 code unit values.

**Returns -** The sorted array. Note that the array is sorted in place, and no copy is made.

**Example -**

```js
var sortedValue = [1, 30, 44, 21, 12].sort();
console.log(sortedValue);
// The value of sortedValue would be - [1, 12, 21, 30, 44]
```

### 10. unshift()

The `unshift()` method mutates the original array by adding new elements at the beginning of the array.

**Returns -** The new length of the array.

**Example -**

```js
var returnedValue = [1, 2, 3].unshift(4, 5);
console.log(returnedValue);
// The value of returnedValue would be - 5
```


Array methods explained with pictorial representation


It's important to acquire skills and learn various parts of development but in order to get a job its equally important to present your skills in a meaningful way. That is why we need a portfolio - to demonstrate your ability to potential employers.

In this guide, we will learn how to build a good portfolio with actionable items.

### Build projects
The most concrete way of proving skill set is  -  **to show**. We should strive to build quality projects that showcase our knowledge. Host them up online so that we can demo it by just sharing an URL (use services like [Github-pages](https://pages.github.com/), [Netlify](https://netlify.com) etc).

Back your projects with code(put them up on Github) that people can see. Code and the deployed projects is our chance to show that we care for the details. So please lint, add documentation, follow style guides and make it presentable.

It's a bonus to work on a variety of projects (Websites, CLIs, Visualisations, Games, Apps, Libraries). The deeper and non-trivial they are, better the chances of getting hired.

>Actionable Item -  Figure out a few good projects that you would like to do, add depth to them, finish them, host them online and make them presentable.

### Putting ourselves out there

As we go about learning and improving our skillsets, share them consistently. One of the ways we can do this is by tweeting every day. It builds up.

It shows consistency, builds confidence and exposes us to the broader community for feedback and improvement. We should share our tweets using hashtags like [#100DaysOfCode](https://twitter.com/hashtag/100DaysOfCode) for more visibility. We do this at AltCampus as well, our students tweet about their progress every day using [#AltCampus](https://twitter.com/hashtag/AltCampus).

Another way is to write blog posts, we will talk about it in the last section.

>Actionable Item - Start with Tweeting every day. Eventually, you can participate in dev communities like StackOverflow, Dev.to, Subreddits, Hashnode.

### Open source contributions

It's important to be able to write code and build your projects but its also equally important to be able to read and contribute to an existing codebase. A great way to do this is by following and reading a few open source projects on Github.

The challenge with this though is finding a good project that matches your current skills. You should either ask about it in communities or seek a mentor who can point you in the right direction. Here's a [list for beginners](https://www.firsttimersonly.com/). A lot of these projects have specific issues that are labeled as 'good-first-issue' which is primarily for beginner devs to get started with open source contribution.

>Actionable Step -  Look up the list and try to find a project and a few issues that you can at least read, understand and try to work on.

### Personal website with an active blog
Well, now is the time to put them together and build one platform to showcase our work and self. One should build a good personal website. Our website should reflect who we are and shouldn't just be another template website. It serves as one point information source for people looking us up or potential employers. So make sure that the following things are listed properly -

1. `Projects ` -  We should also add descriptions about why and how we built a particular project. What did we learn while building them. Our reflections.

2. `Blog` - Having an active blog shows that one cares to document, can organize thoughts in words effectively and hence proves our communication skills. One can write technical posts about particular topics that you recently learned; non-technical posts about your experience learning/doing something. Make them informative and easier to understand.

3. `About section and links to Profiles`  -  In about section, write about yourself, your interests etc. Provide links to Github, Twitter, LinkedIn etc. Also, make sure that these profiles are updated.

4. `Contact` - A form or an email that makes it easier for people to get in touch with us.

Feel free to add more stuff and please make it look presentable. We can build such personal websites along with blogs on static site generators like Jekyll, Hugo, Gatsby, Next etc.

>Actionable step - Make your personal website and start writing blog posts.



How to build a great portfolio as a beginner developer


Debugging the code is a major part of the development process. The most common way of debugging is using `console.log`. For example

```js
console.log('Hello ', 'World'); // Hello World!
console.log('Cannot load the file!'); // Cannot load the file
console.log('Cannot connect to server!'); // Cannot connect to server
```

Looking at the output, you can see some messages are critical and some are not. But visually they all look the same in the console. But what if there was a way to convey more information with the same message.

`log` is just one of the methods in the `console` object. Try doing `console.log(console)` you will see there are many other methods that we don't use regularly. In this article we will learn about using other console methods.

![Console Object](/_nextassets/blog/how-to-use-console-like-a-pro/console.png)

## Semantic Logging

Semantic logging is a way to use appropriate methods to provide extra bit of information. This will help the user or the developer to understand how critical the issue is. All these methods work like `console.log`, but the difference is in how the message is displayed.

- `console.warn` for displaying warnings.
- `console.error` for displaying an error.
- `console.info` for displaying any piece of information.

![Console Filter](/_nextassets/blog/how-to-use-console-like-a-pro/filter.png)

> Using these methods also gives you an option to filter them in console.

## String Substitution

We know that `console.log` takes an infinite number of arguments (any data types) and prints them with a space in the console. There is a special case where if the first argument is a `string` you can use **string substitution.**

If the first argument is using any string substitution character (like %c, %s) it uses the next argument as the substitution.

```jsx
console.log('Hello %s!', 'Arya'); // Hello Arya
console.log('Hello %s, I am %d years old!', 'Arya', 19);
// Hello Arya, I am 19 years old!
```

- **`%s` -** for string
- **`%d` -** for digit
- **`%o` -** for object
- **`%c` -** for css or style

There is also a special directive `%c` that is used to apply style to the `console` output. Go ahead, open console and try the code below. 🤩🤩

```jsx
console.log(
  'Hello %cArya',
  'color: yellow; font-style: italic; font-size: 20px; background-color: black; padding: 2px;'
);
```

_How was that? Try doing something creative and tag us using @altcampus on twitter._

## Extra Functionality

**`console.group`** helps you group multiple messages together under one title. You can collapse or open it.

```jsx
let users = [
  { name: 'Arya', age: 19 },
  { name: 'John', age: 25 },
  { name: 'Sansa', age: 23 }
];
// without grouping
for (let i = 0; i < users.length; i++) {
  console.log(users[i].name);
  console.log(users[i].age);
}
// with grouping
for (let i = 0; i < users.length; i++) {
  console.group(users[i].name);
  console.log(users[i].name);
  console.log(users[i].age);
  console.groupEnd();
}
```

![Console Group](/_nextassets/blog/how-to-use-console-like-a-pro/group.png)

**`console.time`** helps you track time taken by any operation. Each timer accepts a unique name.

```jsx
console.time('creatingData');
var data = [];
for (let i = 0; i < 100000; i++) {
  data.push(i * 2);
}
console.timeEnd('creatingData');

// OUTPUT
// creatingData: 2.803955078125ms
```

**The name passed to `time` and `timeEnd` should be same.**


**`console.table`** displays the data in tabular format. The data passed as an argument should either be an `array` or an `object`. It also accepts second parameter that will be an array of key you want to be visible in the table.

```jsx
let users = [
  { name: 'Arya', age: 19 },
  { name: 'John', age: 25 },
  { name: 'Sansa', age: 23 }
];
console.table(users);
console.table(users, ['name']);
console.table(users, ['age']);
```

![Table](/_nextassets/blog/how-to-use-console-like-a-pro/table.png)

```jsx
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    console.count();
  }
}
/*
Output:
default: 1
default: 2
default: 3
default: 4
default: 5
*/
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    console.count('even numbers');
  }
}
/*
Output:
even numbers: 1
even numbers: 2
even numbers: 3
even numbers: 4
even numbers: 5
*/
```

> **TIPS**: Instead of doing `console.log(user)` do `console.log({user})`. Easier to track because you get a key indicating the value.


How to use console like a pro

Whether we are a beginner or an expert in HTML it is important to follow some set of rules to keep our HTML documents consistent and well organized. Writing clean code should be one of our biggest concerns.

> Initially, beginners just focus on making the layout. While this is an important first step, it leaves us with messy code.
> One should always refactor and try to make the code look as clean and beautiful as possible.

Writing the best code not only keeps our code clean but also plays an important role in SEO. Here I am listing a few best practices that will keep our HTML code clean and impressive for those who read it including ourselves.

### 1. Use Proper Document Structure

HTML, by nature, is a forgiving language that allows even poorly written code to execute. Our pages will render without elements such as `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>`. But without these structural elements, pages will not render properly in every browser.

**Bad:**

```html
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
```

**Good:**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>
```

### 2. Always Write Standards-Compliant Markup

Make sure to open and close and nest elements properly.

**Bad:**

```html
<p id="intro"><strong>AltCampus, the alternative to college
that you wish existed.</p></strong>
<p id="intro">A 6-month program that helps you become a software developer.
```

**Good:**

```html
<p class="intro">
  <strong>AltCampus, the alternative to college that you wish existed.</strong>.
</p>
<p class="intro">
  A 6-month program that helps you become a software developer.
</p>
```

### 3. Indent the code

Intended code is easier to read, easier to understand, and easier to maintain.

**Bad:**

```
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
```

**Good:**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>
```

### 4. Keep the Syntax Organised

There are a few quick rules that can help us to keep our code organized. Such as:

- Indent the nested elements.
- Use lowercase for elements, attributes, and values.
- Use either single or double quotes, but we should be consistent with whatever we choose.
- Omit the values for the boolean attribute.

**Bad:**

```html
<aside>
  <h3>Chicago</h3>
  <h5 hidden="HIDDEN">City in Illinois</h5>
  <img
    src="chicago.jpg"
    alt="Chicago, the third most populous city in the United States"
  />
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>
```

**Good:**

```html
<aside>
  <h3>Chicago</h3>
  <h5 hidden>City in Illinois</h5>
  <img
    src="chicago.jpg"
    alt="Chicago, the third most populous city in the United States"
  />
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>
```

Consistency is important to keep our code fully organized. When we find a specific practice that we like. We should stick to it, and use it everywhere, and not mix up.

### 5. Make Use of Semantic Elements

The library of HTML elements is really big, we can use any elements to display our content. Displaying our content on a page is easy, but displaying with proper meaning and intent can be tricky. So choose tags wisely, it should always be semantically correct.

For e.g. an important line should not be wrapped in `<span>` tag but in any of the heading tags(`<h1>..<h6>`). Use `<aside>` for creating sidebar rather than generic `<div>` etc.

**Bad:**

```html
<span class="heading"><strong>AltCampus</span></strong>
<br><br>
The Alternative to College That You Wish Existed
<br><br>
```

**Good:**

```html
<h1>AltCampus</h1>
<p>The Alternative to College That You Wish Existed</p>
```

### 6. Use `<h1>` Tag Only Once Per Page

The `<h1>` tag plays a significant role in ranking our page on search engines, so we should assign it to the most important text on our page.

**Bad:**

```html
<h1>AltCampus</h1>
<p>The Alternative to College That You Wish Existed</p>
<h1>Full Stack Web Development</h1>
<p>
  Immersive bootcamp, rigorous curriculum, and the right environment to learn
  software development.
</p>
```

**Good:**

```html
<h1>AltCampus</h1>
<p>The Alternative to College That You Wish Existed</p>
<h2>Full Stack Web Development</h2>
<p>
  Immersive bootcamp, rigorous curriculum, and the right environment to learn
  software development.
</p>
```

### 7. Exterminate "Divitis"

We often overuse divs, to style the elements. It works for styling purposes but does not add meaning to our content on a page.

**Bad:**

```html
<div class="container">
  <div class="article">
    <div class="headline">Headlines Across the World</div>
  </div>
</div>
```

**Good:**

```html
<section class="container">
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</section>
```

### 8. Avoid Too Much Commenting

Commenting code is good practice, but too much commenting makes our code look bad. HTML provides self-explanatory elements. Use commenting to make things a bit clearer, not for obvious or badly written code.

> "Don't comment bad code. Rewrite it." - Brian W. Kernighan

**Bad:**

```html

<div>
  
  <div>
    
    <div>Headlines Across the World</div>
  </div>
</div>
```

**Good:**

```html

<section>
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</section>
```

### 9. Do Not Use Inline Styling, Instead Use External Stylesheet

Inline styling may seem easier at first, but it is harder to maintain and also increases the line of code.

Using external stylesheet gives us the option to reuse our code. Also, we can style all our pages using a single external stylesheet.

**Bad:**

```html
<p style="color: #393; font-size: 24px;">Thank you!</p>
```

**Good:**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="greeting">Hello, how are you?</p>
  </body>
</html>
```

### 10. Alternative Text Attribute on Images

Using alternative text attributes on <img> elements provides context to screen readers and is good for accessibility.

**Bad:**

```
<img src="football.jpg">
```

**Good:**

```html
<img
  src="football.jpg"
  alt="Two little kids are playing footbal, while their moms are watching"
/>
```

### 11. Practical ID and Class Values:

Choosing good class and id names requires a skill that comes with experiences. One thing we can do as a beginner is to try to choose our class or id names based on the content and not on its styles.

**Bad:**

```html
<p class="red">
  Error! please try again.
</p>
```

**Good:**

```html
<p class="error">
  Error! please try again.
</p>
```

### 12. Use Proper White Spaces

Many people especially beginners write messed up codes without using whitespaces. Also, it is common to find they use extra spaces in the attribute values.

**Bad:**

```
<body>
<h1>List</h1>
<ul class=" list "><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</body>
```

**Good:**

```html
<body>
  <h1>List</h1>
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
```

### 12. Continually Refactor Code

Over time as websites grow and evolve, the codebase also grows, which may lead to some unwanted and complexity in the code. Instead of waiting until we are finished, it is good to take breaks and refactor our code multiple times as we work. This will help us to save time in the end identifying the errors especially when our document is too lengthy.

With so many elements, attributes, values, and many more there is always a lot to learn. These are the few best practices that we must keep in mind in our next project which will make a HUGE difference between clean and messy codes.

We should always start our next project with a motto:

> "This would be the best code I have ever written in any project so far".

Writing semantically correct and clean HTML


## 1. ls

This command is used to view the list of files and directories in a particular directory.

#### Usage

`ls` - Display all the files and directories inside the current path.
`ls <path>` - Display the files and directories inside the specified path.  

`ls -1` - Display all files and directories, with each entry in a separate line.

## 2. touch

This command is used to create an empty file(s).

#### Usage

`touch file1.txt` - Create a new file named file1.txt.

`touch file1.txt file2.txt file3.txt` - Create three files named file1.txt, file2.txt and file3.txt.

## 3. mkdir

This command is used to create a new directory.

#### Usage

`mkdir newfolder` - Create a new directory named newfolder.

`mkdir newfoler2 newfolder3` - Create two directories named newfolder2 and newfolder3.

`mkdir newfolder4/newfolder5` - Create a directory called newfolder5 inside the newfolder4 directory. If the parent directory in a path doesn't exist (for example, newfolder4 here), then the terminal will throw an error. In order to create parent directories too while executing mkdir, we need to use the `-p` flag like `mkdir -p newfolder4/newfolder5`

## 4. pwd

This command prints the path of your current working directory, starting from the root directory.

#### Usage

`pwd` - Print the current working directory path.

## 5. cd

This command is used to navigate the file system by switching the current working directory.

#### Usage

`cd folder2` - Switch your working directory to a folder called folder2, present inside your current working directory. You can verify the path of your new working directory by using the `pwd` command.

`cd ..` - Switch your working directory to the parent directory of the current working directory.

`cd` - Switch your working directory to the root (or home) directory.

## 6. rmdir

This command is used to delete empty directories. 

#### Usage

`rmdir newfolder` - Delete a directory called newfolder. Note that this command can only delete empty directories. If you wish to delete a non-empty directory, use the `-rf` flag like `rmdir -rf newfolder`

## 7. exit

This command is used to exit the terminal window (or tab).

#### Usage

`exit` - This will close the current terminal window (or tab).

## 8. history

This command is used to get a history of the previously run commands

#### Usage

`history` -  This will give a list of all the previous commands run on the machine.

Additionally, for quickly cycling through recent commands, you can press the UP or DOWN arrow keys as well.

## 9. clear

This command is used to clear your terminal screen of previous commands run and their outputs. Note that this only clears the screen and does not delete the command history.

#### Usage

`clear` - Clear the terminal screen.

## 10. less

This command is used to peek at the contents of a file in the terminal without opening it.

#### Usage

`less <file-name>` - Show the contents of the file. You can press the space bar key to proceed to next section of the contents.


Basic Unix commands that you should know


Positioning in CSS defines where an HTML element will be placed within a HTML page and how each HTML element affects the position of elements around it. Positioning is achieved via many methods, including the normal document flow, floats, and several types of positioned elements.

## Types of Positioning

The CSS `position` property has 5 values.

- `static`
- `relative`
- `absolute`
- `fixed`
- `sticky`

### 1. **static**

This is the default value. Any element that is positioned static, is in its normal document flow. A statically positioned element will ignore any values for the properties, top, right, bottom, and left as well as any z-index declarations.

```
  position: static;
```

### 2. **relative**

The position of the element depends on the flow of the document. However, relatively positioned elements will accept any values for the properties, top, right, bottom, and left as well as any z-index declarations.

```html
<div class="box"><h2>Static</h2></div>
<div class="box" id="position"><h2>relative</h2></div>
<div class="box"><h2>Static</h2></div>
```

```css
.box {
  display: inline-block;
  background: #d93025;
}

h2 {
  padding: 40px;
}

#position {
  position: relative;
  top: 30px;
  left: 30px;
  background: #63bc00;
}
```

![relative positioning](/_nextassets/blog/understanding-positioning-in-css/relative.png)

Here, the box will move 30 pixels from left and 30px from top from its original position.

### 3. **absolute**

Absolutely positioned elements are removed from the normal document flow and lose their original position. The element next to it takes the position of that element. As far as the elements around them are concerned, the absolutely positioned element doesn’t exist. To position an element absolutely, we need to make the parent element of that particular element positioned relatively or it will be positioned with reference to window viewport.

```html
<div class="box"><h2>Static</h2></div>
<div class="box"><h2>Static</h2></div>
<div class="box"><h2>Static</h2></div>
<div class="box" id="position"><h2>absolute</h2></div>
```

```css
.box {
  display: inline-block;
  background: #d93025;
  text-align: center;
  margin: 20px;
}

h2 {
  padding: 40px;
}

#position {
  position: absolute;
  top: 50px;
  left: 50px;
  background: #63bc00;
}
```

![absolute positioning](/_nextassets/blog/understanding-positioning-in-css/absolute.png)

### 4. **fixed**

Similar to `absolute` positioning, fixed positioned elements are removed from the normal document flow. Unlike the absolutely positioned element, a fixed positioned element always works with reference to the window viewport and does not move along with the content as we scroll the page.

```html
<div class="container">
  <p>
    Lorem, ipsum dolor sit amet ....
  </p>
  <div id="one"><h2>fixed</h2></div>
</div>
```

```css
.container {
  border: 1px solid #000;
  width: 500px;
  height: 200px;
  overflow: scroll;
  padding-left: 80px;
}

h2 {
  padding: 20px 30px;
}

#one {
  position: fixed;
  top: 40px;
  left: 30px;
  background: #63bc00;
}
```

![fixed positioning](/_nextassets/blog/understanding-positioning-in-css/fixed.png)

### 5. **sticky**

Sticky is similar to relative positioning, but it doesn’t remove an element from the normal document flow. Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

```html
<div class="container">
  <p>
    Lorem ipsum dolor sit amet....
  </p>
  <div class="box">
    I will stick to the screen when you reach my scroll position
  </div>
  <p>
    Lorem ipsum dolor sit amet....
  </p>
</div>
```

```css
.box {
  position: sticky;
  top: 0;
  padding: 20px;
  background: #85e617;
}

.container {
  width: 500px;
  height: 200px;
  overflow: scroll;
  padding: 0px 40px;
}
```

![sticky positioning](/_nextassets/blog/understanding-positioning-in-css/sticky.png)


Understanding positioning in CSS


MongoDB is a cross-platform open-source NoSQL database. Compared to other SQL based databases which store data in tables and columns, MongoDB stores data in collections and documents. This provides a high level of flexibility and performance with automatic scaling.

## Organization

1. Data is stored in the form of collections, which in turn contain documents.
2. A document is in JSON format, with data being stored in key value pairs.
3. Documents do not require schemas and can be edited as you go.
4. This data model allows us to represent heirarchial relationships in the data, similiar to how objects and classes are defined in front-end programming languages.

## CRUD

In this article, we shall be looking at some basic CRUD operations in MongoDB. We will be using **mongo**, a Javascript shell interface to run queries directly on the database. We assume you have installed mongo on your local system and know how to start the mongo shell (if not, you can visit [here](https://docs.mongodb.com/manual/mongo/)).

### Setup

`show dbs` - This command will list all the databases available to the user

`use <db-name>` - This command will switch the shell to use a particular database.

`db.createCollection(<collection-name>)` - This command is used to create a collection in the current database with the given name.

### Create

Create operations in MongoDB deal with adding documents to a collection. If the collection you are adding a document to doesn't exist, the collection will automatically be created before adding the document.

Let's say we have a collection called `cars` to which we wish to insert a document. To do so, we use the `db.collection.insert` command. You would need to pass the document object in JSON format as an argument.

```js
db.cars.insert({
  name: 'Mercedes',
  color: 'black'
});
```

Similarly, if you wish to insert multiple documents at once, use the `db.collection.insertMany` command. You would need to pass an array of documents as the argument.

```js
db.cars.insertMany([
  {
    name: 'Volkswagen',
    color: 'blue'
  },
  {
    name: 'Audi',
    color: 'white'
  }
]);
```

### Read

Read operations fetch documents from a collection and display it in the shell. The command for reading documents in MongoDB is `db.collection.find()`. This command takes in 2 optional parameters. The first one is the query and the second one is the projection. If we don't specifiy any parameters, then all the documents in a collection are fetched and displayed.

Let us try to fetch all documents from the car collection. We are using `pretty` method to print the results in an easy to read format.

```js
db.cars.find().pretty();
```

Output:

```json
{
	"_id" : ObjectId("5ed24643b5ac80aed3bc84cd"),
	"name" : "Mercedes",
	"color" : "black"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84ce"),
	"name" : "Volkswagen",
	"color" : "blue"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84cf"),
	"name" : "Audi",
	"color" : "white"
}
```

You must have noticed that apart from _name_ and _color_, the documents also have an _\_id_ key. This is an autogenerated key by MongoDB and acts as the primary key for that document. The value of the _\_id_ key is guaranteed to be unique for a document within a collection.

What if we wish to fetch only those documents where the color is black? We then make use of the first optional parameter, called the query. The query is an object which contains key-value pairs, with or without the use of certain query operators, that filter the data received. In our case, we wish to receive only documents with their _color_ value set to blue. Hence, the command will be:

```js
db.cars.find({ color: 'blue' }).pretty();
```

Output:

```json
{
  "_id": ObjectId("5ed2465cb5ac80aed3bc84ce"),
  "name": "Volkswagen",
  "color": "blue"
}
```

The second parameter in the `find` command is called the projection. This is another object that indicates which fields to return for a particular document. For example, let's say we want the above data, but without the _\_id_ field. We then pass in a projection object, mentioning that _\_id_ has to be ommitted.

```js
db.cars.find({ color: 'blue' }, { _id: 0 });
```

Output:

```json
{ "name": "Volkswagen", "color": "blue" }
```

For more information on how query and projection work, you can refer the [official documentation](https://docs.mongodb.com/manual/reference/method/db.collection.find/).

`db.collection.find` returns all documents that match the query. If you wish to specifically fetch only one (or the first) document that matches the query, you can use `db.collection.findOne`.

### Update

Update operation are used to update either a single document, or a set of documents. The basic command for updating documents in MongoDB is `db.collection.update`. This command has 2 mandatory parameters. The first parameter is a filter object which specifies the documents to update. The second parameter is the update object, which specifies what data needs to be updated in the filtered documents.

Let us try to update the color of the Volkswagen from blue to grey. The command for the same will be

```js
db.cars.update({ name: 'Volkswagen' }, { $set: { color: 'grey' } });
```

Output:

```json
WriteResult({ "nMatched": 1, "nUpserted": 0, "nModified": 1 })
```

In the filter object, we specify that we want to update only documents with the value of _name_ as Volkswagen. In the update object, we add a `$set` object in which we specify that we wish to set the _color_ value of such documents to grey. `$set` is one of many field update operators in MongoDB which is used to specify the particular fields that need to be updated. If the `$set` operator wasn't provided, then the entire document would have been replaced with data in the update object. In the above output, we can see that 1 document had been matched with the filter criteria and 1 document had been successfully updated as well. Let us see the updated document:

```js
db.cars.find().pretty();
```

Output

```json
{
	"_id" : ObjectId("5ed24643b5ac80aed3bc84cd"),
	"name" : "Mercedes",
	"color" : "black"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84ce"),
	"name": "Volkswagen",
	"color" : "grey"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84cf"),
	"name" : "Audi",
	"color" : "white"
}
```

Let us see now try to update the color to silver, but without the `$set` operator.

```js
db.cars.update({ name: 'Volkswagen' }, { color: 'silver' });
```

Output:

```js
WriteResult({ nMatched: 1, nUpserted: 0, nModified: 1 });
```

```js
db.cars.find().pretty();
```

Output

```json
{
	"_id" : ObjectId("5ed24643b5ac80aed3bc84cd"),
	"name" : "Mercedes",
	"color" : "black"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84ce"),
	"color" : "silver"
}
{
	"_id" : ObjectId("5ed2465cb5ac80aed3bc84cf"),
	"name" : "Audi",
	"color" : "white"
}
```

We see that the color was changed but the _name_ key no longer exists. This is because, in the absence of the `$set` operatory, the entire document (with the exception of the _\_id_ key) was replaced with the contents of the update object. Hence, one needs to be careful to use the correct syntax while executing a MongoDB update command, in order to prevent an accidental replace instead of update.

MongoDB also provides in-built support for what is commonly called as an **upsert**. An upsert operation is a special type of operation wherein a document is matched and updated. If that document to be updated doesn't exist in the first place, then a new document is created and inserted with the given values. We can specify an update operation in MongoDB to be an upsert by passing in an optional argument in the form of an upsert object.

Let us see an example of how we update all documents with the name as Lamborghini to be of color yellow. The usual command would be:

```js
db.cars.update({ name: 'Lamborghini' }, { $set: { color: 'yellow' } });
```

Output:

```json
WriteResult({ "nMatched": 0, "nUpserted": 0, "nModified": 0 })
```

We see that we both filtered zero documents as well as modified zero documents. Let us try the same command but with the upsert argument.

```js
db.cars.update(
  { name: 'Lamborghini' },
  { $set: { color: 'yellow' } },
  { upsert: true }
);
```

Output:

```json
WriteResult({
  "nMatched": 0,
  "nUpserted": 1,
  "nModified": 0,
  "_id": ObjectId("5eda7a81079c90101a83d2fc")
})
```

We can see that although we filtered zero documents, we have 'upserted' 1 document with the document ID being returned as well. Let us try to look for the document with that ID.

```js
db.cars.find({ _id: ObjectId('5eda7a81079c90101a83d2fc') });
```

Output:

```json
{
  "_id": ObjectId("5eda7a81079c90101a83d2fc"),
  "name": "Lamborghini",
  "color": "yellow"
}
```

Just like in read, you can also specify that you wish to update only one (or the first) document that matches the filter object using `the db.collection.updateOne` command.

### Delete

Delete operation are used to delete either a single document, or a set of documents. There are two commands in MongoDB for the same, `db.collection.deleteOne` for deleting a single document and `db.collection.deleteMany()` for deleting multiple documents. Both commands have 1 mandatory paramter, the filter object, which specifies the document(s) that need to be deleted.

Let us try to delete the Mercedes document. The command for the same will be:

```js
db.cars.deleteOne({ name: 'Mercedes' });
```

Output:

```json
{ "acknowledged": true, "deletedCount": 1 }
```

You can see that the output returns _acknowledged_ as true, which indicates a success operation, as well as the number of documents that have been deleted, which in this case is 1.

If you would like to delete all documents in a collection, simply pass an empty filter object to the `deleteMany` command like this:

```js
db.cars.deleteMany({});
```


How to do CRUD operations in MongoDB


## Change the last commit message

Often, we make typos while typing commit messages - or the message is unclear or incorrect. We need to correct them.

If the commit is on your local system and not pushed to Github or Gitlab, etc:

```bash
git commit --amend -m [your message]
```

If the commit has been pushed to Github:

- You need to change the local message, and
- Force push the commit.

```bash
git commit --amend -m [your message]
git push --force-with-lease <repository> <branch>
```

## Do more with git log

When you type `git log` to see the commit history, the standard output is not very friendly. It contains lots of information. You can customize the information using the flags below:

- `--oneline` displays one commit per line with message.
- `--stat` displays the modified files, number of lines added and removed, etc - in each commit.
- `--graph` enables you to view log as a graph.

```bash
git log --oneline
git log --stat
git log --graph
```

> TIPS: When you use these commands, the terminal opens the `vim` editor. To close it, just press **`q`** after `:`.

## Pull without making commit

Sometimes we want to pull from any branch and keep the local edits. To do this, we will use `stash` to hide your changes, then we'll use `pull` to pull the data; and then finally, we'll use `stash pop` to bring those changes back.

```bash
git stash
git pull
git stash pop
```

## Move the commit from one branch to another

This is for when you made a commit on the `master` branch. But, now you want to move those changes to a new branch named `develop`. To do this:

- Move to `develop` branch using `checkout`. Use `-b` flag to create new branch
- Use `git log --oneline` to show all the commits and get the hash of the commit you want to move.
- Use `git cherry-pick [hash]` to get the changes.

Replace the `[hash]` with the hashid

```bash
git checkout develop
git log --oneline
git cherry-pick [hash]
```


4 common situations while using Git and how to solve them


## Adding items

### 1. push()

This method is used to add one or more elements to the end of an array. This method changes the original array and returns the new length of the array.

```js
let array = [2, 5, 7];
let result = array.push(8);
console.log(result); // prints 4
console.log(array); // prints [2, 5, 7, 8]

// To add multiple elements
array.push(10, 12, 14);
console.log(array); // prints [2, 5, 7, 8, 10, 12, 14]
```

### 2. concat()

This method allows you to take an array and combine it with another array or elements. It doesn't change the original array. Instead, it returns a new array.

```js
let array = [2, 5, 7];
let result = array.concat(8);
console.log(result); // prints [2, 5, 7, 8]

let addMultiple = array.concat(9, 10);
console.log(addMultiple); // prints [2, 5, 7, 9, 10]

let combine = array.concat(result);
console.log(combine); // prints [2, 5, 7, 2, 5, 7, 8]

console.log(array); // prints [2, 5, 7]
```

### 3. unshift()

This method adds an item at the beginning of an array. Like `push()`, this changes the original array and returns the new length of the array.

```js
let array = [2, 5, 7];
let result = array.unshift(8);
console.log(result); // prints 4
console.log(array); // prints [8, 2, 5, 7]
```

### Removing items

### 4. pop()

This methods removes the last element of an array and returns that element. This method changes the original array.

```js
let array = [2, 5, 7];
let result = array.pop();
console.log(result); // prints 7
console.log(array); // prints [2, 5]
```

### 5. shift()

This methods removes the first element of the array and returns that element. This method changes the original array.

```js
let array = [2, 5, 7];
let result = array.pop();
console.log(result); // prints 2
console.log(array); // prints [5, 7]
```

### 6. slice()

This method allows you to create a 'slice' of an array and return it as a new array. The syntax for it is: `array.slice(*start*, *end*);`

This method returns a copy of this array with elements from the _start_ position upto the _end_ position (i.e. excluding the element at _end_ ). If you only pass in 1 argument, then it returns a new array from that position till the end of the original array. Note that `slice()` does not changes the original array and instead returns a new array.

```js
let array = ['a', 'l', 't', 'c', 'a', 'm', 'p', 'u', 's'];
let result = array.slice(3, 7);
console.log(result); // prints ['c', 'a', 'm', 'p']
```

This method support negative arguments too and hence something like this would work as well

```js
let array = ['a', 'l', 't', 'c', 'a', 'm', 'p', 'u', 's'];
let result = array.slice(-6, -2);
console.log(result); // prints ['c', 'a', 'm', 'p']
result = array.slice(-6);
console.log(result); // prints ['c', 'a', 'm', 'p', 'u', 's']
```

Another interesting thing to note is that calling this method without any arguments returns a full copy of the array. This is often used when you want to quickly create a deep copy of an array.

### 7. splice()

This method allows you to both add as well as remove elements from an array. The syntax for the method is: `array.splice(*index*, *removeCount*, *addElem1*, ... *addElemN*);`

The _index_ argument specifies the position from which to start removing elements. The _removeCount_ argument is a number that specifies the number of elements to remove. The remaining arguments in the method are the indvidual elements you wish to add to the array after the removal (if any)). Let us see this in action to understand it better

```js
let array = ['A', 'B', 'C', 'D'];
array.splice(1, 2); // this removes 1 element, starting from position 1
console.log(array); // prints ['A', 'D']
```

Note that `splice()`, unlike `slice()`, changes the original array. This also allows us to quickly replace items in an array as shown below

```js
let array = ['I', 'love', 'coding'];
array.splice(1, 1, 'really', 'like'); // this removes 1 element, starting from position 1, and then adds 'really' and 'like' at the same position
console.log(array); // prints ['I', 'really', 'like', 'coding']
```

## Iteration

### 8. forEach()

We can iterate over an array using a generic `for..of` loop. However, arrays come with their own method to iterate over their elements once and perform any actions, called `forEach`. The syntax is:

```js
array.forEach(function(element, index, array){

});
```

The method accepts a callback function that accepts 3 arguments. The first argument is the current element being processed. The next 2 arguments are optional, which are the position of the element in the array and the array itself.

```js
let array = [2, 5, 7];
array.forEach(function(element, index, array){
	console.log(element);
});
// prints
// 2
// 5
// 7
```

## Searching

### 9. indexOf()

This method looks for the occurence of an item in an array, from the beginning of the array till the end (i.e. from left to right). If the item is found, it's position is returned else `-1` will be returned. The syntax is: `array.indexOf(*element*, *start*);`

The _start_ argument is an optional argument that specfies the position to start searching from, left to right, till the end of the array.

```js
let array = [1, '2', '1'];
console.log(array.indexOf(1)); // prints 0
console.log(array.indexOf(2)); // prints -1
console.log(array.indexOf(1, 1)); // prints -1
```

Similiarly, `array.lastIndexOf()` searches for an element, but from the end of the array to the beginning (i.e. from right to left). `array.includes()` checks if an element exists in the array and returns a boolean.

```js
let array = [1, 2, 1];
console.log(array.indexOf(1)); // prints 0
console.log(array.lastIndexOf(1)); // prints 2
console.log(array.includes(2)); // prints true
```

### 10. find()

What if we wish to find an item in an array but we don't know the exact value of the item yet and only know the conditions that it fulfills? The `array.find()` method helps you do exactly that. Say that we have an array of objects:

```js
let array = [
	{ id: 1, name: 'Mike' },
	{ id: 2, name: 'John' },
	{ id: 3, name: 'Rob' }
]
```

We wish to find the object whose id is 2. We then use the `find()` method as follows:

```js
let item = array.find(function(element, index, array) {
	if (element.id === 2) return true;
})
console.log(item); // prints {id: 2, name: "John"}
```

`find()` iterates over the array and applies a callback function on each element. The callback function takes 3 arguments. The first argument is the element currently being matched against. The next 2 arguments are optional, which are the position of the element in the array and the array itself. When `true` is returned in a callback (which you do when the search criteria is satisfied), then the iteration is stopped and the element is returned. If no elements match the criteria, then `undefined` is returned.

`array.findIndex()` works in the same way as `array.find()`, with the difference being that the index of the matched element is returned in case of success, and -1 in case of no match.

### 11. filter()

The `find` method returns only the first element that matches the given criteria. But what if we wish to get all elements that satisfy a given criteria? That's where the `filter()` method is used. Althoug its syntax is very similiar to `find()`, the difference lies in the fact that `filter()` returns an array of all elements that match the given criteria. Let's say we have an array of objects such as:

```js
let array = [
	{ name: 'Mercedes', color: 'black' },
	{ name: 'Lamborghini', color: 'yellow' },
	{ name: 'BMW', color: 'black' },
	{ name: 'Audi', color: 'white' }
]
```

We wish to get an array of all elements with color as 'black'.

```js
let result = array.filter(function(element, index, array) {
	return element.color === 'black';
});
console.log(result); // prints [{name: 'Mercedes', color: 'black'}, {name: 'BMW', color: 'black'}]
```

Note that `filter()` does not changes the original array and returns a new array with the filtered elements instead.


Basic array methods in JavaScript


In my previous [article](https://altcampus.io/blog/writing-semantically-correct-and-clean-html), I have listed a few best practices that will keep our HTML code clean and impressive.

Similar to HTML, in order to write solid CSS and avoid mistakes, here again, I am listing a few best CSS practices.

### 1. Write CSS using multiple lines and spaces(make it readable)

The readability of your code is really important. Better readability makes code easier to read and edit in the future.

**Bad:**

```css
a,
.btn {
  background: #aaa;
  color: #f60;
  font-size: 18px;
  padding: 6px;
}
```

**Good:**

```css
a,
.btn {
  background: #aaa;
  color: #f60;
  font-size: 18px;
  padding: 6px;
}
```

### 2. Organize code with comments

Over time the CSS file can become quite extensive, spanning hundreds of lines. And if it is a multi-page website it may go more than that, maybe thousands of lines. So it is easy to get lost and becomes hard to manage a large file, edit them when necessary. Therefore let's organize our code in a logical group and then provide a comment before each group, saying the following styles belong to which group.

**Bad:**

```css
header {
  ...;
}
article {
  ...;
}
.btn {
  ...;
}
```

**Good:**

```css
/* Primary Navigation */
.navbar {
  ...;
}

/* Featured article */
article {
  ...;
}

/* Buttons */
.btn {
  ...;
}
```

### 3. Chose proper class names

Use modular class names (or values) according to the content within an element, not according to the appearance of an element. Also, use lowercase for the class names (or values), to keep consistent.

**Bad:**

```css
.Red-Box {
  ...;
}
```

**Good:**

```css
.alert-message {
  ...;
}
```

### 4. Build proficient selectors

It is easy to get carried away with CSS selectors if they are not carefully maintained. They can easily become long and too specific.

Keep the selectors as short as possible, in order to keep the low specificity. The higher specificity may cause undesirable issues. Nest them not more than two or three levels.

Also, avoid the ID selectors, as it can quickly raise the specificity level of selectors.

**Bad:**

```css
#aside #featured ul.news li a {
  ...;
}
#aside #featured ul.news li a em.special {
  ...;
}
```

**Good:**

```css
.news a {
  ...;
}
.news .special {
  ...;
}
```

### 5. Use classes when necessary

There are times when selectors become longer. Especially beginners mostly use type selector and keep on nesting, which leads to a longer selector, and does not make sense. So instead, using a class selector alone is better.

**Bad:**

```css
section aside h1 em {
  ...;
}
```

**Good:**

```css
.text-offset {
  ...;
}
```

### 6. Use shorthand properties and values

Using shorthand properties and values allows us to quickly set and identify the styles. It also keeps our code clean.

**Bad:**

```css
img {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}
button {
  padding: 0 0 0 20px;
}
```

**Good:**

```css
img {
  margin: 5px 10px;
}
button {
  padding-left: 20px;
}
```

### 7. Use shorthand hexadecimal color values

When available use three-character hexadecimal color values and always keep the characters in lowercase. The idea is to be consistent and prevent confusion.

**Bad:**

```css
.module {
  background: #dddddd;
  color: #ff6600;
}
```

**Good:**

```css
.module {
  background: #ddd;
  color: #f60;
}
```

### 8. Drop units from zero values

Adding a unit to zero value is unnecessary and provides no additional value.

**Bad:**

```css
div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}
```

**Good:**

```css
div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}
```

### 9. Group and align vendor prefixes

Within CSS codes the vendor prefixes can make our cluttered and unreadable. They must be kept organized in order to make the styles easier to read and to edit.

**Bad:**

```css
div {
  background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
  background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
  background: linear-gradient(#a1d3b0, #f6f1d3);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```

**Good:**

```css
div {
  background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
  background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
  background: linear-gradient(#a1d3b0, #f6f1d3);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```

### 10. Modularize styles for reuse

This is one of the important parts. Use modular classes, in order to avoid repetition. Do not style the page keeping just one element in mind at a time. Look at the layout or page carefully, choosing a modular class, and then assign the styles, so that it should be available to share across elements as necessary.

**Bad:**

```css
.news {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.events {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
```

**Good:**

```css
.feat-box {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
```

### 11. Use developer tools

Often, we forget to use the browser's developer tools, which is the best practice to figure out the problems. Use developer tools to inspect the elements and find out what is rendering and what's not. Keep, using developer tools, in your habit, that will save a lot of time in order to solve the problem.

### 12. Learn to search

Searching can be a skill in itself. First of all never hesitate to search for anything, if you are stuck somewhere, also if it is necessary. But in that case, you must know what to search in order to get the best search results. Therefore develop this skill for the long run.

### 13. Continually refactor code

Again, it is good to take breaks and refactor our code as we work. This will help us to save time, in the end, identifying the errors especially when our document is too lengthy.


Top Quiz

Git Commands Level 1

How well do you know HTML elements? Beginner Level

How well do you know JavaScript object?