Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

36/43

Lectura

CSS es un lenguaje de hojas de estilo que nos permite crear sitios web agradables para el usuario, sin embargo, nuestros archivos de CSS suelen ser bastante extensos, lo que produce una demanda significativa de nuestro tiempo y puede generar un trabajo menos productivo.

Una de las cosas que puedes hacer para evitar tantas líneas de código es utilizar los preprocesadores de CSS, los cuales extienden las funcionalidades de CSS común, permitiéndonos tener variables, funciones, mixins, reutilización de código, flexibilidad en el desarrollo, etc.

Pero, ¿cómo es que funcionan los preprocesadores?

Un preprocesador se escribe con una sintaxis especial que nosotros le indicamos y debe compilarse a CSS para ser comprendido por el navegador. En sí lo que estamos haciendo es CSS pero con esteroides.

Que es un preprocesador.png

Esta sintaxis que te menciono depende de cada preprocesador. Los más conocidos y usados son: LESS, SASS y Stylus. ¿Cuál usar? En mi opinión personal, esta decisión depende más de tus gustos personales y de qué tan cómodo o cómoda te sientas con una sintaxis o con otra, sin embargo, es también importante que dialogues con tu equipo y evalúen con qué preprocesador quieren trabajar dependiendo de las necesidades del proyecto.

Aquí te comparto la documentación oficial de cada uno de ellos para que puedas evaluar sus diferencias en sintaxis:

https://sass-lang.com/guide
http://lesscss.org/
http://stylus-lang.com/

Para aprender muy bien CSS y este tema de preprocesadores, es muy importante que practiques y seas constante. Comenzar algo siempre va a ser muy difícil, pero con paciencia y dedicación podrías llegar a dominar estos temas fácilmente.

Algo que me ayudó mucho cuando comencé, fue replicar páginas que me gustaban mucho (a modo de estudio, por supuesto). Comencé haciendo extensas líneas de CSS y quizás mis creaciones no eran las más bonitas, pero no me desmotivé, al contrario, seguí intentándolo y sumándole a esta práctica el tema de los preprocesadores, JavaScript, librerías, frameworks, etc.

Así que ánimo, practica bastante y por qué no, comparte tu conocimiento con la comunidad de Platzi o comunidades de desarrollo del lugar en donde vives.

¡Nos vemos en la siguiente clase!

Aportes 205

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Se que a muchos les ayudara esta imagen.

Si estas viendo esto en el 2021 y no sabes cual preprocesador usar, usa Sass.
¿Porque?
Segun “State Of CSS 2020” Sass fue la tecnolgia mas adoptada y con mas satsifaccion del ecosistema.
https://2020.stateofcss.com/es-ES/technologies/

https://www.frontendmentor.io/

Es una buena página para practicar HTML y CSS, te dan las imágenes y todo junto con una breve explicación (Tiene javascript también)

