DEV Community: César

HTML Text Formatting

César — Sat, 24 Apr 2021 11:30:11 +0000

Text Formatting sub-guide

Text Formatting
Bold
Italics
Underline
Strikethrough
Highlighting Texts
Small Texts
Subscript Texts
Superscript Texts
Program Output
Keyboard Keys
Variables

This article targets beginners in web development. It is part of my previous post on html-guide. This can also be a refresher for advanced developers.

You can find the code and guide on my GitHub html-guide-github & for this article's code and guide on html-text-formatting. Enjoy!

Using appropriate HTML tags comes with a lot of advantages. You can't skip these benefits because they are indispensable to you as a web developer and to others like visually impaired people.

How does it relate to you?

Being a professional web developer requires being adept at what you are doing. It requires keeping your work at the most professional level you can. Professionalism does matter in this case. It is what companies seek in the first place. Trust me! It is what gets you hired, too.

How is it important to visually impaired people?

Using appropriate semantic tags will help blind people listen to web pages. How does that happen? A software called screen reader does that job. It reads your HTML structural semantics out loud to them and allows them to become aware of what is happening at that moment. It guides them, so you need to be careful how to employ HTML semantics. Misplacing them can sometimes lead to grave consequences.

1. Text Formatting

It is not uncommon to think about text formatting tags or exclusively semantic tags as a mere text presentation. Whilst this thought isn't correct, we should keep in mind how important it is to use appropriate HTML tags at the right time and in the right place to render web pages informative, hence, semantically relevant. We often use CSS to achieve great presentations of web pages.

2. Bold

We use <b> tags to make texts bold. This tag stands for bold. It targets how the text should look.

<p>This paragraph has a bold <b>word</b> in it.</p>

We use <strong> tags to make texts bold. It targets how important the text is so you have to emphasise its importance.

<p>
  This paragraph has a bold <strong>word</strong> in it because it is very
  important.
</p>

The distinction between <b> and <strong> is the level of importance each one contains. Semantically speaking, you should use the <strong> tag if you tend to add important text. But, if it's a matter of semi-styling, which infers it's only about making the text bold, then we use the <b> tag.

Note that experts recommend using <strong> over <b>. It does matter for visually impaired people. Keep that in mind!

3. Italics

We use <i> tags to make texts italic. This tag stands for italics.

<p>This paragraph has an italicized <i>word</i>.</p>

We can use <dfn> tags to make texts italics. It stands for definition element. As the name suggests, it defines an element.

<p>
  This paragraph has a <dfn>definition element</dfn> in it because it is
  defining a term.
</p>

<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>

The distinction between <i> and <dfn>is what kind of representation you are trying to associate with each one of them. We use <dfn> when you want to define a term whilst using <i> only makes a text italic in the strict sense of the word. Both <dfn> and <i> make text italic though.

We can use <em> to make texts italic, too. This tag stands for emphasise. You should use this tag if and only if you want to emphasise something.

<p>This paragraph has a <em>word</em> in italics.</p>

Note that experts recommend using <em> over <i>. It does matter for visually impaired people. Keep that in mind, too!

4. Underline

We use <u> tags to underline a text. The <u> tag stands for underline.

<p>This paragraph has an underlined <u>word</u> in it.</p>

We use <ins> tags to underline a specific text. This tag stands for insert. We use this tag only when it comes to inserting a new piece of information that did not exist before.

<p>This paragraph has an underlined <ins>word</ins> in it.</p>

5. Strikethrough

We use <s> tags to ~~strike a text through~~. This tag stands for strikethrough.

<p>This paragraph has a crossed <s>word</s> in it.</p>

We use <del> tags to ~~strike a text through~~, too. This tag stands for delete.

<p>This paragraph has a crossed and deleted <del>content</del> in it.</p>

The distinction between both of them, we use <s> tags when we want to showcase that a piece of information that might be unnecessary. It doesn't mean it has been deleted permanently. However, using <del> tags implies that this piece of information has been literally deleted.

6. Highlighting Texts

We use <mark> tags to highlight a text. This tag highlights the text as it uses the yellow colour.

<p>This paragraph has a highlighted <mark>word</mark> in it.</p>

7. Small Texts

We use <small> tags to make a text smaller than its usual size.

<p>This paragraph has a small <small>word</small> in it.</p>

8. Subscript Texts

We use <sub> tags to make a text lower and smaller than the main text. This tag stands for subscript.

