
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


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


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.


CSS2 Articles

Understanding positioning in CSS

Writing clean and organized CSS