DEV Community: Lenin Felix

3 ways to remove duplicates in an Array in Javascript

Lenin Felix — Tue, 07 Sep 2021 23:48:21 +0000

Let's check, many times (or few) arises the need to remove duplicate elements given in an array, I don't know... it can be because you have to print a list from the super, remove a student that duplicated his record in a form, infinity of things, so let's see some ways to do this:

1) Use Set

Using Set(), an instance of unique values will be created, implicitly using this instance will delete the duplicates.

So we can make use of this instance and from there we will have to convert that instance into a new array, and that would be it:



let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);

Output:



['A', 'B', 'C']

2) Using the indexOf() and filter() methods

The indexOf() method returns the index of the first occurrence of the element in the array:



let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B');

Output:

The duplicate element is the element whose index is different from its indexOf() value:



let chars = ['A', 'B', 'A', 'C', 'B'];

chars.forEach((element, index) => {
    console.log(`${element} - ${index} - ${chars.indexOf(element)}`);
});

Output:



A - 0 - 0
B - 1 - 1
A - 2 - 0
C - 3 - 3
B - 4 - 1

To eliminate duplicates, the filter() method is used to include only the elements whose indexes match their indexOf values, since we know that the filer method returns a new array based on the operations performed on it:



let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((element, index) => {
    return chars.indexOf(element) === index;
});

console.log(uniqueChars);

Output:



['A', 'B', 'C']

And if by chance we need the duplicates, we can modify our function a little, just by changing our rule:



let chars = ['A', 'B', 'A', 'C', 'B'];

let dupChars = chars.filter((element, index) => {
    return chars.indexOf(element) !== index;
});

console.log(dupChars);

Output:



['A', 'B']

3) Using the includes() and forEach() methods

The include() function returns true if an element is in an array or false if it is not.

The following example iterates over the elements of an array and adds to a new array only the elements that are not already there:



let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = [];
chars.forEach((element) => {
    if (!uniqueChars.includes(element)) {
        uniqueChars.push(element);
    }
});

console.log(uniqueChars);

Output:



['A', 'B', 'C']

Basically, we have options to solve this type of problem, so don't get stuck anymore and you can use whichever one appeals to you.

If you liked the content you can follow me on my social networks as @soyleninjs

3 formas de remover duplicados en un Array en Javascript

Lenin Felix — Tue, 07 Sep 2021 23:38:22 +0000

Vamos a checar, muchas veces (o pocas) surge la necesidad de eliminar elementos duplicados dados en un array, que se yo... puede ser por que tienes que imprimir una lista del super, quitar a un alumno que duplico su registro en un form, infinidad de cosas, así que vamos a ver algunas formas de hacer esto:

1) Usando Set

Usando Set(), se creara una instancia de valores únicos, implícitamente al usar esta instancia borrara los duplicados .

Así que podemos hacer uso de esta instancia y de ahi tendremos que convertir esa instancia en un nuevo array, y eso seria todo:

let letras = ['A', 'B', 'A', 'C', 'B'];
let letrasUnicas = [...new Set(letras)];

console.log(letrasUnicas);

Esto nos regresa:

[ 'A', 'B', 'C' ]
```



## 2) Usando los métodos indexOf() y filter()

El método indexOf() regresa el índice de la primer aparicion del elemento en el array:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];
letras.indexOf('B');
```
{% endraw %}


Esto regresa:
{% raw %}


````javascript
1
```



El elemento duplicado es el elemento cuyo índice es diferente de su valor de indexOf():



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

letras.forEach((elemento, index) => {
    console.log(`${elemento} - ${index} - ${letras.indexOf(elemento)}`);
});
```
{% endraw %}


Salida:
{% raw %}


````javascript
A - 0 - 0
B - 1 - 1
A - 2 - 0
C - 3 - 3
B - 4 - 1
```



Para eliminar los duplicados, se utiliza el método filter() para incluir sólo los elementos cuyos índices coinciden con sus valores indexOf, ya que sabemos que el método filer regresa un nuevo array con base a las operaciones que se hacen dentro de este:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasUnicas = letras.filter((elemento, index) => {
    return letras.indexOf(elemento) === index;
});

console.log(letrasUnicas);
```
{% endraw %}