<p>We all know about CO<sub>2</sub>.</p>

9. Superscript Texts

We use <sup> tags to make a text higher and smaller than the main text. This tag stands for superscript.

<p>What about 2<sup>3</sup>?</p>

10. Program Output

We use <samp> tags to declare that the text is an output from a computer program. It stands for sample. The first you will notice is the font of the text enclosed between this tag changes into monotype.

<p><samp>Please enter a number</samp></p>

11. Keyboard Keys

We use <kbd> tags to enclose keys that belong to a keyboard.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy a text</p>

12. Variables

We use <var> tags to enclose mathematical variables.

<p>look at this equation <var>x</var> = <var>y</var> * 30</p>

Thank you for your attention. There is more to it. That is why updating regularly would be necessary.

For more, follow me on Instagram @cesarcode.init

HTML Crash Course

César — Tue, 13 Apr 2021 21:38:00 +0000

HTML sub-guide

HTML
HTML Skeleton
Headings
Paragraphs
Anchors
Media
Lists
Attributes
Links
Meta
Semantics
Non-semantics
Styles
Tables
iframes
Forms
Buttons
Select
Datalist
Template
SVGs
Comments

This crash course targets beginners in web development. It helps and guides those who want to have a thorough understanding of HTML tags. It can also be a refresher for advanced developers.

You can find the code and guide on my GitHub html-guide. Here is the second part of this article which tackles HTML Text Formatting. Enjoy!

1. HTML

So What's HTML?
HTML is a Hypertext Markup Language. It is not ~~a programming language~~; it's just a way of structuring the content and rendering it on a webpage. To use this markup language, you will have to employ HTML opening tags <> and closing tags </>.
So what do you have to learn in HTML? You need to understand the basics.

Note that when you create a new file you have to save it with an .html extension. For instance, the homepage is conventionally named index.html.

2. HTML Skeleton

HTML skeleton triggers the environment where you are going to work. Before starting any projects, you will have to include the following HTML skeleton:

<!-- `DOCTYPE html` refers to the declaration of the HTML version you are using which is basically HTML5. -->

<!DOCTYPE html>
<html>
  <head>
    <!-- We use <meta> tags to add data that characterises a webpage. -->

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- <title> tag allows you to add the website's name. -->
    <title>Webpage</title>

    <!-- <link> tag lets you add stylesheets where you can add styles to the webpage. -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- Inside the <body> tag, we add all that has to do with the webpage content. -->
  </body>
</html>

3. Headings

Headings are titles that go from <h1>, the biggest, to <h2>, the smallest.

<h1>I am a title</h1>
<h2>I am a title</h2>
<h3>I am a title</h3>
<h4>I am a title</h4>
<h5>I am a title</h5>
<h6>I am a title</h6>

4. Paragraphs

We use <p> tags to declare paragraphs.

<p>I am a paragraph.</p>

5. Anchors

We use <a> tags to create hyperlinks that take the user to another page other than the current one or navigate in the same page.

<a href="http://www.google.com">Visit Google</a>

6. Media

6.1. Images

We use <img> tags to add images. Note that these tags are self-closing tags which means they don't require a closing tag; it closes itself.

<img src="apple.jpg" alt="apple" />

src and alt attributes are required. src contains the image path. alt contains a brief phrase about that image so in case the internet breaks down somehow, the user will still know what the image is.

6.2. Videos

We use <video> tags to insert videos.

<video controls>
  <source src="olaf.mp4" type="video/mp4" />
</video>

<!-- video tags can have multiple attributes to give the videos some functionalities like:

        1. 'controls' to make the video controllable by the user.
        2. 'muted' to make the video in silent mode.
        3. 'autoplay' as the attribute suggests to make the video play when a webpage first loads
        4. 'poster='thumbnail.jpg' to place a poster before the video kicks off.
-->

6.3. Audios

We use <audio> tags to insert audios.

<audio controls>
  <source src="olaf.mp3" type="audio/mpeg" />
</audio>

<!-- audio tags can have multiple attributes to give the audios some functionalities like:

        1. 'controls' to make the audio controllable by the user.
        2. 'muted' to make the audio in silent mode.
        3. 'autoplay' as the attribute suggests to make the audio play when a webpage first loads.
-->

7. Lists

7.1. Ordered Lists

Ordered lists are number-based lists. They go in chronological order.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

7.2. Unordered Lists

