Hand-craft a mano un sitio web de estilo de 8 bits | Kalob Taulien | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Hand-craft a mano un sitio web de estilo de 8 bits

teacher avatar Kalob Taulien, Web Development Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Intoducción

      0:39

    • 2.

      Instalación de 8 bits

      2:40

    • 3.

      Barra de navegación

      2:22

    • 4.

      Agregar una cuadrícula

      1:38

    • 5.

      Globo de bienvenida de 8 bits

      2:57

    • 6.

      Disposición de dos columnas

      1:30

    • 7.

      Secciones de 8 bits

      2:10

    • 8.

      Secciones oscuras de 8 bits e iconos

      1:50

    • 9.

      Iconos sociales de 8 bits

      1:58

    • 10.

      La columna derecha

      3:24

    • 11.

      Sección grande de 8 bits oscuros

      2:30

    • 12.

      Sección de 8 bits de luz grande

      1:25

    • 13.

      Sección de perfil de 8 bits

      5:57

    • 14.

      Espaciado de 8 bits

      4:42

    • 15.

      El pie de página

      1:26

    • 16.

      Completar el proyecto

      1:28

    • 17.

      Resumen

      0:39

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

281

Estudiantes

6

Proyectos

Acerca de esta clase

¡Bienvenido a crear un sitio web de 8 bits!

Diseñaremos y codificaremos un sitio web de 8 bits de estilo retro, que parece que encaja con los juegos de Nintendo de los 90. Puedes adaptar este curso, código y diseño para que sea lo que quieras: un sitio web de carteras, un sitio web de aficiones o un sitio web de resumen. En este curso crearé una página web de currículum vitae, ¡pero definitivamente no dudes en cambiar el contenido! Usaremos HTML y CSS súper simples para que este trabajo funcione.

*Deberías estar un poco familiarizado con HTML básico y CSS para sacar el máximo partido a este curso. ¡El conocimiento inicial de HTML está bien!

