Este 2022 entre los propósitos que me trace estuvo el de aprender a programar, específicamente en la rama de desarrollo web, por eso me suscribí a Platzi, y casi a diario he dedicado al menos una hora a sobretodo realizar cursos, ha sido tanto mi empeño que ya he hecho casi todos los que se refieren al desarrollo web frontend, actualmente ya estoy estudiando React.js.

El 2023 quiero que sea más de prácticas, pues, ya he tenido experiencias dónde me encuentro con que cuando uno se enfrenta a problemas en el código es el momento en el que más se comprenden los conceptos. Es por eso, que ya desde ahora - abonando el terreno para el 2023, jajaja - quiero ir plasmando lo que practico, de esta manera, otros interesados en la materia podrán tener un referente más de tantos que hay en internet.

Source

Como hice referencia, estoy estudiando en este momento todo lo que tiene que ver con React.js, ya incluso tengo una visión general de lo que son otros frameworks y librerías. Precisamente aquí uno se da cuenta que cada vez es menos el HTML e incluso CSS puro el que se escribe, ya que todo se integra de diversos modos en unos pocos documentos finales. El curso de Webpack, del cuál hace unos meses realicé un post, me enseñó la importancia de esto, sobretodo pensando en el momento en que ponemos en producción nuestros proyectos.

Estos días revisando un formulario que un compañero había hecho, y el cuál queríamos se viera bien tanto en escritorio como en tablet y mobile, fue una oportunidad para retomar y practicar un poco de CSS, ya que aquí lo que queríamos es controlar la visualización o el display del diseño. De la misma manera, también tener en cuenta una de las reglas modernas del desarrollo web actual, esta es el Mobile first que consiste en desarrollar pensando y comenzando por los dispositivos más pequeños (celulares) hasta llegar a los más grandes (tablets y computadoras).

//Display Grid

.layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1020px) {
    .layout {
        display: grid;
    grid-template-columns: 1fr;
    }
}
------------------------------------
//Display flex

.layout {
    display: flex;
}

@media (max-width: 1020px) {
    .layout {
        display: flex;
        flex-direction: column;
        }
}

Respecto al display la solución pudo ser doble, o hacer la configuración con grid o con flex. Personalmente, me siento más cómodo con flex, ya que es lo siento más práctico para casos puntuales, de cualquier manera en ambos casos el resultado es el mismo.

Esto también es algo muy importante en la programación,y es que no hay una misma forma de hacer las cosas, al contrario, existen varias posibilidades. Esto, junto a la posibilidad que en mis manos siento de poder crear cosas asombrosas son las razones por la que me encanta programar y el volver a conceptos básicos no me parece tedioso sino más bien necesario para poder avanzar en este camino firmemente.

ENGLISH VERSION

Versión en español

Source

This 2022 among the purposes that I trace was to learn to program, specifically in the branch of web development, so I subscribed to Platzi, and almost every day I have spent at least an hour to especially make courses, has been so much my commitment that I have already done almost all that relate to frontend web development, I'm currently studying React.js.

The 2023 I want it to be more of practice, because, I have already had experiences where I find that when one faces problems in the code is the moment in which the concepts are more understood. That's why I want to start now - laying the groundwork for 2023, hahaha - I want to be capturing what I practice, in this way, others interested in the subject may have one more reference of so many that are on the internet.

Source

As I mentioned, I am currently studying everything that has to do with React.js, and I even have an overview of what other frameworks and libraries are. Precisely here one realizes that it is less and less pure HTML and even CSS that is written, as everything is integrated in various ways in a few final documents. The Webpack course, of which a few months ago I made a post, taught me the importance of this, especially thinking about the moment when we put our projects into production.

These days reviewing a form that a colleague had made, and which we wanted to look good on desktop, tablet and mobile, was an opportunity to resume and practice a bit of CSS, since here what we wanted is to control the visualization or display of the design. In the same way, also take into account one of the modern rules of web development today, this is the Mobile first which is to develop thinking and starting with the smallest devices (mobile) to reach the largest (tablets and computers).

//Display Grid

.layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1020px) {
    .layout {
        display: grid;
    grid-template-columns: 1fr;
    }
}
------------------------------------
//Display flex

.layout {
    display: flex;
}

@media (max-width: 1020px) {
    .layout {
        display: flex;
        flex-direction: column;
        }
}

Regarding the display the solution could be double, or to make the configuration with grid or with flex. Personally, I feel more comfortable with flex, since I feel it is more practical for punctual cases, anyway in both cases the result is the same.

This is also something very important in programming, and it is that there is not a same way of doing things, on the contrary, there are several possibilities. This, together with the possibility that in my hands I feel of being able to create amazing things are the reasons why I love programming and going back to basic concepts does not seem to me tedious but rather necessary to be able to advance in this path firmly.

---

---

---