Unordered lists are bullet point based. They are not organised in chronological order.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

7.3. Definition Lists

Definition lists are description based lists. They contain descriptions and terms attached to them.

<dl>
  <dt>Item 1</dt>
  <dd>Item 1 is an amazing product which you can buy</dd>
  <dt>Item 2</dt>
  <dd>Item 2 is a fantastic product</dd>
</dl>

8. Attributes

8.1. Ids

We use an id attribute when an element has a unique style that's not common.

<p id="unique">
<!-- Note that you can give any other name. It doesn't have to be 'unique', it can be a name of your choice such as 'text', 'danger' etc. -->

  I have an id attribute. You can only select me because I'm unique.
</p>

8.2. Classes

We use a class attribute when some elements share common styles. We can also reference single elements.

<p class="red-text">
  I have a class. That doesn't make me special. Other tags and I have a common class because we share common styles.
</p>

<p class="red-text">
  I'm another tag that shares the same style as my neighbour tag
</p>

8.3. Hyper-reference

We use <a> tags to create a hyperlink. To make it work, we need to insert the link inside the attribute href, which stands for hyper-reference.

<a href="http://www.domain.com"
  >I have got a hyper-reference (href) on me so you can go to that link</a
>

8.4. Source (src)

We use the src attribute to add the image path.

<img src="cat.png" />

8.5. Alternative (alt)

alt plays the role of an alternative for images not being displayed due to connection problems. It shows up the phrase you include inside the alt attribute.

<img src="cat.png" alt="this is a cat" />

8.6. Style

We use the attribute style to add some styles to the elements.

<p style="color: red;">I'm a paragraph and my color is red</p>

Note that there are three ways of adding styles to a webpage:

Inline style. This is achieved through employing the attribute style inside a tag element.
Style tag. This tag is implemented inside the <head> tag.
Separate stylesheets.

8.7. Title

The title attribute gives a brief description of elements being hovered on. For instance, when a user hovers over a logo, a text shows up displaying 'Home'.

<a href="http://www.youtube.com" title="go to YouTube">YouTube</a>

9. Links

Let's agree on something. This link is not like the hyperlinks enclosed by <a> tags. We add this link tag inside the head as it contains stylesheets.

<link rel="stylesheet" href="style.css" />

10. Meta

<meta> tags contain special data about a webpage.

<meta charset="UTF-8" />

11. Semantics

11.1. Header

<header> tags always come at the top of the webpage inside the

tag. It's like an opening that usually contains a logo, a navigation menu, a search bar etc., depending on the projects.

<header>
  <p>Hello I am a paragraph inside a header.</p>
</header>

11.2. Main

<main> tags appear between the headers and footers. They usually contain the centre or essentials of the webpage such as sections, articles, figures etc.

<main>
  <p>Hello I am a paragraph inside a main.</p>
</main>

11.3. Footer

<footer> tags appear at the end of a webpage. They usually play the role of the ending. They contain contact information, navigation links and copyright statements.

<footer>
  <p>Hello I am a paragraph inside a footer.</p>
</footer>

11.4. Navigation

<nav> tags are shorthand versions of navigation. We use them when we want to add a navigation bar.

<nav>
  <a href="index.html">home</a>
  <a href="about.html">about</a>
  <a href="contact.html">contact</a>
</nav>

11.5. Sections

<section> tags are used to structure our content in a better way. A webpage can have multiple sections; each section tackles a specific area.

<section>
  <p>I'm inside a section</p>
</section>

11.6. Articles

<article> tags are used for self-contained content such as a blog post etc.

<article>
  <p>I'm inside an article tag</p>
</article>

11.7. Asides

<aside> tags are used to display parts of the content and they are often presented as sidebars.

<aside>
  <p>
    I'm inside an aside tag. You will find me on the right or left side of the
    webpage
  </p>
</aside>

11.8. Figures

<figure> tags are handy when we want to insert an image or a document that has a caption under it.

<figure>
  <img src="parrot.jpg" alt="this is a parrot picture" />
  <figcaption>Fig1. - Red Parrot.</figcaption>
</figure>

11.9. Blockquotes

<blockquote> tags are meant to wrap quotes.

<blockquote cite="http://en.wikipedia.org/wiki/Main_Page">
  I'm a quote taken from a wikipedia page.
</blockquote>

12. Non-semantics

12.1. Spans

<span> tags are a quick way to grab the content inside it and give it a unique style with CSS or functionality with JavaScript.

