Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué es CSS?

21/55
Recursos

Aportes 125

Preguntas 5

Ordenar por:

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

Algunas funciones que se fueron agregando en las diferentes versiones 😃


Fuente

PD: Al parecer ya no habrá más versiones, solo actualizaciones de la misma, es decir, la CSS3.

les dejo algo que me ayudó, me sigue ayudando y me seguirá ayudando y espero yo ayudarla con esto… https://losapuntesdemajo.now.sh/ además lo que hace con CSS es tremendo… saludos

Definitivamente el CSS es muy importante

Adoro como explica el profe 💚

HTML

CSS

CSS
Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina ya sea color, tamaño, espacios, lugares de posición y más.

Les comparto la documentación de CSS (https://cssreference.io/). Junto con un Curso gratis de YouTube (muy bueno) de 9 horas (https://www.youtube.com/watch?v=OWKXEJN67FE&t=3612s)

Animación con CSS: https://animate.style/

Les comparto la analogía verbal del profe plasmada visualmente 😄

19. Mis apuntes sobre: “¿Qué es CSS?”

CSS significa Cascading Style Sheets.

Se le brinda estilos personalizados a un proyecto.
Una taza que commemora lo indicado.

desarrolle una pequeña info para explicarles como procesa el navegador el css que usamos en nuestra web, esper que les guste 😃

Sin duda lleva mucha práctica Css, para que algo quede lindo !

Es importante saber como funcionan las tecnologías sobre las que trabajamos. El navegador es una de ellas!
https://www.html5rocks.com/es/tutorials/internals/howbrowserswork/

ESPERO Y LES SIRVA ESTA IMAGEN PARA COMPRENDER UN POCO MEJOR 😄

No sé, pero siento que en relación al tema de html se queda bastante corto, de pasar de listas a formularios y por último solo un button eso no siento que me este ayudando a aprender.

Una web de referencia es la del gran Manz sobre CSS (además de HTML, JavaScript y otros varios).
 
Recomendable su canal de twitch donde hace virguerías en CSS, podéis verlos en ManzDev y tenéis toda la información en Manz.dev

Un saludo y gracias.

Una herramienta que los podrá resultar útil en algún momento. Cheat Sheet para CSS3: https://websitesetup.org/css3-cheat-sheet/

CSS

  • Cascading style sheet, es el complemento que necesitamos para poder dar estilos a nuestras etiquetas de html.
  • Función en forma de cascada
  • Su extensión es “.css”

21.-¿Qué es CSS?

Cascading Style Sheets-Documento que aplica los estilos en forma de cascada (de arriba a abajo). Cascading también es el nombre del algoritmo que aplica el navegador al implementar todos los estilos. Este es el estándar que usaremos para estilizar nuestro proyecto.

HTML sería el lápiz, CSS los colores, adornos, tijeras, etc.

Les dejo este recurso para complementar lo que estaremos viendo en CSS.
Da click aqui ‼️. CSS-Tricks es una comunidad enfocada en css pueden encontrar artículos, guías y definiciones.

Comunidad que nunca para de aprender, les dejo aquí un recurso para que a medida que sigan el curso le den un ojo a la documentación de CSS, esto les ayudará para que comprendan mejor algunos conceptos y de paso aprendan cosas nuevas.
https://developer.mozilla.org/es/docs/Learn/CSS

CSS significa cascading style sheets en español hoja de estilo en cascada… como lo dice su nombre, es la que le da estilo, colores, formas, lo que hace bonita a la pagina web cuando ya se tiene la estructura, una pagina bien diseñada, con bonitos colores y formas llama la atención del usuario.

Les comparte un proyecto que estoy haciendo como práctica para el curso

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Este sera mi proyecto de un blog mientras aprendo HTML & CSS"> 
    <meta name="robots" content="index,follow">
    <title>Login Page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Esta sera mi cabezera y aqui solo ubicare un 
    el logo a la izquierda -->

    <header>
       <nav>
           <figure>
            <img src="https://www.flaticon.es/svg/vstatic/svg/13/13706.svg?token=exp=1613319843~hmac=ad81f8a2b1fd3b10366a64517168dcd4" alt="logo-html-5">
           </figure>
       </nav>
    </header>

    <!-- Este es mi main y es donde estara ubicado un frase 
    muy breve junto con la caja de inicio de sesion -->

    <!-- la frase sera ubicada a la izquierda y la caja a 
        la derecha -->

    <main>
        <section class="container-text-intro">
            <h1 class="intro">
              Entra y juntos ! exploraremos este 
              maravilloso mundo.
            </h1>
        </section>
        <section class="container-sig-in">
               <form action="">
                   <label for="mail">
                       <Span>Usuario o correo</Span>
                       <input type="mail" type="text" id="mail" autocomplete="email" required>
                   </label>
                   <label for="password">
                       <div class="container-password?">
                        <Span>Password</Span> <a href="">Olvidastes tu contraseña?</a>
                       </div>
                       <input type="password" type="text" id="password" autocomplete="current-password" required>
                   </label>
                   <label for="sig-in">
                       <input type="submit" value="Iniciar Sesion">
                   </label>
               </form>
        </section>
    </main>

    <!-- mi footer estara conformado por palabras linkeadas 
        tres a la izquierda y cuatro a la derecha -->

    <footer>
       <div class="container-link-footer-left">
         <a href="">Politicas</a>
         <a href="">Anuncios</a>
         <a href="">Noticias</a>
       </div>
       <div class="container-link-footer-right">
          <a href="">Informacion</a>
          <a href="">Jeffer Steven</a>
          <a href="">Login Page</a>
          <select name="cursos" id="">
            <option value="JavaScript">JavaScript</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
            <option value="UX">UX</option>
            <option value="UI design">UI design</option>
        </select>
       </div>
    </footer>
</body>

</html>

![](

Segunda parte del aporte de estudio, la primera parte se encuentra al inicio de html.

https://learn.shayhowe.com/advanced-html-css/performance-organization/

Cómo funciona CSS en el navegador:

🎨 CSS es un lenguaje que permite darle estilo a elementos HTML.

¿Ahora CSS? ¿mucho que aprender? …
¡Aquí vamos de nuevo!╰(‵□′)╯😈

me gusto la definicon HTML es el lapiz, para colocar la infomacion y CSS son los colores para embellecer la carta

La analogía de la carta es perfecta!
HTML para escribirla y CSS para darle estilos, pegar imágenes, fotos, crear objetos circulares y mucho mas!

Información resumida de esta clase
#EstudiantesDePlatzi

  • CSS = Cascading Style Sheets, quiere decir que aplica los estilos en forma de cascada

  • HTML es el lápiz con el que escribimos una carta y CSS es el estilo o diseño que le damos a esta carta

Os dejo por aquí una hoja de estilos css que se llama

normalize-css

Se usa para mejorar como se ven las cosas en todos los navegadores y ya luego poner tus propias cosas de CSS.

Creo que a esto se le llama reset css y es buena práctica.

Os pongo unas webs para más info y el repo:
https://ageek.dev/normalize-css
https://necolas.github.io/normalize.css/
https://ageek.dev/css-resets
https://github.com/necolas/normalize.css/

Un saludo

Con CSS se tunea el código HTML

HTML es la estructura como nuestro esqueleto y CSS seria la piel, lo bonito, lo grafico

CSS Es el maquillaje de HTML para que se vea bonito jaja

Una práctica que a mi me gusta hacer es visitar páginas conocidas y quitarles todos los estilos CSS, ahí es cuando te das cuenta de por qué CSS es tan importante

The CSS Cascade is the algorithm by which the browser decides which CSS styles to apply to an element — a lot of people like to think of this as the style that “wins”. Source

juntando todo lo aprendido


  • CSS —> Cascading Style Sheets (Hoja de estilos en cascada)

    colores, dimensiones, figuras

EMPECEMOS …

Por lo que veo CSS en especial la versión CSS3 es muy potente. Es decir, puede reemplazar muchas funciones que hasta ahora solo se podían hacer con javascript.

Aquí empieza lo bueno 🤣

HTML: Es usado para el contenido.
CSS: Es usado para los estilos.
JavaScript: Es usado para la interactividad.

Historia

Håkon Wium Lie, CTO de la compañía Opera Software y cocreador del estándar CSS
CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994.9​ Al mismo tiempo, Lie trabajaba con Tim Berners-Lee en el CERN.10​ Muchos otros lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones en las listas de correo públicas dentro del W3C dieron lugar a la primera Recomendación CSS por el W3C (CSS1)11​ en 1996. En particular, la propuesta de Bert Bos fue influyente; él fue el coautor de CSS1 y es reconocido como el cocreador de CSS.12​

Las hojas de estilo han existido de una forma u otra desde los comienzos del Standard Generalized Markup Language (SGML) en la década de los 80s, y CSS fue desarrollado para proveer hojas de estilos para la web.13​ Un requerimiento para un lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como DSSSL y FOSI no fueron adecuados. CSS, por otro lado, permite al documento ser influido por múltiples hojas de estilo por medio de los estilos en «cascada».13​

A medida que HTML fue creciendo, llegó a abarcar una amplia variedad de capacidades de diseño para satisfacer las demandas de los diseñadores web. Esta evolución dio al diseñador mayor control sobre la apariencia del sitio, con el costo de un HTML más complejo. Variaciones en las implementaciones de los navegadores web, como ViolaWWW y WorldWideWeb,14​ hicieron más difícil la consistencia de la apariencia del sitio web, y los usuarios tenían menos control sobre cómo era mostrado el contenido web. El navegador/editor creado por Tim Berners-Lee tenía hojas de estilos que fueron introducidas dentro del programa. Las hojas de estilos, por lo tanto, no eran enlazadas a los documentos en la web.15​ Robert Cailliau, también del CERN, quería separar la estructura de la presentación, de modo que diferentes hojas de estilo podrían describir diferentes presentaciones para impresión, pantallas y editores.14​

💚
.

ya lo dije, css == maquillaje

![](

Genial, ahora CSS.
Estoy ansioso 😄

Tenía muchas ganas de empezar con esta parte ya, la hora de aplicar estilos.

Arrancamos con CSS.

CSS: Es la magia para que el proyecto se mire bonito

ol {
  margin-left: 1%;
  display: flex;
  align-items: center;
}

img {
  border-radius: 10%;
  margin-inline-start: 5%;
}

a {
  color: rgb(255, 255, 255);
  font-size: small;
  margin: 1%;
  scroll-margin: 10%;
  margin-left: 2%;
}

li {
  color: rgb(255, 255, 255);
  font-size: small;
  margin: 1%;
  scroll-margin: 10%;
  margin-left: 2%;
}

.category {
  font-size: large;
  color: rgb(244, 128, 255);
  margin-top: 2%;
  text-shadow: 0 0 5px rgb(255, 0, 221), 0 0 10px rgb(255, 0, 212),
    0 0 20px rgb(150, 0, 117), 0 0 40px rgb(98, 0, 117),
    0 0 80px rgba(38, 104, 127, 1), 0 0 90px rgba(38, 104, 127, 1),
    0 0 100px rgba(38, 104, 127, 1), 0 0 140px rgba(38, 104, 127, 1),
    0 0 180px rgba(38, 104, 127, 1);
}

body {
  background: rgb(0, 0, 27);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

Vamos a darle estilo a esto

Que emoción, lo poco que conozco de css me encanta y ya quiero saber más 😃

HTML es la estructura
CSS el diseño
bueno es lo que entendi 😃

Si te gusto mi proyecto, te dejo ahora el CSS

body
{
    color: rgb(0, 0, 0);
    text-align: center;
    font-family: Arial;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

#cabecera
{
    background: rgb(255, 0, 0);
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.5);
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin: 0;
    padding: 0.5em;
}
#cabecera #logo
{
    width: 50px;
    vertical-align: middle;
}
#cabecera #tagline
{
    padding: 0 0 0 1em;
    font-weight: normal;
    font-size: 0.8em;
}

#container
{
    width: 70%;
    padding: 0;
    text-align: left;
    border: 1px solid rgb(206, 206, 206);
    margin: 0 auto;
}

#container h1
{
    font-size: 20px;
}
#post
{
    padding: 1em;
}

Por fin voy a complementar de una vez por todas todo el tema de CSS ya vi algo en el Curso de FrontEnd 2019 y me parecio interesante

CSS: Cascading Style Sheets
Diseño Web

Pequeño grupo de comandos de bash que usé en este curso mientras desarrollaba y comentaba cada clase en la terminal integrada de VSC vía WSL2 con Ubuntu 20.04:

cd … && cp -r clase_anterior clase_actual && cd clase_actual && mv clase_anterior.css clase_actual.css && code -r clase_actual.css && code -r index.html && cd … && echo Successssssssssssssssss | lolcat

Quizás te sirva, o quizás tengas uno mejor. En ambos casos buenas cosas ocurren, y, recuerda: nunca pares de aprender ((((:

¿Qué es CSS?

¿QUÉ ES CSS?
Hojas de estilo en cascada (CSS) es un mecanismo simple para agregar estilo (por ejemplo, fuentes, colores, espaciado) a los documentos Web.

Web W3C

Genial el curso !!! la verdad todo super hasta el punto de Html, ahora empezamos full con Css

HTML es la forma en como estructuramos la información y CSS es como decoramos o le ponemos estilo a la información.

CSS es increíble!

CSS es el encargado de dar apariencia a los sitios.

CSS 😃💚

Genial

Estoy super feliz de empezar a aprender CSS para darle vida a mis proyectos y tambien para poder pasar una clase avanzada de CSS en el college para el sigueinte semestre.

Excelente grafica mostrándonos las evoluciones de CSS.

Genial, empecemos con CSS

Genial me quedo muy claro gracias degranda

Para añadir CSS es todo lo hermoso que se puede ver del proyecto en un navegador.

Es uno de los mejores profesores de Platzi

Esto será genial

Here’s the definition from the CSS Cascade Level 4 Spec.

The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.

Source

CSS es un documento que aplica todos los estilos de forma de cascada, lo vamos a estar utilizando para estilizar nuestro proyecto, se refiere a aplicar la parte de colores, aplicar la parte de dimensiones, incluso mostrar todos los elementos de html no como cajas sino con otro tipo de figuras como círculos o demás.

Let’s go 😎

CSS Cascading Style Sheets (Hojas de Estilo en Cascada) La forma en la que le damos un estilo visual para que todos puedan verlo, y no solo sea texto aburrido.

muy buena explicacion

Explica muy bien el profesor

El Feature de los quiz que te llevan justo al momento de la clase donde esta la pregunta donde fallaste esta brutal, es una de esas cosas que hacen que platzi valga oro

Que es CSS: Las hojas de estilo en cascada es el archivo que le aplica los estilos a un sitio web en forma de cascada, leyendo el código de arriba hacia abajo.

Una cosa de locos 👏

Genial lo visto hasta ahora !

CSS (cascading style sheets)

gran clase

Muy interesante aprender a programar desde ceros y no depender de una plantilla.

En pocas palabras, CSS permite que el HTML se vea bonito!

CSS (Cascading Style Sheets), lo cual indica que es un documento que aplica todos los estilos de forma de cascada. Cabe resaltar que cascading es el nombre del algoritmo que aplica el navegador al momento de implementar todos los estilos. Este es por ende, el estándar que utilizaremos para estilizar nuestro producto y no mostrar el formato plano de HTML.