Conoce a tu profesor(a)

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Profesor(a)

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Intoduction: Hola y bienvenidos a diseñar una página Web de ocho bits conmigo. Caleb. Colleen, te voy a mostrar en la próxima hora más o menos. ¿ Cómo se crea un sitio web de ocho bits como este con un sistema de cuadrícula personalizado usando una biblioteca de ocho bits. Entonces todo se ve realmente genial. Retro. De esta manera. Voy a estar creando un sitio web tipo currículum, pero quizá quieras crear un sitio web basado en hobby o un sitio web basado en portafolio. De cualquier manera, puedes adoptar todo en este curso a tus necesidades. Entonces si esta página web te parece bastante emocionante, ven únete. Me encantaría mostrarles exactamente cómo lo hice, y empezaremos en el siguiente video. 2. Instalación de 8-bit: todo bien. Oye, gracias por acompañarme aquí. Vamos a empezar a crear esta página desde cero. Entonces lo primero que tenemos que ver con cualquier proyecto basado en desarrollo Web es que necesitamos abrir a nuestro editor. Por lo que estoy usando un editor llamado V s Code. Es completamente gratis. Pero si estás usando un editor diferente, también puedes usar algo como Adam o texto sublime. O, ya sabes, si tu poco más vieja escuela sin almohadilla plus incluso Dreamweaver está fresco de nuevo, realmente no importa. Brackets es otro popular para esto. Voy a estar usando código V s ahora. primero es lo primero, necesitamos nuestra plantilla HTML, pero primero necesitamos guardar este archivo. Entonces solo voy a crear un nuevo archivo y guardar esto como un pit dot verdadero Nazi SS inicio HTML. Queremos un archivo HTML, y simplemente voy a crear un nuevo código HTML de cinco Plantilla V s viene con un bonito atajo. Me permite escribir html Colin five hit tab, y se siente todo esto fuera por mí. Entonces voy a llamar a este currículum de Caleb algo así. Realmente no importa cómo lo llamemos. Viene con algún contenido de primer móvil automático, por lo que básicamente, esto funcionará en tu dispositivo móvil. Eso es realmente bonito. Entonces sigamos adelante y abrimos este archivo en nuestro navegador. Solo estoy usando Firefox. Puedes usar Cromo's a ardiente Cualquier cosa que te guste, y vemos una página básica aburrida. Aquí no hay nada digno de mención, por lo que necesitamos instalar nest dot CSS. Así que vamos a seguir adelante y Google nest dot CSS y nos va a traer justo aquí. Esta es la página que queremos. Queremos dar click en el Read Me para que podamos ver cómo lo instalamos. Exactamente. Google enfriar todas las cosas. Aquí está el que queremos. Queremos lo último. Entonces es copia que Ponga eso dentro de nuestra cabeza y justo como ejemplo, sigamos adelante y sigamos adelante y, ah, vamos a copiar algo de este código para que podamos ver que en realidad está funcionando. ¿ Qué hace algo realmente notable aquí? Botones, botones o perceptibles? Entonces sigamos adelante. Copiar todo eso, e iba a pegar esto en mi cuerpo aquí. Refresca mi página y ja ja ja! Mira eso. Tenemos algunos estilo de ocho bits ya, Así que en tan solo unos minutos, nuestro sitio ya está empezando a lucir muy ocho bits. Esto es realmente, realmente genial, pero no es exactamente lo que estábamos buscando. Así que adelante y asegúrate de tener instalado el CSS de nest dot. Solo estoy usando la versión de los hombres ified de las últimas versiones que obtenemos las últimas actualizaciones una vez que tengas eso instalado cabeza encima al siguiente video y vamos a crear en barra de navegación. 3. Barra de navegación: Muy bien, bienvenido de nuevo. En la última lección, agregamos un montón de botones para asegurarnos de que nuestro estilo funcionara desde el CSS de nest dot. Ahora necesitamos crear una navegación completamente nueva. Entonces eso es tipo. Ahora démosle un poco de estilo básico aquí, así que esto solo está en línea. CSS. Esto es algo feo, pero también podemos sacar esto a algo un poco más manejable un poco más tarde. Hagamos un borde inferior tres píxeles. C C C C C y vamos a hacer un margen inferior de no sé, 60 picks o algo así. Guardemos eso y refresquemos nuestra página, y tenemos un NAFO aburrido. Pero mira eso. También tenemos un bonito cursioncito ahí que se ve bastante cool. Sigamos adelante y agreguemos el nombre del sitio aquí, así que está creando H dos elementos. Y llamemos a esto Caleb Holley, y lo llamarías como sea tu nombre o como sea, realmente quieres llamarlo mío. Simplemente va a ser un poco de currículum buscando sitio web, y así esto no parece que realmente esté haciendo nada, y realmente queremos esa fuente nido. Entonces, ¿cómo obtenemos esa fuente nido? Bueno, si volvemos a entrar en el leeme, nos dice exactamente lo que necesitamos dio. Adelante y agarremos esta línea aquí. Y esto simplemente se va a instalar lo deseado formado a partir de Google Funds. Por lo que golpea Save head on sobre nuestra página de currículum. Se mira eso. Eso se ve bien ahora, ¿no? Ahora, si entramos aquí, también tenemos algunos iconos. Busqué iconos y encuentro el que buscaba. Pero digamos que quería la moneda. Yo inspeccionaría elemento. Y este es el HTML que quiero con esa clase. A lo mejor no las grandes clases grandes, pero esta es la que quiero. Entonces sigamos adelante y sumamos eso en el encabezado aquí. Clase DIV. Vamos a las clases ahí dentro y eso en realidad no se supone que sea un chapuzón en el que se supone que esté. Pongo eso en líneas separadas. Esto se vuelve un poco más legible. Guardar y refrescar. Echemos un vistazo a cómo se ve una página ahora. De acuerdo, tenemos esta enorme moneda. Es demasiado grande. Ah, también tenemos es medio. Sigue siendo demasiado grande. Tenemos es pequeño demasiado pequeño, y entonces sólo tenemos por defecto Coin. Ese es el que queremos. Ahí mismo. Ahora, este momento punto, como que queremos centrar esto, pero realmente no tenemos una manera de centrar esto. Entonces en el siguiente video, vamos a agregar un sistema de cuadrícula. 4. Añadir una cuadrícula de cuadrícula: está bien, Necesitamos instalar un sistema de rejilla. Entonces vamos a seguir adelante y subirnos a la máquina de Google y tecleemos en flex box grid y esto nos va a dar. Básicamente, puedes ver si estás familiarizado con Bootstrap. Nos da bootstrap como columnas, y todo lo que tenemos que hacer es agregar un poco de CSS. ¿ Queremos descargar? No. Vayamos a buscar a Hub. Vamos a ver qué tiene para nosotros aquí dentro el léame. Ah, tenemos un cdn, una red de entrega de contenidos. Este es el que queremos. Adelante y copiemos todo eso. Echemos esto al frente de nuestra página también. Hagámoslo un poco más pequeño y muevo esto solo un poco. Y así ahora tenemos nido CSS. Tenemos nuestros forints ahí dentro y tenemos un sencillo sistema de cuadrícula. Ahora. Lo que este sistema de cuadrícula nos permite hacer es si tan solo hago clic aquí atrás, podemos crear pequeñas columnas como esta. Podemos crear hasta 12 columnas y les podemos decir en qué orden necesitan ser en lo ancho que necesitan estar ahí dentro automáticamente respondiendo, lo cual es realmente bonito. Entonces si te interesa una caída en el reemplazo de rejilla flex box grid es increíble. ¿ Por qué de la forma en que puedes anidarlo también? Esa es una grande. Vamos a trabajar un poco con nosotros, Um, Um, s Así que si no estás familiarizado con eso, está bien. Siempre puedes ir a flex box grid dot com. Sigamos adelante y actualicemos tu página. Vemos que no ha pasado nada. Entonces si abrimos código de estudio visual y justo dentro de nuestro knave aquí agregamos un contenedor elementos. Entonces esto es solo un div, y esto simplemente va a agregar algo de relleno para nosotros o realmente simplemente le mandó un contenido de la forma que queremos. Entonces es refresco. Y ahí vamos. Nuestro contenido está centrado. Entonces eso es agregar cuadrícula de flex box 5. Globo de bienvenida de 8 bits: Está bien, sigamos adelante y sumamos un poco introductorio. Una pequeña foto de mí con una pequeña burbuja diciendo Hola. Mi nombre es Caleb algo, algo. Algo. Entonces vamos a crear ese primer top escuchado que vimos originalmente. Y de hecho, así es como se va a ver la página web final. Por lo que queremos crear esta sección aquí con las caritas dice Hola, soy Caleb. Esto es todo sobre mí con el corazoncito. Emoji, sigamos adelante y creemos eso ahora. Entonces si abrimos nuestro código y debajo de nuestro ahora vamos a querer crear un nuevo contenedor, Esto va a mantener todo nuestro contenido contenido en el formato central. Entonces si miramos cómo todo está alineado a la izquierda y todo está alineado a la derecha , ese va a ser nuestro contenedor. Por lo que ahora necesitamos agregar una nueva fila. Esto es de nuestra rejilla flex box. Esta es la caída en el reemplazo de rejilla. Vamos a añadir una columna aquí. Vamos a sumar uno más. Llámalo aquí. Digamos que éste le va a llamar el lapso. Un pequeño lapso de nueve. Ah, y tal vez una columna con un lapso extra pequeño de 12. Y echemos un vistazo a cómo se ve esto izquierda-derecha, y echemos un adelanto aquí, izquierda y derecha. Entonces, ya sabes, no hay gran cosa aquí. Podemos ver que tenemos un bonito Funt teniendo lugar, pero en realidad no está haciendo nada que necesitemos. Entonces ahora tenemos que ir y encontrar un ícono aquí. En realidad no es un ícono. Supongo que esto pasó, Este tipo de aquí, sigamos adelante e inspeccionarlo, y en realidad podemos simplemente mirar el código fuente aquí en adelante, y podemos simplemente tomar eso. Eso es lo que necesitamos ahí mismo. Vamos a seguir adelante y solo agreguemos eso ahí dentro y refresquemos nuestra página oficial uno en la que estamos trabajando y tenemos un amiguito, así que eso es bastante genial. Y entonces necesitamos un globo aquí y queremos básicamente sólo esto. Entonces sigamos adelante y copiemos vestidas esas líneas. Pon eso en la sección correcta, y esto va a saludar, Nesta en CSS. Eso es bastante guay. Mira eso. Estamos llegando a algún lugar, pero en realidad queríamos saludar me matan. Esto es todo sobre mí. Entonces sigamos adelante y sumamos eso en. Aquí digamos que soy Caleb. Esto es todo sobre mí. Pero necesitamos ese icono del corazón. ¿ Dónde está ese icono del corazón? Entonces sé que está aquí en alguna parte. Podemos simplemente hacer click derecho, inspeccionar o, ya sabes, solo entramos aquí, agarramos este icono del corazón Pace Ese ícono duro ahí dentro, este no es grande, creo, en realidad querer es pequeño. Esto va a tener que ser bastante pequeño buscando que coincida con tu tamaño de fuente aquí. Así que ja! Ahí es así. Haznos un paso más grande también. Y así es como conseguimos a este pequeñito de arriba aquí, esta pequeña burbuja. Y no lo olvides, puedes actualizar tu proyecto de participación de habilidades con tu progreso actual. Muéstrame cómo viene. Me encantaría ver tu progreso y ayudarte si te quedas atascado en cualquier parte 6. Diseño de dos columnas: bien. A continuación necesitamos crear un sistema de dos columnas. Tenemos aquí nuestras columnas izquierdas y luego tenemos nuestra columna derecha aquí. Entonces en la columna de la izquierda, tenemos cosas que hacer. Conoce dónde estas mis sociales y columna derecha Tenemos frente y conocimiento atrás y conocimiento, construir herramientas y experiencia previa. Vamos a seguir adelante y configurar primero nuestro layout. Entonces para esto, solo queremos abrir nuestro expediente. Vamos a seguir adelante y crear de nuevo un contenedor nuevo, porque ¿por qué no? Y aquí dentro necesitamos crear una nueva fila. Porque si miramos todo esto aquí dentro, esta es una fila que cruza la derecha, y sucede. Tener dos columnas. Entonces vamos a crear una fila con dos columnas en año. Eso es Ah, hagamos esta primera columna Un medio de cuatro y tal vez un tamaño de columna cuando sea pequeño, es 12 y columna extra. Pequeño también va a ser 12. Y para que lo sepas, todo lo que hice fue escribir el selector CSS y el código envidioso. Podría simplemente golpear Tab y automáticamente lo llena para mí con un diff, así que eso es bastante genial es un atajo ahí, y luego aquí tenemos que hacer básicamente lo contrario. Necesitamos columna mediana ocho. Por lo que queremos hacer un lapso de ocho a través para un total de 12. Entonces son cuatro aquí, ocho años para un total de 12. Así de grande es nuestro sistema de red. Hay 12 columnas en nuestro sistema de rejilla y aquí también queremos hacer cool ya que ellos 12 Carbón exceso 12. Dash 12. Eso es un derecho, y esto va a decir izquierda. Vamos a ver nuestra página. Ahí vamos. Tenemos izquierda y derecha. 7. secciones de 8 bits: está bien, Queremos agregar una pequeña sección aquí que diga cosas que hago. Y para ti, esto podría ser diferente. Entonces para mí, soy desarrollador web, diseñador web y profesor para ti. Podrías ser estrictamente, ah, diseñador web. O tal vez eres un maquinista manual, y te gustan los ocho bits tipo de estilo. Sea lo que sea, puedes colocar el contenido de la forma que quieras. Voy a estar haciendo mi propio currículum. Pero, ya sabes, Taylor, tu dedo del pie para que te convenga, la forma en que querías aparecer. Entonces lo haces Vamos adelante y agreguemos eso No. Entonces en su sección izquierda aquí, voy a deshacerme de la palabra izquierda, y quiero añadir un contenedor ness con el título. Esto es muy eran mayormente nombre. Entonces esto es realmente bonito h tres. También le digamos que es un título y digamos cosas que me dio solo me gusta ver especie de donde conocí. Entonces hago estos pequeños incrementos y refresco mi página. Entonces dice cosas que hago. Trabajaremos en el espaciado y todas esas cosas un poco más tarde para Ahora va a parecer un poco apretado, pero lo espaciaremos al final. Entonces tenemos un título aquí. Cosas que hago. Vamos a seguir adelante y crear un nuevo Devyn aquí, sólo una especie de contenedor, supongo, Y está creando nueva lista. Y así vamos a decir que esto es, uh, listas. Y entonces vamos a darle una lista de nido y el es tipo de círculo, y de donde estoy sacando eso es, si solo vuelvo a la documentación aquí, tenemos lista en algún lugar de aquí. ¿ Dónde están las listas? Ahí tienes listas, y así clases. Listas sobre Una UL en aquí lista nido es disco y luego solo aliados regulares, y en realidad se puede ver que cometí un error aquí. Que esos se supone que son UL no es dibs. Y vamos a seguir adelante y crear un aliado regular. Entonces voy a decir mi primer punto, soy desarrollador Web. Otro elemento de lista de Aliado. También soy diseñador Web. Vamos a crear otro aliado. También soy profesora. Vuelve a nuestra página y dale una actualización a esto. No resultó del todo de la manera que esperábamos. Algo anda mal aquí dentro. Y esto sólo significa que tengo un tipo de algún lugar es círculo. Esa es la mesita de ahí. Hit. Refrescar. Ahí vamos. Tenemos pequeños círculos. 8. sections AS secciones e icons de 8 bits: Muy bien, Siguiente, sigamos adelante y creamos. Es digno de mención aquí dentro. Este va a ser oscuro y tiene un poco de cosas extra aquí. Entonces sigamos adelante y cambiemos el estilo. Entonces en lugar de usar un bloque blanco, vamos a usar un bloque negro, y sólo queremos que eso esté justo debajo de las cosas que hago. Por lo que seguimos en la columna de la izquierda aquí. Lo que voy a hacer es simplemente colapsar esto aquí y voy a crear otro contenedor de nido con títulos. Esto es sólo CSS es oscuro hit Tab Auto siente por mí. Eso es bastante guay. Adelante y danos un título. Entonces H tres puntos título y decir No Digno's Hey, mira eso. Entonces tenemos una sección negra otra vez. El espaciado y aquí realmente no se ve muy bien, pero vamos a arreglarlo al final, adelante y crear otro contenedor sólo por el bien de contenedor subiendo cosas. Ahora quiero crear ah pequeñito icono aquí, así que es do yo ness icono. Dot es pequeño porque quiero uno pequeño y quería ser un corazón, y soy una manera decirle a CMS core member Wait tell es el sistema de administración de contenido más popular y más usado de Python , y en realidad estoy en ese equipo de cancha, así que eso es bastante guay. Poco punto digno de mención, supongo. Ah, y si quisiera otro aquí, sólo podría hacer otro div. Yo consigo, digamos, dame un elemento I. También va a ser un icono de nido. Va a ser que va a ser pequeño y quiero que esto sea una estrella y digamos que 250 mil estudiantes en todo el mundo algo así. Entonces estos son poco destacables se trata de mí, en realidad no quiero que dentro del ojo que yo elemento es por sí mismo. Página de actualización Boom. 250,000 estudiantes fueron dedo del pie miembro de CMS con bonitos iconos de ocho bits 9. icons los íconos sociales de 8 bits: todo bien. Siguiente sección son los mis sociales. Vamos a seguir adelante y crear pequeños iconos sociales. Y por cierto, si voy un poco rápido por ti, no lo olvides. Siempre se puede hacer referencia flex box grid dot com o nostálgico Dashti evaluar dot get hub dot io slash nest dot CSS. Honestamente sólo Google este año porque ese es un poco difícil de recordar, y todo está disponible para nosotros aquí dentro. Entonces vamos a crear una pequeña sección de enlaces sociales donde la gente pueda ir y supongo, búsquame. Entonces lo que voy a hacer es cerrar eso. Eso está bien. Contenedor Div Ness. También tiene título. Vamos a darle a este título un titulo de tres puntos hit tab, y solo crea todo el elemento para mí. Llámala mis sociales. Entonces aquí voy a crear otro contenedor sólo por el bien de crear ese contenedor. No hace daño tener esa capa extra ahí dentro, y solo voy a crear un enlace. No va a ir a ningún lado en particular ahora mismo. Yo solo quiero que esto demuestre su deseo de que este sea un enlace que demuestre que tengo una Nikon aquí. Entonces Ness icono Twitter, Tweeter. Ahí vamos. Refresca un bam! Ahí está Twitter y podríamos hacer esto una y otra vez. Por lo que acabo de copiar y pegar eso cuatro veces. Y si quiero un Facebook aquí, Así que cambiemos esto a Facebook. Este va a ser mi hub get, y éste va a ser YouTube. Adelante y refresquemos sus Tenemos iconos. Ahora bien, si estás buscando otros iconos, aquí hay una tonelada de iconos. ¿ Dónde estás? Pero el golpe de, uh, uh, aquí están los iconos del sitio de redes sociales. Entonces tenemos Twitter, Facebook, Facebook, insta get hub Google Gmail, medio Lincoln, todo tipo de otros ahí dentro. Entonces puedes usar todos estos y otra vez si no estás seguro de cómo se llaman solo abre ese código fuente haciendo clic en este botón y simplemente viendo el que quieres un esquema de copiar y pegar y funcionará exactamente para ti. Y así ahora tenemos sociales 10. La columna correcta: Muy bien, ahora necesitamos trabajar en nuestra columna derecha. Por lo que 1er 1 que tenemos aquí es frente y conocimiento, espalda y conocimiento construir herramientas que experiencia previa. Vamos a seguir adelante y crear uno a la vez. Por lo que su creador, frente y conocimiento para ti, esto podría ser totalmente diferente también. Esto podría no ser frente en el conocimiento. Este podría ser tu juego de mesa favorito, una lista de miembros de la familia o cualquier cosa que te guste. Pero lo que he establecido aquí es que tengo una habilidad particular y lo bueno que soy en esa habilidad. Entonces html cinco, soy como 95% bueno en html cinco. Creo que CSS tres. Creo que soy como 90% bueno. A CSS tres JavaScript. A lo mejor no soy demasiado bueno un JavaScript. Por lo que tenemos aquí estas barras de salud para una especie de decirnos lo bueno que soy en una habilidad particular. Vamos a seguir adelante y crear la primera sección de frente y conocimiento. Y de nuevo, esto depende totalmente de ti. Voy a derrumbar esta sección. Esto depende totalmente de ti. Cómo quieres diseñar esto con un contenido que te guste. Entonces primero lo primero necesitamos un contenedor ness con título, podríamos ir adelante dada la edad tres de frente de título y conocimiento. Sólo cosas que soy ya sabes, Vale, en y aquí necesitamos usar más de nuestro sistema de grilla. Vamos a seguir adelante y crear una nueva fila. Y en esta fila necesitamos dos columnas que necesitamos. Llama a cuatro pequeños, solo cuatro columnas a la izquierda y digamos que cuando está en extra pequeño gastado todo el camino a través de la columna de sopa, 12 extra pequeño iba a ocupar el ancho completo. ¿ Y sabes qué? Pongamos esto en una línea, porque creo que podemos salirnos con la suya ese html y luego igual que cinco llaman sm, entonces tenemos que hacer lo contrario. 12 menos cuatro es ocho fresco exceso 12. Y aquí dentro queremos crear una barra de progreso, así que progress dot nest progress dot es el éxito. Te mostraré de dónde estoy sacando estos en tan solo un segundo y aquí pongamos esto en líneas separadas también para que podamos leer esto. Se nos permite tener todo este espacio en blanco también podría usarlo. El valor es igual a 95 y el máximo va a ser 100. Vamos a seguir adelante y a ver cómo se ve esto. Culo Pon eso en una línea más. Justicia que se ve fea. Hermosa. Refrescar mi página HTML cinco no barras. Un poco grande. Vamos a cambiar eso un poco más tarde. Y ahora todo lo que voy a hacer es tomar toda esta fila y la voy a copiar dos veces más . Entonces hay uno. Y también hay. Y quiero que el 1er 1 no sea html. Yo quiero que esto sea CSS tres. El progreso va a ser de 90. Es el éxito. Sí, creo que soy bastante bueno en ello. Digamos que éste va a ser JavaScript, y éste va a ser una advertencia. Te mostraré de dónde saca ese estilo en tan solo un segundo. Eso es que solo soy 60% obtener un JavaScript. Eso en realidad está muy mal. Soy bastante bueno en JavaScript. Pero, ya sabes, para fines de demostración, es bueno tener una pequeña barra amarilla. Y ahí vamos. Igual que eso. Ahora, donde estoy sacando estos estilos es el progreso. Progreso, progreso. ¿ Dónde está el avance? Barra Progreso, Progreso, Progreso. Tenemos bastantes de ellos que podemos elegir desde aquí. Sólo vamos a cambiar ese eso tenemos progreso de nido. Ese es el negro es primario es azul es éxitos. El verde está advirtiendo su amarillo es error. Ese es nuestro rojo y es patrón porque a veces solo quieres un patrón de kart de Mario . Entonces ese es nuestro frente y conocimiento. Voy a arreglar ese tipo de ahí y luego iremos a la siguiente lección. 11. Sección grande de la sección de 8 bits: Muy bien, sigamos adelante y creemos de nuevo en el conocimiento. Aquí tenemos una sección negra, así que esto tiene que estar oscuro. Caleb, ¿de dónde estás oscureciendo? Sí, esa es una gran pregunta. En cualquier lugar que veas una sección oscura aquí, solo podemos hacer habilitarlo Estaba oscuro aquí adentro. Aquí hay una sección oscura para que pudiéramos mirar ese código fuente. Ah, también podemos solo echar un vistazo a los contenedores que tenemos. El contenedor está centrado. Si queremos mandar su título, no vamos a hacer eso está oscuro. Apenas hace un fondo oscuro con un borde blanco. Siempre podemos mirar el código fuente para, y este es el que queremos aquí. Entonces solo voy a copiar esa cabeza en código de estudio visual, y voy a colapsar todo este segundo. Estoy trabajando en solo para que mi código se vea un poco más bonito. Vamos a crear un nuevo Devyn aquí. Este también va a tener un título. Este título va a ser conocimiento back end. Y ahí vamos. Tenemos conocimiento back end. Y de nuevo, así es Cuenca se arreglará cerca del final de este curso eso siguiente. Tenemos que volver a crear básicamente estas tres secciones. Pero esta vez queremos poner Python PHP y no Js. Entonces lo que voy a hacer aquí es ir adelante y otra vez, solo crea una nueva fila. Esto es de nuestro reemplazo de gota en rejilla llamado flex box grid. Ese cool sm cuatro. Esto es exactamente lo mismo que hicimos en el frente y uno fresco acceso 12. Este va a ser pitón tres. Y en lugar de escribir esto una y otra vez, lo que voy a hacer es simplemente copiarlo un poco de advertencia. Cuando se trata de copiar y pegar, No olvides cuando copias y pegas cosas, tienes que cambiar todos los valores y sus A veces nos olvidamos de hacer eso nos pasa a todos . Simplemente no te olvides de cambiar tus valores. Este, creo, es bueno, sin embargo, sin embargo, Así que vamos a seguir adelante y refrescar son demostración de trabajo real aquí. Y mira eso. Tenemos Python tres ahora. Voy a poner estos en una línea sólo una vez más. Ahora solo pongo esos todos en una línea porque quiero seguir adelante y crear otra fila tratando de crear dos filas más Así que pega una más ahí ritmo una más ahí dentro. Arreglar el terrible invento del código V s. No tengo ni idea de por qué hace eso. Sigamos adelante y tecleemos enorme p siete y estoy bastante bien con PHP. Entonces es un 90 el otro va a ser nodo Js node.js. Honestamente no soy muy bueno sin jazz y no quiero que eso diga éxito. Yo quiero que esto sea es un error. Esto demuestra que no soy bueno en ello. Y así tenemos un pequeño bar rojo aquí que dice que no soy bueno sin jazz. El estado de salud de ningún Js es bastante bajo. 12. Sección de la luz grande de 8 bits: todo bien. Por último, contamos con nuestras herramientas de construcción. Este va a ser súper fácil y básicamente va a copiar por delante y conocimiento y cambiar algunos de los valores. Entonces vamos a pasar al código V S, y tengo está actualmente colapsado. Algunos van a seleccionar todo eso. Copiarlo, pegarlo ahí dentro. Y ahora podemos ver que tenemos una sección de sección oscura, y ésta va a ser construir herramientas, construir herramientas. Sigamos adelante y agreguemos aquí empaque Web. ¿ En qué está mi paquete Web? Voy a decir que el Paquete Web está en no 50. Está en el 60%. Ah, y es amarillo. Adelante y agreguemos paquetería dot Js. Este también va a ser amarillo, así que vamos a hacer de eso una advertencia. Este va a ser a los 50 y luego tenemos trago, que no he usado en mucho tiempo. Entonces este va a ser un error, y eso sólo significa que se va a leer la barra y digamos que está al 30%. Sigamos adelante y actualicemos nuestra página de trabajo. Ahí vamos. Tenemos herramientas aquí, construir herramientas Parcela empaquetada web. holandés. Sí, y trago. Y recuerda, solo puedes entrar en la documentación y en cualquier momento en el tiempo, siento que mientras no quiero usar es error para el rojo. Yo quería ser estampada. Puedes usar su patrón o simplemente podrías usar ninguno de ellos. Por lo que solo anidar progreso a default a black, lo que sea que funcione para ti. Te recuerdas, ¿verdad? 13. Sección de perfil de 8 bits: todo bien. Por último, tenemos experiencia previa. Esta es una sección más grande, así que vamos a seguir adelante y a rodar en esto. No tengo ningún nombre comercial real aquí dentro. Es posible que desee utilizar sus nombres comerciales reales. Si estás creando un currículum o si estás creando un portafolio, esto podría ser enlaces a proyectos que tienes en Get hub o sus sitios web o algo por el estilo. Entonces solo voy a desplazarme hasta aquí y colapsar eso también, porque no necesitamos eso. Y vamos a seguir adelante y crear Ah, nuevo título de tema. Entonces tópico titulo. Y entonces aquí queremos i dot ness icon dot star y llamemos a esta experiencia previa cuando actualicemos nuestra página Ha. Experiencia previa arreglará el espaciado en tan solo un momento. Nos estamos acercando realmente a ello. Y de donde obtuve ese título de este fue un poco más complicado para desenterrar. Lo que tenía que hacer era bajar aquí y solo hago clic derecho inspeccionar elemento, y cuando paso el cursor sobre esto, se puede ver que tengo todo el equipo central y tengo un título de tema aquí. Y así todo lo que realmente hice fue sólo tomar esa clase que H tres tema título. Tienes un ícono aquí y luego texto regular, así que acabo de hacer lo mismo. A continuación necesitamos unos contenedores nuevos. Vamos a crear un contenedor de nido DIV que esté oscuro. Queremos uno oscuro. No queremos que esto tenga título. Todas estas otras tienen con título. Esta no. Este ya tiene un título fuera de él llamado Título del tema. Ahora tenemos que sumar de nuevo en nuestro sistema de filas. Algunos van a agregar un div llamado Roe. Tenemos que sumar una columna en años. Un acceso de carbón a Yo no quiero que esto colapse. Por eso estoy especificando extra pequeño, fresco exceso 10 120. Eso hubiera sido bastante grande si se hubiera ido tan alto. Por lo que dos menos de 12 columnas a la izquierda, 10 de 12 columnas a la derecha, y podríamos poner una imagen aquí y también podríamos poner texto aquí. , vamos a previsualizar esto Sin embargo, vamos a previsualizar esto, y va a parecer algo a lo largo de estas líneas. Imagen aquí texto aquí. De acuerdo, me estaba acercando bastante a los fondos que se está poniendo un poco difícil de leer. Entonces, ¿por qué no solo agregamos un poco de estilo a nuestra página aquí? Adelante y agreguemos un poco de estilo a nuestro cuerpo. Y digamos que el relleno de fondo va a ser de 50 píxeles. Ahí vamos. Tenemos un poco de relleno en la parte inferior. En realidad podría ser más grande que eso. Adelante. Hazlo 90 pixels, casi el doble de lo que teníamos originalmente. Ahí vamos. Tenemos algo de espaciado ahí abajo. Ojalá puedas ver eso. De acuerdo, desplazándose hacia atrás por la página y tengo una imagen que quiero poner aquí. Entonces lo que voy a hacer es crear una nueva etiqueta de imagen y ya tener esto en mi portapapeles. Entonces este es un tú extraño, Earl. Puedes ir a Vamos adelante y en realidad abrimos esto en nuestro navegador. Adelante y ábrelo en nuestro navegador. Mira esa diminuta, diminuta imagen. Y si queríamos Teoh, se puede ver donde dice que el tamaño es igual a 20. Podríamos hacer que ese tamaño sea igual a 200 si quisiéramos, pero queremos un efecto pixelado especial y así vamos a especificar una imagen muy pequeña. Y así aquí estamos diciendo tamaño de 20 píxeles. Y cuando refresque esto, esto va a parecer súper minúsculo. Sí, apenas se puede ver eso. Tenemos que añadir un poco de estilo especial a esto para que este dedo funcione correctamente. Entonces sigamos adelante y pongamos esto en una nueva línea también. Porque podemos estilo con el 100% de altura es igual al 100%. Va a ser auto. Esto sólo nos convierte en una imagen receptiva. Es página de actualización, y se puede ver que se ve un poco borrosa. Pero si hacemos click derecho e inspeccionamos, podemos agregar esta cosita genial llamada renderización de imágenes. Y queríamos ser pixelados, y también vamos a añadir otro aquí solo para Mozilla llamado bordes más nítidos. Y así si solo apago esa, ésta es mejor para chrome y para Firefox. Si solo hablo esto o no, si realmente puedes ver que la imagen de aquí arriba se está pixelando, lo cual es bastante genial. Entonces, en lugar de difuminarlo al tratar de darle sentido, solo se va a pegar con los píxeles que estén actualmente ahí. Entonces sigamos adelante y copiemos los dos y pongamos los aquí también. Y podríamos retocar ese espaciado porque no lo necesitamos. Es página de actualización y ahí vamos. Tenemos un efecto pixelado. Eso es bastante guay. Y luego aquí dentro, tenemos que seguir adelante y agregar algunos nombres de empresas. Tenemos el viejo nombre de la empresa. Ha sido un párrafo aquí. Entonces, ¿cuál era mi papel? A lo mejor yo era Ah, Super desarrollador front end ha creado si contenedor sólo por el bien de tener separación, uh, para poner un Lincoln aquí. Y esto sólo va a ser, no sé, quizá el ícono de los nidos. Olvídate de hub. Entonces tal vez tengo que conseguir un proyecto o algo que quiero compartir en su Vamos a seguir adelante y copiar eso otra vez. Está justo ahí. Y en lugar de conseguir hub, tal vez Vamos a poner página de actualización de Twitter. Boom. Mira eso. Entonces tenemos get hub y tenemos Twitter ahí dentro. Eso es bastante guay. Esto viene muy bien ahora. Tenemos que copiar esto un par de veces porque queremos tres filas. Entonces lo que voy a hacer es tomar toda esa fila, pegarla y pegarla una vez más. Y mira eso. Tenemos tres ahí dentro, así que vamos a seguir adelante y retocar parte de ese contenido ahí dentro. Digamos que esta es una especie de empresa antigua y no lo sé, tal vez fui gerente de proyecto gerente, y tal vez ésta tenga un enlace de Facebook. Nombre de empresa muy antiguo. Y tal vez fui un súper desarrollador back end. Y tal vez no haya vuelta a casa. A lo mejor este es solo Twitter e Instagram, supongo. Adelante, Refresca. Eso se ve bastante bien, pero nuestro espaciado se está volviendo un poco asqueroso. Sigamos adelante y añadamos algo de espaciado en el siguiente video. 14. Espacio de 8 bits: está bien, Tenemos una buena porción de nuestra página bastante hecho. Solo necesitamos agregar algo de espaciado en tu causa. Nuestra página no se ve así. Nuestra página se ve un poco abarrotada. Las cosas son básicamente como secciones o tocarse entre sí, y simplemente no se ve muy ocho bits. Parece abarrotado para ser un poco. Por lo que sólo necesitamos agregar un poco de margen y relleno a algunos lugares en particular. Empecemos por la parte superior. Tenemos esto aquí arriba. Realmente no se ve centrado. Si simplemente hacemos clic derecho e inspeccionamos. Tenemos un H dos aquí y en realidad podemos ver que hay un ma ah, margen inferior de 0.5 habitaciones. Nosotros queremos deshacernos de eso por completo. Entonces abrimos el código S. Vayamos a nuestra navegación aquí. Voy a hacer trampa. Voy a escribir esto en el margen de línea inferior cero, y eso sólo va a sobrescribir esto. Entonces sigamos adelante y nos demos un refresco y veamos este tipo de lucir como si estuviera un poco más centrado. Va a reventar esta línea así que es un poco difícil de notar porque ese margen. El fondo fue de 0.5 gramos. Pero sí se ve un poco más centrado ahora, ¿ no? A continuación, tenemos que añadir algo de espaciado aquí porque este tipo el tipo que dice que soy Kayla, está demasiado cerca. Entonces, en realidad vamos a derribar todo desde ese ícono. Entonces tenemos el contenedor aquí con nest BC rico, y creo que es uno de los creadores de nido out CSS, en realidad. Margen inferior 50 p. x Muy bien, así que tenemos algo de espaciado ahí dentro que viene. Ah, Si también miramos aquí, tenemos un poco de offset también. no nos gusta realmente. Y se puede ver aquí que esto tiene un margen Fondo de un Ram. No queremos eso para nada. Entonces sigamos adelante y busquemos nuestras listas y nos deshagamos de todas esas. Tenemos una lista de nidos aquí. La parte inferior del margen de estilo es igual a cero. Encontremos otra lista. No parece que tengamos ninguno. Está bien, ahí está. Eso se ve un poco mejor. Ahora necesitamos un poco de espaciado en el medio. Destacable es y cosas que dio también necesitamos un poco de espaciamiento entre mis sociales y no Digno . Entonces sigamos adelante y bajemos para saber dónde están estos que es Esta sección aquí dice el margen de estilo de No Worthy . Margen de 50 píxeles superiores. Abajo 50 pixeles y hagamos el de abajo también, mis sociales. Vamos a ser un poco preventivos con la acción de éste. Eso es sólo copiar eso. ¿ Por qué? Por qué teclearlo si podemos copiarlo Y ahí vamos. Eso empieza a parecer un poco más espaciado. Entonces tenemos que añadir un poco de espaciado entre aquí, poco de espaciado entre aquí y un poco de espaciado entre aquí. Entonces eso va a ser realmente fácil. Bajemos a nuestra columna derecha, así que llámalo Medio ocho. Esa es esta sección más grande de aquí. Esa es la columna correcta. Vamos a dar click aquí y aquí y aquí. Y vamos a hacer estilo margen top 40 pixels y vamos a refrescar. Ah, eso se ve mejor. Eso se ve mejor. De acuerdo, este bar sigue siendo demasiado grande blanco todos los juntos, creo. Pero antes de hacerlo, bajemos por el resto de la página y tenemos algunos problemas de espaciado aquí con experiencia previa . Entonces si abrimos código V s, voy a colapsar de nuevo esta sección. Colapso, colapso, colapso. Y así tenemos una primera sección o sección oscura, segunda sección un título y luego la que acabamos de colapsar. Vamos a un colapso eso. Y aquí dentro queremos que cada fila individual sea dirigida. Hagamos sólo una segunda y tercera fila. Por lo que el margen de estilo es igual o margen superior es igual a 30 píxeles agregados. Sólo un poco de espaciado, supongo. Sólo para que eso no parezca tan aplastado juntos. Eso se ve bastante bien. En realidad, así resultó mejor de lo que esperaba. Por lo general, realmente no supongo un buen espaciado en el primer invitado. Pero eso resultó bastante bien. Y luego por último, sólo necesitamos retocar esto aquí porque esto es demasiado grande este progreso barra dos grandes. Echemos un vistazo a la altura Atributo. ¿ A qué altura es esta cosa? 48 pixeles. ¿ Qué pasa si hicimos este 25 o 36? Eso se ve bien. Eso se ve un poco mejor y no se ve del todo centro. Adelante y digamos 25 picks es que se ve bastante bien. Entonces lo que estamos haciendo aquí es que estamos editando el CSS justo en nuestro navegador y quiero agarrar este selector y modificarlo. Entonces volvamos a desplazarnos hasta su página y donde tenemos nuestro estilo, ¿dónde va a agregar punto ness? Avance de Dash. Esa es nuestra barra de progreso. Y digamos que va a tener una altura de 25 píxeles, y esto va a seleccionar cada uno de ellos y darle una altura máxima. 25 pixeles. Adelante y actualicemos tu página. Parece que no pasó nada con el selector CSS. Dijimos seleccionable de nuevo. Cambia la altura 25 píxeles. 15. El pie del pie: está bien, tenemos una sección más que tenemos que sumar. Esta es solo la pequeña sección de contenido en la parte inferior. Es bastante difícil de ver, y eso está bien. Eso es realmente solo un copyright o lo que quieras poner en sus ojos. Ponga algo gracioso, dice irónicamente, realidad no me importa los próximos juegos en 2019 así que sigamos adelante y creemos eso. Abre el código S y en la parte inferior. De hecho, no del todo el fondo. Iba a colapsar contenedor y crear un contenedor nuevo, y esto es básicamente solo un pie de página. Quiero darle a esto un estilo, digamos margen Top 50 pixels tamaño de fuente. Hagámoslo más pequeño que el tamaño medio de fuente. A lo mejor como 60% ish. 60%. Ahí está el signo de porcentaje ha dado una columna de fila extra pequeña 12. Entonces van a ser 12 columnas de ancho, pase lo que pase, Pero sigamos adelante y centralizamos la tecnología. Por lo que texto de estilo. Una línea es igual al centro, y el color va a ser C C. C, que es de color gris claro. Y luego aquí, pongamos Irónicamente, no me importan los juegos de sí en 2019. Y cambiemos eso. Ver a un copyright ¿hiciste para hacer y copiar? Volvamos a nuestro archivo de trabajo aquí y vayamos a la actualización inferior y nos deshagamos de eso y diga, irónicamente, no me importan sus juegos en 2019. 16. Proyecto completo: todo bien. Es así como creamos un sitio web de ocho bits con un pequeño framework o biblioteca CSS llamado nest dot CSS, que es de código abierto. Aquí lo puedes encontrar. Si te gusta, siempre puedes contribuir a ello. Me gustaría agradecer a los creadores de Nest Out CSS y contribuyentes de Nest on CSS porque esta es una pequeña biblioteca impresionante. Esto es simplemente fantástico. No se puede todo tipo de botones y esas cosas. No viene con mucho a ti vas a tener que usar algunas cosas extra aquí dentro, como diálogos. Vas a tener que añadir tu propio JavaScript para eso. Pero eso está bien, viene con el estilo, y esa es la parte principal aquí. Y luego usamos flex box grid flex box grid dot com, Y esto es sólo una gota en reemplazo del sistema de cuadrícula bootstraps. Entonces si estás usando tu propio sitio web y no es usar bootstrap o fundación ni nada con una grilla y necesitas una grilla, solo puedes venir aquí y usar un drop in grid replacement. Es realmente, muy agradable. Y así, en menos de una hora, pudimos crear mi currículum de desarrollo Web o para ti, podría ser un portafolio. Podría ser un currículum. Podría ser solo un sitio web de hobby o algo así. Eso se ve realmente genial. Gracias por acompañarme en este viaje. Esto fue bastante divertido. En realidad, realmente disfruté este. Y espero verte en otra clase mía. Pero antes de irte, no olvides que puedes compartir tu progreso. Comparte tu sitio web, comparte todo este proyecto que has hecho con share de habilidad. Basta con hacer clic en el botón de nuevo proyecto. O si ya has comenzado proyecto, vas a tener que editar ese proyecto y simplemente compartir lo que tienes. Comparte cómo se ve el tuyo. 17. Resumen: Oye, gracias por unirte a mí en la cuota de habilidad. No lo olvides, puedes seguirme. Entonces mi nombre está en este curso. Simplemente puedes hacer clic en el acarreo de Caleb y luego seguirme en la cuota de habilidad. Y eso te daría notificaciones cada vez que lanzo un nuevo curso. Otro curso impresionante como este o tengo algún material libre para regalar. Por supuesto, eso es opcional. Y si alguna vez necesitas un grupo de apoyo a desarrolladores grande, tengo un grupo en Facebook con, como 25,000 personas en un 25,000 desarrolladores. Todos estamos aprendiendo a codificar juntos. Se llama Aprendiendo a Codar en Facebook. Ven a pasar, Di hola, Haz una pregunta, Consigue un poco de apoyo, ayuda a otras personas. Se trata de una comunidad donde sólo nos ayudamos unos a otros y es totalmente gratis.