<span>I'm inside a span which makes me an inline element</span>

12.2. Divs

<div> tags are important when we want to control children etc.

<div>I'm inside a div (division) which makes me a block element</div>

13. Styles

<style> tag is a way to add styles to our webpage by selecting the elements from HTML and styling them. We usually place this tag inside the <head> tag.

<style>
  p {
    color: red;
  }
</style>

14. Tables

<table> tags are meant to create tables on a webpage.

<table>
  <tr>
    <th>first name</th>
    <th>last name</th>
  </tr>
  <tr>
    <td>Brad</td>
    <td>Smith</td>
  </tr>
</table>

15. Iframes

<iframe> tags are used to embed another document within the current HTML document.

<iframe src="demo.html" title="this is an Iframe"></iframe>

16. Forms

16.1. Form Tag

<form> tag is meant to declare a form. Forms are important to get data from users. There are various types of forms such as sign-in, sign-up, contact forms etc.

<form action="#" method="POST">
  <!-- Here where form elements have to be -->
</form>

16.2. Form Elements

<form action="#" method="POST">
  <!-- A label tag acts like a title -->
  <label>First name:</label>

  <!-- Inputs -->
  <!-- Inputs act like a field where you can type some data. -->

  <!-- Inputs with a type of text are designed to have text in them. -->
  <input type="text" />

  <!-- Inputs with a type of password are designed to have passwords in them that are hidden. -->
  <input type="password" />

  <!-- Inputs with a type of radio display a radio button which allows you to select one of the multiple choices. -->
  <input type="radio" />

  <!-- Inputs with a type of checkbox display a checkbox button which allows you to select one zero or more than one choice. -->
  <input type="checkbox" />

  <!-- Inputs with a type of submit display a submit button that allows you to submit the form -- it technically comes at the end of the form. -->
  <input type="submit" />

  <!-- Inputs with a type of button display a clickable button that allows you to click. -->
  <input type="button" />
</form>

16.3. Form Attributes

action attribute is designed to take care of the data submitted. It is the endpoint where the data is captured. Once the user fills in the data and presses on submit, you will have to create a server path where the data goes and be dealt with on the server-side.

<form action="#" method="POST">

</form>

method attribute determines the HTTP method you want to apply before the data is sent to the server. These methods are POST, GET, DELETE etc.

17. Buttons

17.1. Button Tag

<button> tags are meant to create clickable buttons.

<button type="button">click me</button>

17.2. Button Input

<input> tags with a type of button are also meant to create a clickable button.

<input type="button" value="click me" />

18. Select

<select> tags are meant to create a dropdown list with options. The user has to choose one of the options.

<select>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
</select>

19. Datalist

<datalist> tags allow you to create a dropdown list with options like <select> tags; however, the difference is that <datalist> tags allow users to add their own options if they are not okay with the recommended ones.

<input list="colors" />
<datalist id="colors">
  <option value="red">
  <option value="blue">
  <option value="black">
</datalist>

Note that the <input> tag is important. It provides the user with a field where they can type their own option.

value attribute adds a value to the options. There is another way to it, excluding the value attribute:

<input list="otherColors" />
<datalist id="otherColors">
  <option>yellow</option>
  <option>brown</option>
  <option>green</option>
</datalist>

20. Template

<template> tags are used to hide data and manipulate it using JavaScript to display it.

<template>
  <p>I'm hidden inside this template till a user click to display me</p>
</template>

21. SVG

<svg> tags are used to create SVGs.

<svg>
  <rect height='100' width='100' style='fill: red;'>
</svg>

22. Comments

<!-- This is a comment in HTML -->
<!-- Comments don't show up on a webpage -->

Thank you for your attention. I hope this course has been as informative as you expected. There is more to it, but covering every bit of HTML would be distracting. I have picked up the most important tags which you will end up using sooner or later.

For more, follow me on Instagram @cesarcode.init

Before coding loads!

César — Fri, 09 Apr 2021 18:40:15 +0000

Coding can be overwhelming. We have all been there in that state of confusion before embarking on the coding journey. Before you start coding, there are a few points you have to keep in mind when it comes to web development or programming in general.

Code editors

Code editors such as Atom, Brackets, and Visual Studio Code will create the coding environment where you can write your code. I recommend Visual Studio Code, which comes with packages and extensions that will make your workflow much faster and easier.

Sources