Me encanta el efecto en la página de “Go pro”, es genial ( https://gopro.com/en/us/homepage-v3).

Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.

El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar. Los preprocesadores incluyen características tales como variables, funciones, mixins, anidación o modularidad.

Siempre hago todo la parte HTML rapido y en el CSS me quedo durante horas! jaja
Necesito mas práctica

Este es uno de los cursos más largos que he hecho hasta la fecha. Pero esta Re-bueno. CSS es un mundo y toca hacer fallo y error hasta lograr aprender como funciona.

Les comparto una frase me encanta para continuar, de nunca parar de aprender.
“Cualquiera que para de aprender se hace viejo, tanto si tiene 20 como 80 años. Cualquiera que sigue aprendiendo permanece joven. Esta es la grandeza de la vida.” Henry Ford

Mi página : Sergio99778
Todavía no esta terminada, pero si tienen algunas opiniones al respecto me gustaría escucharlas.
Se ve más bonita en celular xdxdxd. ❤️

Si alguien por aquí esta empezando con el JS Challenge o algo similar.
Sí, este curso puede llegar a ser abrumador. Sólo les digo que saben lo que hacen en Platzi, porque te dan como una pincelada de todo lo que necesitas saber para tener PANORAMA. Es algo que me hubiese gustado un montón haberlo tenido hace dos años.

Por favor, no se frustren. Entenderán todo, creanme.

Los preprocesadores son muy útiles.
Pienso que para tener un panorama de cómo funciona cada preprocesador y saber con cuál se siente uno más cómodo hay que tomar este curso
https://platzi.com/clases/preprocesadores/
Saludos!!

https://freebiesbug.com/psd-freebies/website-template/
Esta web ofrece templates gratuitos en photoshop para poder replicar en HTML y CSS

Les recomiendo el curso de preprocesadores de plazi. es de mis favoritos
https://platzi.com/search/?search=preprocesadores

que bonito mensaje y muy alentador, muchas gracias teff.
.

Soy completamente nuevo en JS comencé la Escuela pensando que iba a ser desde 0 pero hay cosas que se van mas adelante, cada informacion es buena, eso no lo niego.
Pero para los que venimos comenzando si es importante primero tener el mayor conocimiento posible para poder utilizar estos tipos de herramientas, al menos a mi parecer.
Y entiendo muchas cosas que dicen porque siempre me ha gustado programar, pero en JS es primera vez.

Asi que si eres nuevo, y lees este mensaje! Animos. Que todos podemos

El consejo de replicar paginas que a uno les gustan, es una muy buena manera de practicar.

Super el consejo de replicar páginas lo que yo hago es ir a pinterest y buscar web desing y tomo un diseño y lo hago en html y css pero no he usado un preprocesador

super interesante, seria chévere tener aquí el link directo a el curso de preprocesadores.

A mi me hubiera gustado ver este tema con ejemplos prácticos como todo lo demás, pero ya me toca ir a verlos por mi cuenta, aún así, muchas gracias, un excelente curso hasta lo que he visto.

¿Cuál procesador se usa mas en la actualidad?

Pues a replicar páginas entonces jeje

van muchas veces que me frustran desafíos que se ponen porque parece que lo que ya aprendí no lo aplico bien y tengo que volver a ver como era para hacerlo de manera correcta o simplemente me pasan pequeños errores que no me doy cuenta pero el punto es no rendirse y seguir 😄

Para la productividad sería bueno su utilidad, pero ojito ojito: Depende del tipo de proyecto, primero conversa con el equipo de desarrollo.🚀🙌💻

gracias un tema para leer mucho, yo en lo personal tratare de replicar las clases localmente con mi gente…

El mejor de los consejos “no desanimarse” por el contrario encontrar motivación en cada cosa nueva que aprendemos, lo cual suma a mejorar nuestras habilidades y por supuesto nuestros proyectos. 😀

Interesante, nunca los he usado, es hora de empezar a tomarlos en cuenta 👌.

JANJAJAJAJAJAJAJAJAJJAJA, CSS CON ESTEROIDES, mejor metáfora evere jajajajajajjaja.

He estado haciendo todas las actividades de este curso con stylus y se los recomiendo!

la verdad no se porque pero no me gusta mucho utilizar prepocesadores

(a modo de estudio, por supuesto)…jaja me dio mucha risa esa parte.

Pero ya hablando en serio tienes mucha razón es bueno estimular la lectura de código de otros proyectos e intentarlos hacer para estudiar y enriquecer el vocabulario de CSS.

¡Muchas gracias por la motivación! Quede con ganas de estudiar y practicar más 😃

Empece con LESS, luego pasé a Sass y probé Stylus y entre todos para mi Sass es quien mejor ha terminado haciendolo y más comunidad lo apoya, aunque el resto tiene también buenas comunidades.

Probad, elegir y permitiros cambiar en cualquier momento.

… es muy importante que practiques y seas constante. Comenzar algo siempre va a ser muy difícil, pero con paciencia y dedicación podrías llegar a dominar estos temas fácilmente.” que bonito

se podría reemplazar algunos de estos preprocesadores por postCss ??? o postCss no tiene el alcance hasta el momento de lo que nos puedan dar sass, less, stylus??

Me encuentro un poco indeciso, si seguir con la programacion o con el diseño web, la vdd es que hasta ahora me ha llamado mucho la atencion la parte del diseño, es increible lo que se puede lograr con estos preprocesadores.

en CodePen se puede practicar de manera muy sencilla con los preprocesadores, sin tener que invertir mucho tiempo configurando entornos de desarrollo.

Interesante, claro! la practica hace al maestro, seguiré practicando y replicando paginas. 😃 gracias!!

excelente yo llegue conociendo CSS pero precisamente quiero actualizarme y aprender a usar estos preprocesadores.

Sass es el #1, Less #2, pero va a depender de lo que use más tu equipo de trabajo, de momento estoy sola, vamos con Sass xD

Una característica que percibo que comparten los Preprocesadores de CSS, es que te permiten tener una estructura más legible y relativamente fácil de mantener tu código CSS.

Les comparto el siguiente enlace para conocer más del tema:
Preprocesador CSS

Cada vez que avanzo me doy cuenta que hay mucho mas por conocer, el camino es largo pero siento que vale la pena!

En este curso podemos practicar haciendo un clon de Google

https://platzi.com/clases/html-practico/

Por mi parte recomiendo SASS

ya tocara hacer esos cursos tambien. poco a poco por que no se puede volar en esto.

Hay curso completo de sass, less y stylus

La práctica hace al maestro

Gracias 😄

Here we go again!

Replicar es la manera mas efectiva en mi opinion de aprender y practicar, porque cuando te pasen un diseño vas a poder recplicarlo de forma rapida

Desconocía completamente este tema, sin embargo, considero que se debe tener conocimientos más claros de css para llegar a esto.

Me sentía un poco abrumado al llegar a este punto, pero solo de ver las posibilidades esa sensación se esfumo. 😃

para poder iniciar con un pre-procesaro, es importante comprender bien los conceptos que maneja CSS y asi seria mas facil moverse en mi opinion

Sass es genial, de hecho lo usa Bootstrap y algo genial que puedes hacer es que si extiendes el sass de Bootstrap puedes generar nuevos breakpoints para Bootstrap!

No tenia nincuna idea acerca de la existencia de los preprocesadores o de su uso. A darle atomos!!!

Son una excelente herramienta sobre todo para mantener un sitio, con el uso de variables y funciones se pueden hacer cambios de la temática muy fácilmente.

muchas gracias! la verdad es que si! la practica abre la mente y ayuda a dominar el tema que se proponga

Muy buen aporte, me sentía un poco frustrado con Css, pero cada ves que ahi aportes asi es un motor de motivación

Interesante los preprocesadores se que son muy útiles a la hora del desarrollo frontend 👍.

CSS es muy potente, da una excelente cara a los sitios, les crea una personalidad, pero así a mano es bastante trabajoso, aun así no deja de ser muy interesante

Me gusta mucho usar SASS, pero también me agrada el hecho de que CSS acepta variables y eso te facilita la vida.

Como lo mencionaste, lo más dificil es comenzar pero con un poco de motivación se puede lograr.

También es una buena motivación cuando vemos alguna página que no nos agrada y nos planteamos que haríamos nosotros para hacerla visualmente agradable, que modificaríamos y como lo haríamos 😃

yo subo a github cada avance que tengo desde que hice mi primer nav_bar hasta ya una pagina clonada que no quedo tan parecida a la original pero se va tomando cada vez mas nivel.

Me gusto mucho saber sobre preprocesadores son como un tipo de storybook pero para CSS.
Sólo eh estudiado SASS y me resulto muy emocionante la manera en que en verdad ayuda a mantener un orden de cada elemento.

Siento que tal vez sea mejor aprender un poco mas de CSS crudo antes de empezar a pensar en estos pre-procesadores. CREO . . . Alguien ya los está probando ? Que resultado tuvieron ? Gracias!!

Desde cuando estoy que quiero aprender sobre Preprocesadores CSS ya que aveces de tanto CSS siento que repito y repito lo mismo y hago o siento que hago un código muy sucio.
Pronto estaré empapándome de estos temas.
Por el momento a seguir practicando y practicando como bien lo dice la profesora! 😄

Ahora la pregunta que me hago es cual uso…

Muy bueno, Siempre pa delante, Éxitos 👍

Un nuevo tema por aprender, muchas gracias, más motivado

Me encanta sass

mas que una clase, es un buen discurso de motivación, gracias

Acabo de hacer el landing de snapchat, dure super poco le va agarrando el ojo clinico a esto uno…!

CSS con esteroides HAHAHAHAA

Todavia recuerdo cuando me lanzaron al campo de batalla… directo a Sass sin saber un poco de css

Preprocesadores de CSS = CSS en esteroides 💪🏻

Gracias ! :)✌✔

Aqui hay algunos retos y actividades si quieren practicar

Vengo de tomar el curso de preprocesadores y justo hice este proyecto usando lo que aprendí 😊

Aquí hay un artículo que habla de cual de los preprocesadores puedes eligir:
https://www.lambdatest.com/blog/css-preprocessors-sass-vs-less-vs-stylus-with-examples/

También está postCSS

https://postcss.org/

Ahora si me siento perdido pero voy a estudiar más sobre este tema ya que hasta ahora el CSS siempre lo habia estado utilizando asi como lo habian estado enseñando en todo el curso antes de esta clase

Gracias Profe

Excelente.

Gracias!

muchas gracias a practicar

Platzi tiene varios cursos de Preprocesadores.

Esta genial este curso

cool

Los procesadores son bien importantes, espero poder dominar alguno de los mencionados!

Excelente curso.

Este ha sido por mucho, uno de los dos mejores cursos que he tomado, después del de Git y Github

Muy bueno!

Gracias !

Me encanta utilizar Sass y esta explicación a sido fácil de entender funciona.

Sass 💗

Sigamos aprendiendo en este maravilloso mundo!

voy a empezar aprendiendo SASS

Gracias por la información

Excelente!

Genial!! a darle