Salida:
{% raw %}


````javascript
['A', 'B', 'C']
```



Y si de casualidad necesitamos los duplicados, podemos modificar un poco nuestras función, solo con cambiar nuestra regla:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasDuplicadas = letras.filter((elemento, index) => {
    return letras.indexOf(elemento) !== index;
});

console.log(letrasDuplicadas);
```
{% endraw %}


salida:
{% raw %}


````javascript
['A', 'B']
```



## 3) Usando los métodos includes() y forEach()

La función include() devuelve true si un elemento está en un array o false si no lo está.

El siguiente ejemplo itera sobre los elementos de un array y añade a un nuevo array sólo los elementos que no están ya allí:



````javascript
let letras = ['A', 'B', 'A', 'C', 'B'];

let letrasUnicas = [];
letras.forEach((elemento) => {
    if (!letrasUnicas.includes(elemento)) {
        letrasUnicas.push(elemento);
    }
});

console.log(letrasUnicas);
```
{% endraw %}


Salida:
{% raw %}


````javascript
['A', 'B', 'C']  
```



Básicamente, tenemos opciones para solucionar este tipo de problemas, así que no te estanques mas y puedes usar cualquiera que te resulta mas atractiva.


<center>
Si te gusto el contenido puedes seguirme en mis redes sociales como @soyleninjs 
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

Know the type of Variable in JS!

Lenin Felix — Fri, 30 Apr 2021 23:29:25 +0000

Many times (...I guess) you have wanted or tried to want to know what type is a variable, and most likely you know it since 98% of the times you are the one who declares them.

But imagine to find yourself with an API or a third party code which you have to manipulate, that already becomes more complex, since you are only there to use that little world of variables, functions, texts and others...

Although also many times it is useful to know what type are the variables in order to create conditionals that are prepared to manipulate and to maintain your code stable and that it does not crack your code of "Hello World".

For that reason I offer you a small example of functions that you can use for those occasions (I know that it is little, but it is honest work).

Basically, these are functions to which you pass your variable to indicate whether it is of a certain type or not.

It can work, for example, in some function in which you pass parameters, but you have to do different things if the parameter receives an Object or an Array.

At first sight it could not seem very useful, but at least to me, with certain code that I had to make, it helped me.

If you liked the content you can follow me on my social networks as @soyleninjs

Conocer el tipo de Variable en JS!

Lenin Felix — Wed, 28 Apr 2021 23:40:33 +0000

Muchas veces (...supongo) has querido o intentado querer saber de qué tipo es una variable, y lo más probable es que lo sepas ya que el 98% de las veces tú eres quien las declara.

Pero imagínate encontrarte con una API o un código de terceros el cual tengas que manipular, eso ya se vuelve mas complejo, ya que tu solo estas ahi para utilizar ese mundillo de variables, funciones, textos y demás...

Aunque también muchas veces es util saber de que tipo son las variables para así crear condicionales que estén preparadas para manipular y mantener tu código estable y que no crashee tu código de "Hola Mundo".

Por eso te ofrezco un pequeño ejemplo de funciones que puedes utilizar para esas ocasiones (se que es poco, pero es trabajo honesto).

Básicamente, se trata de funciones a la cual le pasas tu variable para indicar si es de cierto tipo o no.

Puede funcionar, por ejemplo, en alguna función en la que le pases parámetros, pero tengas que hacer diferentes cosas dado el caso si el parámetro recibe un Objeto o un Array.

A simple vista no podría parecer muy util, pero por lo menos a mí, con cierto código que tuve que hacer, me ayudo.

Si te gusto el contenido puedes seguirme en mis redes sociales como @soyleninjs

Mastering the :nth-child CSS

Lenin Felix — Fri, 05 Mar 2021 21:15:03 +0000

Hello, today I share with you a super web page of documentation on how to use more advanced selectors such as the "nth-child" pseudo-selector:

Link

The page is very clear and are very good examples to understand and know how to use the css pseudo selectors, because sometimes it is required to give a very peculiar style and not as uniform as usual.

The post is short but it is really useful, I highly recommend it, I used it for one or another project.

Greetings.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

Maestro del :nth-child CSS

Lenin Felix — Fri, 05 Mar 2021 21:14:31 +0000

Hola, hoy les comparto una super pagina web de documentación sobre como utilizar selectores mas avanzados como los es es el pseudoselector "nth-child":

Link

La pagina es muy clara y son muy buenos ejemplos para poder entender y saber utilizar los pseudoselectores de css, ya que en ocaciones se require que se dé un estilo muy peculiar y no tan uniforme como siempre.

Es breve el post pero es realmente util, lo recomiendo bastante, a mí me servido para uno que otro proyecto.

Saludos.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

6 ways to convert a String to Array with Javascript

Lenin Felix — Thu, 25 Feb 2021 14:47:56 +0000

A text string in javascript can be converted to Array with 6 different methods.

We will be looking at:

split()
Array.from()
[...spread]
Object.assign()
for loop
JSON.parse()

split()

This method is used to split the text string based on a given separator to return an Array with the separated elements.

let str = 'Lion,Horse,Iguana,Wolf';
let arr = str.split(','); 
//split the text string by a comma
console.log(arr);
//["Lion", "Horse", "Iguana", "Wolf"].

If you want to separate a text string by each letter it contains, then you can pass an empty string ("") as the separator.

let str = 'soylenin';
let arr = str.split('');
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

The split() method accepts a second parameter in which we can indicate a limit of splits. This limit decides how many elements will be included in the returned array.

let str = 'Golf | Hockey | Football | Tennis';
let arr = str.split(' | ', 2);
console.log(arr); 
// ['Golf', 'Hockey']

Array.from()

The Array.from() method returns an Array from the text string passed as a parameter. Just pass a text string to the .from() method to get an array with each letter of the text:

let str = 'soylenin';
let arr = Array.from(str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

This method also accepts two optional parameters in addition to our text string. One is a map() function that will be called on each iteration of our array and the other is a value that can be used as "this" within each iteration of the map.

let str = 'soylenin';
let arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["s0", "o1", "y2", "l3", "e4", "n5", "i6", "n7"]

Spread operator

The spread operator is from the new version of ES6 and works in all browsers. It helps us to extract and spread each letter or character of the string used. We only have to wrap the propagation of that string inside our square braces to create a new array from the given string.

let str = 'soylenin';
let arr = [...str];
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

Object.assign()

This method is used to copy the values and properties of one or more source objects to a target object. We can provide a text string as the source and an empty array as the target to create an array from a text string.

let str = 'soylenin';
let arr = Object.assign([], str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

For loop

We can loop through each character in a string using for loop and push that character into an empty array to create an array from the string.

let str = 'soylenin';
let arr = [];
for(let i of str) {
    arr.push(i);
}
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]

JSON.parse()

There is an extra way to convert a string into an array, only in this case our string must already contain the array.

let arr =  JSON.parse('[1, 5, "false"]'); 
console.log(arr); 
console.log(typeof arr); 
// [1, 5, "false"]
// "object"

As you will see, it will no longer be a string, but will be transformed into an array.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

Free Ruler, model to perfection!

Lenin Felix — Tue, 23 Feb 2021 17:29:06 +0000

Free ruler is a wonderful tool if you have to take care of the frontend of your client's project (or of a project you carry out within a company, for example a website).

We can download it here and we only have to enter your Github and from there download the .zip file that they offer and that's it, once it is decompressed we will have our app. 😄

Unfortunately this tool is only for MAC OS (but relax, there is still a good alternative if you work in window, Ruler For Windows) 😅

Free ruler is an application that gives us two rulers, both horizontal and vertical.

Simple but powerful, this same, both vertically and horizontally we can expand it for our needs, even larger than our screen.

And you just need to move your mouse within its range to indicate (in pixels) the distance you are, taking as a reference from left to right (in horizontal mode) and from top to bottom (in vertical mode).

The biggest advantage that I see (and why I was dying to have something like this from the beginning) is that if we press "F" (shortcut to keep the rulers always in the foreground... and to show respect) it stays fixed and when it goes out of focus it becomes transparent, staying on top of all our windows to be able to measure.

But you may ask yourself, why do I need to measure things?

Simple, at the moment of transferring a design that is in the Zeplin application (or illustrator, a pdf, I don't know) I compare it with what I'm programming (only html and css 😅).

It seems to me a very good application to meticulously review a design that we are programming, whether it is a website, an application, or a copy of a drawing.

It is a very indispensable tool for my work (Frontend Developer) since I am daily doing layout with css and many times you have to make sure that everything is up to date.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

Create and understand functions in Javascript!

Lenin Felix — Sun, 21 Feb 2021 18:20:15 +0000

Functions are one of the fundamental building blocks in JavaScript.

A function in JavaScript is similar to a procedure (a set of instructions that performs a task).

We can say that a function is a block of instructions where a certain algorithm/task/instruction will be performed that will return a result or modify certain values for the future.

And we can also emphasize that functions are mainly used to execute repetitive code.

Although we know what we can do with a function many times we do not understand whether to declare them in one way or another, this because we have several ways to declare them, so let's see them:

Function Declaration

This is the traditional one of always that consists of the keyword function, followed by:

The name of the function.
A list of parameters of the function, in parentheses and separated by commas, if there are no parameters, just leave the parentheses empty ().
The JavaScript declarations that define the function, enclosed in curly brackets, { ... }.


function my_name(a, b, ...) {
  // javascript declaration, operations, etc.
  // simply what the function will do when called
  return a * b;
}

Function Expression

The main difference between the function expression and the function declaration is that here they do not start with the reserved word function but start as if we were creating a variable:


const variable = function(a, b) {
  // javascript statement...
}

We can realize that these functions (function expression) can be anonymous, but we can make mention of them or send them to call with the name of the variable where we host it.

Also another of the differences with respect to these two functions, is the place where we declare them:


alert(foo()); // "soylenin" ✅
function foo () {return "soylenin";}

With the function declaration we can say that these functions once they are declared will be available anywhere, as long as they are within their scope, and it does not matter if they are called before or after.

But with function expressions (function expression) is different, because we know that the function is stored in a variable and remember that variables can not be called before having assigned them, otherwise it will simply be an error:


alert(foo()); // ERROR! foo is not declared
const foo = function() {return "soylenin";}

Arrow Functions

An arrow function is a compact alternative to a traditional function expression, but it is limited and cannot be used in all situations.

Instead of continuing to use the word function we can omit it but instead we have to put an equal sign (=) plus a closing square parenthesis (>) [or a better known "greater than"] after the closing parenthesis:


const variable = () => {
  return "soylenin"
}

console.log(variable()) // "soylenin"

This function is more compact and has its own benefits with respect to the rest, since if we only return a single value, we can remove the word return and the braces and implicitly the function will return the value.


const variable = () => "soylenin"

console.log(variable()) // "soylenin"

This is very practical because we eliminate code and the function is still as effective, and we must say that we can not only use arrow functions in this way, in the world the most common use that is given to this function is when they are used within iterator methods, for example .map() in an array.


const finalValue = arrayProduct.map((item) => item.id === 3)

Here simply the variable valueFinal will be assigned the value of the array that corresponds to the id of 3.

Also one of the other great benefits is that it is used to inherit the context.

Basically it was to remove the cumbersome and strange ways of using this in our code, making it more intuitive code.

In traditional functions by default this is in the window scope:


window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(function () {// <-- The traditional function is running in the scope of window
  console.log("this.age", this.age); // generates "10" because the function is executed in the scope of window
  }, 100);
}

const p = Person();

The arrow functions do not default this to the scope of window, rather they are executed in the scope in which they are created:


window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(() => {// <-- Arrow function executing in the scope of "p" (when the function is sent to be called and where it is hosted)
    console.log("this.age", this.age); // generates "42" because the function is executed in the scope of Person
  }, 100);
}

const p = Person();

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

Learning CSS Variables!

Lenin Felix — Thu, 18 Feb 2021 17:35:42 +0000

In CSS, custom properties (also known as variables) are properties that we can declare with any name we want and any value we want, for later use.

CSS variables are subject to cascading, and inherit their value from their parent.

It is necessary to emphasize that to create variables in css we must follow certain rules so that everything goes well.

To declare custom properties (variables) we use a name starting with two hyphens (--), and a value, which can be any valid CSS value (even some nasty stuff, but that's a bit of a gamble).

Like any other property, we write it inside a set of style rules, something like this:

selector {
  --back-color: blue;
}

Note that the selector we use for the style rules defines the scope in which we can use the custom property (the variable).

A good common practice is to declare variables in the pseudo-class :root, and thus apply them globally to the HTML document:

:root {
  --back-color: blue;
}

NOTE: We must take into account that the variables are case sensitive, that is to say, that a variable with capital letters is different from a variable with lower case letters:

:root {
  --back-color: blue; ✅
  --BACK-COLOR: green; ✅
}

Both are correct and it is up to each one how to use them, but it is really recommended that they are always lowercase so that they do not deviate from the normal css properties.

Using Variables

Although we already have our variables, now we must know how to use them, if you wonder if we just put the name of the variable as any value:

body {
  background-color: --back-color; ❌
}

Well you are wrong, to use it you have to make use of the function of var() that remembering this can only be used only as value of a property, and that inside it we call to our variable css, so that the function is in charge to replace our variable by its value.

body {
  background-color: var(--back-color); ✅
}

Note that this does not replace the value directly, but helps the browser recognize that this variable is equivalent to a previously given value.

Fallback for variables

If at the moment of using the function var() and we also pass it our css variable, this will give as a result the value of our variable, but what happens if we do this but we never declare our css variable?

The truth is that it will not print anything, but thanks to the var() function we can pass another value (separating our variable with a ",") that will be taken in case our variable does not exist 😎.

body {
  background-color: var(--back-color, #0f0); ✅ /* Green (#0f0) if --back-color is not defined */
}

Thus, we make sure that our property will always have a value, given that for some reason the variable does not exist (we did not declare it yet, by accident someone deleted it, or simply we do not place the name of the variable correctly, etc).

And it is not only that, we can declare multiple fallbacks to have greater security that our property will always have value. But it is still necessary to respect the order and the way to nest the fallbacks:

.caja-2 {
  background-color: var(--color-base, var(--color-back, pink)); ✅ /* Pink if --color-base and --color-back are not defined */
}

.caja-3 {
  background-color: var(--color-base, --color-back, green); ❌ /* Invalid: "--color-back, green" */
}

Inheritance

CSS variables are inherited.
Which means that if no value is set for a custom property on a given element, the value of its parent element is used.

Let's look at the following HTML:

<div class="parent">
  <div class="son-1">
    <div class="grandson-1"></div>
    <div class="grandson-2"></div>
  </div>
  <div class="son-2">
    <div class="grandson-3"></div>
    <div class="grandson-4"></div>
  </div>
</div>

and we have this css:

.son-1 {
  --test: 10px;
}

.grandson-1 {
  --test: 2em;
}

In this case, the results of var(--test) are:

For the element class="son-1": 10px.
For the element class="grandson-1": 2em
For the element class="grandson-2": 10px (inherited from its parent [.son])
For element class="parent": is an invalid value, which is the default value of any custom property.

Note that these are custom css variables, they are not real variables as we can find in other programming languages.

The value is calculated where needed, i.e. only in the element where it is declared and for its children (descendants) and is not stored for use in other rules (for parent or sibling elements).

For example, you cannot declare a css variable for an element and expect to use it in the properties of the descendant (child) of a sibling element.

The css variable is only set for the matching selector and its descendants, like any normal CSS.

.son-1 {
  --color-background: red; /* we declare the variable */
}

.grandson-1 {
  background-color: var(--color-background); ✅ 
  /* the ".grandson-1" can use the variable since it is a descendant of ".son-1" and therefore can inherit the variable */
}

.grandson-4 {
  background-color: var(--color-background); ❌ 
  /* the ".grandson-4" **NOT** can use the variable since it is a descendant of ".son-2", which is a sibling of ".son-1" and it does not know what variables exist in its siblings and therefore **NOT** can inherit the variable */
}

The easiest way for everyone to recognize the variable is to raise it to a level where it can be inherited to all descendants (children), in this example, we can place the variable up to ".parent":

.parent {
  --color-background: red; /* we raise the variable */
}

.son-1 {
  /* --color-background: red; */
  /* we remove the variable */ 
}

.grandson-1 {
  background-color: var(--color-background); ✅ 
  /* the ".grandson-1" can use the variable since it is a descendant of ".parent" and therefore can inherit the variable */
}

.grandson-4 {
  background-color: var(--color-background); ✅ 
  /* the ".grandson-4" can use the variable since it is a descendant of ".parent" and therefore can inherit the variable */
}

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

5 tips for learning CSS in 2021

Lenin Felix — Tue, 16 Feb 2021 16:12:45 +0000

**CSS is a language that can be complicated (at least at the beginning), it may not be very clear and sometimes a bit weird the way some things are written (I felt that at the beginning) but the following tips will help you to get to know it and master it.

Selectors

Identify the different selectors you can use to style your HTML. At least focus (in the beginning) on the most basic ones like tags selectors and selectors by id and class (believe me it will be a lot of fun to fill all your html with just id and classes).

Anatomy

Knows the anatomy of its declaration, that is to say, the base structure with which it must be written. Understand how the selectors are named with their respective patterns or structure, know what the properties and their values are.

Box Model

Understand what the box model is and what properties affect its sizing. Understanding the box model will expand your mind and you will be able to see and understand perfectly how certain properties act in such a way and how it can be affected if you change or add another property (such as box-sizing).

Positioning

Master how elements are positioned. Using positioning absolute, relative, Flexbox and CSS Grid. Understanding the positioning will help you to see how all the elements that you style have an order and roughly meet certain patterns, which you can break if you know how to use their positions (CSS Grid for example), in short you will know how your html elements are distributed in order to give a more beautiful and friendly to the eye (and not all as a word with pure Arial 12).

Practice

**Practice and perseverance are fundamental in your learning process. Try to copy what others do, that helps a lot to see how others think, it is also highly recommended that you play a lot, that by yourself try to do and remember how to do it, that exponentially increases your knowledge because it just came out of you.

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!

Master in CSS in 2021

Lenin Felix — Mon, 15 Feb 2021 19:00:32 +0000

Web design is one of the areas with the highest growth in recent years (if I will tell you, I have only been in this world for 3 years and I have never stopped because something new comes out every day 😄).

So I give you the key points to become an expert, I say expert, a complete MASTER in CSS and you can apply to any job today as a Frontend Developer (of course you should also know HTML and JS, but today we will see CSS).

1. CSS from Zero

Make the web beautiful with the only language created for design, start playing with this wonderful language and you will see how everything begins to take shape.

2. Flexbox and GridCSS

Design flexible interfaces with the system used by all CSS frameworks (Bulma, Bootstrap, Tailwind, etc).

3. Advanced CSS

Learn in depth the various modules that css has, such as things like pseudoElements or pseudoSelectors, among others.

4. CSS variables

CSS has native variables with TOTAL browser support! Learn to use them and you will be able to boost your design to a more dynamic and professional level (almost approaching programming as in other languages).

5. Responsive Web Design

Design websites and apps that look perfect on any screen size. Learn how your traditional designs can be scaled with the MediaQuerys to give specific styles for both laptop screens and mobile phone screens.

6. Animations with CSS

Create animations optimized for the web in 2D and 3D without programming, just with a few lines of CSS thanks to properties like transforms and animation.

7. Preprocessors from Zero

Convert your styles CSS into a programming language (now yes) with preprocessors such as Less, Stylus or SASS (we could even say that Postcss but this is called a PostProcessor, something through which your final styles pass in order to optimize them more).

If you liked the content you can support me in:

Want to earn free Bitcoins and Dogecoins? Click on the banner!