Avoid jumping from one source to another or from one video to another. I recommend juniors to opt for one source and stick to it until the end.

Documentations

Documentations are super handy. Sticking to documentations will help you get the gist of whatever is going on and not get lost. Documentations such as MDN Documentation and W3Schools can provide you with the best paths and understanding all concepts you need to know. Each scripting or programming language has its own documentation like Python Documentation, PHP Documentation and so on.

YouTube

Not all YouTube channels are informative. Potential creators such as Brad Traversy, Web Dev Simplified, The Net Ninja, Dev Ed, Kevin Powell, and Steve Griffith can provide you with reliable crash courses and content to follow.

Platforms

You do not have to spend money on platforms to have access to. There are great free platforms that could provide you with a reliable source of information such as FreeCodeCamp, which I highly recommend. You can also go with Codecademy which has free access for HTML, CSS and JavaScript basics. But, if you want to go further with other languages, you will have to go pro and pay. I think that Documentations are sufficient.

Frontend & backend

Before starting, you have to understand the difference between a front-end developer, a backend developer, and a full-stack developer and the languages each part uses to achieve their goals.

A frontend developer

Basically, a frontend developer deals with client side which refers to whatever the user sees on the screen and interacts with. A frontend developer will have to acquire HTML, CSS, JavaScript, and later go with React. (S)he has to analyse the performance of a website, for example, and imagine enough to design it.

A backend developer

Basically, a backend developer deals with server side which refers to whatever the user cannot see. Everything occurs in the background. Everything that has to do with functionalities like creating a shopping cart, making dynamic pages, creating app tools etc. A backend developer will have to acquire one of server-side languages such as PHP, Node.js, Python etc and a relational (MySQL, PostgreSQL, IBM) or non-relational (such as MongoDB, Cassandra) database.

A full stack developer

A full-stack developer deals with both frontend and backend sides.

Consistency

Juniors often start taking it lightly. Keep in mind: to become a professional web developer or programmer, you have to learn and practise as much as possible through doing. The keyword here is doing. You have to be consistent and stick to a determined schedule.

Libraries & frameworks

I wish I knew this when I had started my journey. Libraries and frameworks are coded by other developers and software engineers. Most people in the area use both terms interchangeably, but there is a subtle difference.

Libraries

A library is a set of thousand codes or rules pre-defined for us to employ. For instance, jQuery is a JavaScript library that provides us with ready-made code put together to help us write less and do more. In a nutshell, you manage and dominate the library the way you want.

Frameworks

A framework is also a set of thousand predefined codes or rules. But you cannot control it; it controls the flow of your work. For example, after finishing with HTML, CSS, and JavaScript and having a basic understanding of server-side, you will have to pick a framework to stick to when building your projects. Frameworks such as Vue and Angular target frontend. Express is another framework for Node.js on the server-side.

Problem-solving & errors

Problem-solving

A developer or programmer has to have a particular mindset before starting the journey. Keep in mind that developing or programming is all about problem-solving. Keep that mindset during the entire journey from learning to becoming a professional developer or programmer.

Errors

It is the standard to make mistakes. We are not born smart. The great portion of the entire journey aims at going through trial and error to reach the problem-solving stage. Although I'm not a big fan of Stackoverflow, you still can check it out for error solving. I recommend you to understand your code and solve it yourself.

Tricks & hacks

Through the entire journey, there are tricks and hacks you have to learn. No one will ever tell you about them unless you do your thorough research. I recommend Dev.to, CSS-Tricks, freeCodeCamp which provide informative articles that can help you during your work.

Best and bad practices

Last thing to keep in mind: there are radically two ways of writing your code; either the best way or the bad way. A good practice aims at achieving a clean and highly-secured code which doesn't allow room for bugs to break it down. A bad practice, which you should avoid, leaves your code not clear, not clean and, most importantly, fragile. That's to say it could easily break.

The list could go on and on. But, these are the fundamentals you have to keep in mind as a junior developer.

Hamburger Animation SASS

César — Sun, 07 Feb 2021 20:16:33 +0000

Creating a hamburger animation has become a trend these days. There are plenty of different animations we can achieve through our code. In this tutorial, we will be creating a basic hamburger animation which is SASS-based and not CSS.

First and foremost, what is SASS? SASS stands for Syntactically Awesome StyleSheets. It aims at creating a CSS environment where you can control your CSS rules more efficiently. It makes your workflow easier to maintain and cleaner to edit. It's a preprocessor that complies SASS code into CSS and renders it on a webpage.

SASS generally follows a particular syntax inspired by functional programming languages. It's CSS with superpowers. It comes with variables, functions, conditions, loops etc., which are highly useful. Let's take a look at how CSS and SASS look.

SASS basic structure would look like

Rendered or compiled CSS would look like

We understand that SASS is a way of organising our code. It makes it not only maintainable but also easily reachable.

In this tutorial, we will be creating this customizable hamburger:

Work in progress

First of all, we have to set up our SASS files. SASS's overarching aim to make your life easier. Keeping that in mind, SASS allows us to separate our files like components to facilitate the workflow.

I usually create the parent SASS file and its children. I end up with creating a big family tree. It makes everything easier than having one large CSS file where you have to scroll all way down and back to edit your code.

After creating index.html file and main.js, I usually create the SASS parent file magic.scss. With that being done, I start working out the children. Basic set up includes _config.scss, _presets.scss, _body.scss, and _extras.scss. The children begin with underscores because we don't need these files in actual terms. They're just meant to serve developmental purposes as they will be ignored.

_config.scss file contains all configurations including variables, mixins, functions, placeholders and so on. _presets.scss contains the CSS universal selector * to get rid of browser default styles. _extras.scss file contains all classes that are called through JavaScript. We will also need another file for the hamburger menu _container.scss, which is not necessary but to make use of compositions. Now after creating these files, we have to import them to the parent file magic.scss

Great! Let's now start our index.html. It's going to be a simple HTML structure. Creating a customizable hamburger doesn't oblige us to import it as an icon from any external sources. This fact will minimize any HTTP requests as an advantage. Now, after creating the HTML skeleton and linking our compiled CSS file and script:

We need to create our content. I am following the BEM HTML Architecture, which is a methodology that helps us to create reusable components and code sharing in front-end development.

Note that I have created three spans for our bars. We could have opted for div blocks; however, I think div blocks shouldn't carry simple bars. We don't need to create an entire division block for simple bars. Having that in mind, spans are inline elements by default. We will have to change them as block elements later on. The reason I created container__hamburger to create the hovering or clicking space. That is when a user clicks on the parent container__hamburger, the lines transform themselves into a close button.

We're done with index.html and let's jump into styles. First things first, let's deal with the _body.scss file and our element

Did we just add background: $black;? Definitely! SASS allows us to store values in variables and use or reuse them whenever needed. This fact makes us avoid repetition and write readable code. Read more and enjoy SASS Variables. The reason I used Flexbox to create a column based structure so that I can have the heading and hamburger stand on the top of each other. Now let's add some styles to the title:

Notice here there is something strange going on. It's not. First thing comes to mind why on earth that title set of rules is there, right? That's what we call SASS Nesting which allows us to be more accurate than CSS does. Children who belong to their parents are never out of their parents' charge.

Now, let's move to _container.scss. Here where our hamburger thrives. We have to set the margins and the cursor as the following:

You must be wondering about that & ampersand right? Another feature that SASS provides us with is SASS Ampersand. It's a parent selector. In this case, following the BEM Architecture, we end up having children inheriting their parent's name. To avoid repetition, instead of re-typing parent's name all over again, we can add an ampersand to represent the parent and finish children's names. A subtle way to avoid wasting time.

We're done with the parents now let's move to the bars:

Here are the colour variables:

And here are our mixins:

Notice here that we can pass parameters to mixins which can be very useful later on in the code. We can now reuse radius mixin as much as we can without repeating the entire block with vendor prefixes. That's the nightmare SASS tries to eliminate.

Now we have our bars ready to rotate and transform into a close button. Let's move to our next step that targets _extras.scss. Earlier, I have said that I use extras file to keep classes which will interact using JavaScript. Let's work the transform part first. We have to create two mixins. First, one to contain translateX and the second one containing rotateZ & translate.

Then we have to set our code. We have to add three classes for three bars which we will need for JavaScript to toggle them.

The reason we're adding visibility: hidden; because we want the top line to disappear altogether from the webpage. Hence it won't affect anything on the page. The last thing to do is to make our hamburger work through JavaScript.

We have to create two variables to store both the parent and the children. When a user clicks on the parent, the three classes we have just created toggle in and out once clicked again.

And here we get our final basic hamburger animation. Many ways can lead you to achieve this, but I recommend you to find a fast and better way.

Cheers!