YT YouTube2Text

YouTube2Text → Transcripts → Curso Básico de CSS - 14. Layout, estructura Basica

Curso Básico de CSS - 14. Layout, estructura Basica — Transcript

by FalconMasters · 3,676 words · 523 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00[Música]
0:05[Música]
0:08Hola Qué tal amigos bienvenidos sean
0:09este nuestro siguiente capítulo del
0:11curso de css básico Mi nombre es Carlos
0:13Arturo y bien pues este va a ser el
0:15último capítulo regular de nuestro curso
0:17vamos a estar Aprendiendo a hacer esta
0:19estructura básica ya con las cosas que
0:21hemos aprendido vamos a usar la mayoría
0:23de las propiedades que hemos visto bueno
0:25quizás no todas pero bueno sí una gran
0:28parte Así que bien pues vamos a comenzar
0:30para aprender a crear esto eh Ya que
0:33tengo mis documentos ya sabes el
0:34documento html con las etiquetas básicas
0:37y mi hoja de estilo css ya
0:40enlazada es muy sencillo hacerlo Eh
0:43puede requerir práctica para que tú te
0:45acostumbres Cómo escribir las etiquetas
0:47eh Para que aprendas En qué orden van y
0:50bueno cosas así pero es muy sencillo Así
0:52que vamos a comenzar primero que nada
0:54tenemos que basarnos por el concepto de
0:56que un sitio web se basa en tres áreas
0:58la parte del header la parte del Main
1:00que son los artículos junto con el
1:02sidebar o parte de main o principal
1:04también se le conoce y el furer o el pie
1:07de página Así que eh son estas tres
1:10partes y para eso vamos a comenzar
1:12definiéndolos tenemos la parte del
1:14header tenemos la parte del Main que
1:16bueno como no hay una etiqueta que se
1:17llame Main o o por el momento todavía no
1:20se implementa tenemos que escribir un
1:22section que tenga la clase Main y
1:25también tenemos que escribir nuestra
1:27sección de footer estas tres son las
1:29secciones de nuestro sitio web y dentro
1:31vamos a escribir lo que nosotros
1:33necesitamos primero que nada en el
1:34header qué es lo que queremos tener
1:36queremos tener tanto el logotipo como el
1:38menú para ello escribimos un DIF
1:40Recuerda que los DIF se utilizan para
1:42imágenes o
1:43gráficos y Dentro de este DIF le podemos
1:46poner incluso la Class llamada logotipo
1:49esto por si lo queremos trabajar después
1:51en este caso no la vamos a usar después
1:54agregamos la imagen que en este caso es
1:56imágenes diagonal logo.jpg
1:59esto porque aquí tengo mi carpeta dentro
2:02de imágenes tengo logo.jpg
2:05eh después agregamos un
2:08wid de 100 píxeles Ahí está simplemente
2:12para darle un un tamaño aproximado y ya
2:16está tenemos la parte de nuestro
2:17logotipo después dentro de header qué
2:19tenemos tenemos nuestro naf con la
2:21etiqueta naf encerramos nuestro menú de
2:23navegación y le decimos a los
2:24navegadores y buscadores que esta es la
2:26parte de nuestra navegación del sitio
2:29pero Este no es todavía nuestro menú
2:31nuestro menú Recuerda que consta por
2:33listas y cada lista bueno consta ya
2:35varios elementos en este caso son eh
2:38elementos Li con un elemento a en este
2:42caso yo los agrego de forma
2:45rápida hay agregado un menú ya básico
2:49muy sencillo la verdad y tendríamos ya
2:52nuestra estructura eh yo lo que hacer es
2:54abrir nuevamente el documento que si lo
2:57reinicio si actualizo mi sitio se me se
3:01me van a borrar los estilos Entonces
3:02quiero tenerlos para mostrarte Aquí está
3:05esta es la estructura básica que hemos
3:06tenido ya tenemos tanto logotipo como es
3:08nuestro menú y vamos a trabajar así con
3:11la parte de los artículos y nuestro
3:13sidebar para la parte de los artículos
3:15vamos a irnos ahora a la parte de
3:17nuestro Main y dentro vamos a decirle
3:19que queremos otro section para almacenar
3:22nuestros artículos así que escribimos
3:24otro section y le ponemos articles en
3:26este caso es plural y dentro de articles
3:29vamos a escribir nuestros artículos Pero
3:32qué otra sección vamos a tener Pues
3:34dentro de main también vamos a poner
3:35nuestro aside o nuestro nuestro sidebar
3:39entonces Dentro de este section de
3:41articles vamos a empezar escribiendo
3:43article porque queremos Con esta
3:46etiqueta decirle al navegador al
3:47buscador web que este es nuestro
3:49contenido principal que queremos que el
3:51usuario vea es la parte más importante
3:53del sitio Entonces vamos a agregarle una
3:55etiqueta h2 ya sabes la h1 no la podemos
3:58repetir y como vamos a a tener varios
4:00artículos pues es importante utilizar h2
4:03Vamos a ponerle Este es el
4:06título de mi sitio web después vamos a
4:10agregar un contenido de relleno
4:11simplemente para simular que tenemos
4:13algo de texto y ahí está tenemos nuestro
4:15artículo yo lo voy a copiar lo voy a
4:17tener dos veces tú puedes tener la
4:19cuantas tú quieras y vamos a obtener
4:21este resultado sencillo Ahí está es este
4:23que tenemos aquí eh Ya tenemos la parte
4:26de los artículos y ahora sí vamos a
4:28trabajar en la parte de aside yo en la
4:30site simplemente voy a agregar un h3 y
4:32voy a ponerle Este es mi sidebar Ahí
4:36está voy a agregar también contenido de
4:38relleno tú puedes agregar cualquier otra
4:40cosa yo Lo agrego y ahí está
4:42actualizamos ya tenemos Esto entonces en
4:45la estructura ya tenemos tanto el
4:47logotipo nuestro menú de navegación
4:49nuestros artículos y nuestro sidebar ya
4:52por último falta el fter para ello Nos
4:55vamos aquí nuestra etiqueta de foter
4:57fter y aquí escribimos una ap porque yo
5:01le voy a agregar aquí un texto que
5:04tengo simplemente para ponerle una
5:06especie de autor aquí Bueno actualicé ya
5:10se me borró Pero no importa aquí ya
5:12tenemos ya nuestro sitio web eh bien ya
5:16está esto Qué vamos a hacer ahora vamos
5:18a empezar a darle estilos a cada uno de
5:20nuestros elementos y vamos a empezar a
5:22estructurar nuestro sitio web eh nos
5:24vamos a nuestra hoja de estilo
5:28css Y cómo comenzamos eh comenzamos
5:32agregando un selector universal y le
5:34vamos a decir que todos los elementos
5:36van a tener un margin de Cero y van a
5:38tener un padding de cero También es
5:41importante cer0 y cero esto lo que hacer
5:43va a borrar todos los márgenes que
5:44agrega por defecto el navegador y va a
5:47ser que tengamos un diseño desde cero
5:49como nosotros queremos Ahí está
5:51Eh ya después vamos a trabajar con el
5:54body para Body le vamos a agregar un
5:56background este background que le vamos
5:58a agregar va a ser un color e6 e6 e6 es
6:01lo único que vamos a hacerle para el
6:03body aquí en Body Acuérdate que le
6:04puedes cambiar el tipo de letra Puedes
6:06cambiarle Quizás El tamaño por defecto
6:09te lo agrega 16 píxeles Pero bueno Más
6:11vale acomodarlo si es que tú lo
6:13necesitas eh Y bien Vamos a continuar
6:16qué es lo que queremos ya tenemos este
6:18sitio eh vamos a hacer ahora que nuestro
6:21sitio tenga una medida específica y lo
6:24centremos todo el contenido para ello lo
6:26que voy a hacer Es que voy a empezar con
6:28header te lo voy a Mostrar y le voy a
6:30cambiar el color a un
6:32color un color me parece blanco me pare
6:36Sí me parece bien un blanco y vamos a
6:38decirle lo siguiente vas a tener un Wi
6:41de 90 por. tú Aquí podrías ponerle en
6:45vez de 90 puedes ponerle 1000 píxeles yo
6:48le voy a poner 90 por por lo siguiente
6:50si tú le pones 1000 píxeles si el
6:52usuario son una pantalla menor a 1000
6:54píxeles va a tener un problema Entonces
6:57con 90 si tiene la pantalla más pequeña
7:00el contenido se va a adaptar al
7:02porcentaje de la pantalla esto ya se
7:04utiliza para lo que se le conoce como
7:06diseño responsivo o diseño adaptable el
7:10diseño adaptable es el que se es el que
7:12tú creas para que un diseño se adapte al
7:15dispositivo móvil el que lo vean si el
7:17diseño lo ven en un iPad Bueno pues que
7:19tenga ciertos cambios si lo ven en un
7:21Smartphone que tenga más cambios Yo
7:23tengo un video y un tutorial en mi sitio
7:25web donde tú puedes ver acerca de esto y
7:27cómo hacer diseños adaptable a
7:29dispositivos móviles Pero bueno no nos
7:31vamos a enrayar más en esto simplemente
7:33le ponemos un wid de 90 por y le vamos a
7:36poner un margin
7:37auto con esto vamos a centrar el
7:40contenido si actualizamos ahí está como
7:42puedes ver tenemos el fondo blanco y
7:44tenemos unos margenes a los lados esto
7:46por qué Porque este contenido que está
7:48en blanco es el 90 por del tamaño de mi
7:51pantalla pero bueno es demasiado Yo no
7:53quiero que sea el 90 entonces lo que
7:56vamos a hacer es aplicarle una propiedad
7:57llamada Max wid y le vamos a decirle que
8:00el tamaño máximo que va a tener son 1000
8:01píxeles ahora si actualizamos y el
8:03diseño se hace un poquito más pequeño
8:05pero ahora sí son 1000 píxeles Esto se
8:08lo vamos a aplicar tanto a este
8:09contenido que tenemos aquí como al fter
8:12entonces Simplemente nos vamos al header
8:14y le vamos a decir que también se lo
8:16aplica Al Punto section y al
8:18fter no es al punto section aquí me he
8:21equivocado es al
8:23Main Main Ahí está a Main y a furter
8:27Ahora sí actualizamos y tenemos Esto es
8:31así de sencillo aquí en el wid en el
8:35margin le he puesto auto pero le voy a
8:36hacir que tenga 20 píxeles arriba y
8:38abajo y auto para que lo entre
8:41actualizamos y ahí está tenemos un
8:43margen en cada uno de los elementos eh
8:46Ya está esta parte vamos a continuar
8:48ahora con nuestro menú de navegación
8:49para ell vamos a header después vamos a
8:52nav y después vamos a modificar nuestro
8:55nuestros elementos primero que nada le
8:57vamos a agregar un background de el
8:59siguiente color el color ya lo tengo
9:01aquí es
9:02528
9:05fd5 se lo pegamos y ahí está tenemos
9:08este color este color blanco que le
9:10hemos puesto aquí se lo voy a quitar ya
9:12no me interesa Y ahí estamos vamos ahora
9:15a ponerle heer naf ul y vamos a trabajar
9:21en el ul simplemente le vamos a poner
9:24que tenga un lista
9:25Style con esto le vamos a quitar los
9:28puntitos que tenemos aquí Así que aquí
9:31actualizamos le quitamos los puntos y
9:33bueno el fondo blanco que te había dicho
9:35se lo quitamos también ahí estamos eh
9:38vamos ahora hacer que estos elementos Li
9:41se ponga uno al lado del otro para eso
9:43vamos a usar la propiedad de float y con
9:45su valor left para que todos se apilen
9:47hacia la izquierda Entonces vamos a
9:50irnos otra vez a header naf ul Li y le
9:54vamos a decir tengan una propiedad float
9:57left Esto va a hacer que todos se apilen
9:59hacia la izquierda de esta manera va a
10:02haber un problema pero ahorita lo
10:04solucionamos Ahí está todos se apilan
10:06hacia la izquierda y el problema que
10:08tenemos es que nuestro fondo desaparece
10:10Eh Esto desaparece y Bueno de hecho aquí
10:13tambén tenemos el problema de este
10:15espacio que tenemos aquí lo que pasa es
10:17que al ponerlo hacia la izquierda los
10:18demás elementos también se afectan y los
10:20anteriores también entonces yo aquí voy
10:24a usar un plugin que tengo para firefox
10:27el plugin se llama firebug tú lo puedes
10:29descargar para firefox o si no incluso
10:31también ya por defecto simplemente le
10:33das clic derecho inspeccionar elemento y
10:35lo puedes ver igual con Chrome con
10:39Google Chrome también funciona entonces
10:41eh haces esto le das a inspeccionar el
10:43elemento eh Y aquí vas a tener lo
10:46siguiente tú puedes ver los elementos si
10:48lo Si pasas el mouse en Body te va a
10:50seleccionar todo el documento Si pasas
10:52el mouse arriba de header te selecciona
10:54la parte del header y así para cada uno
10:56de los elementos si por alguna razón no
10:59se colorea en pantalla significa que
11:01tienes algo mal no y no visualmente sino
11:04detrás en la estructura Mediante los
11:05float y bueno todo esto entonces eh
11:09dentro de G tenemos el logotipo Y
11:11tenemos el menú como puedes ver yo estoy
11:12dándole un click en na y no me está
11:15coloreando nada en pantalla Entonces
11:17esto por qué es porque como le hemos
11:20aplicado Flow at left a los Li lo que
11:22pasa es que naf como no tiene un float
11:24left también se echa a perder lo ideal
11:27según podrías decir sería agregarle aquí
11:29un float left pero el problema es que si
11:31le agregamos un float left también se lo
11:33tendríamos que agregar a los demás la
11:35solución más sencilla es agregarle una
11:37propiedad overflow hidden con overflow
11:39hidden solucionamos este problema que
11:42nosotros tenemos Y si actualizamos vamos
11:44a tener ahora sí ya nuestro menú
11:46overflow hidden nos sirve para dos cosas
11:48Una es para ocultar el contenido que
11:52sobrepasa nuestro nuestro contenedor es
11:56decir si tenemos un contenido muy grande
11:57y no acaba nuestro contenedor con FL
11:59hien lo desaparecemos Esta es una de las
12:02de las funciones que tiene pero la otra
12:05es que digamos que nos limpia nuestros
12:07Flow at left si tenemos un float left y
12:09un float right en el mismo contenedor
12:11con esto lo limpiamos Entonces overflow
12:14hiden es una propiedad muy buena también
12:16e y bueno simplemente es cuestión de
12:19practicar con ella Vamos a trabajar
12:21ahora con los elementos ad dentro de los
12:24Li Así es para modificar los enlaces
12:28como ya viamos en ttulos pasados yo te
12:30enseñé hacer un menú de navegación Pues
12:32con vamos a hacer exactamente lo mismo
12:34lo único que vamos a hacer es darle un
12:35padding de 10 píxeles y 20 hacia los dos
12:38lados y le vamos a poner un display
12:42block con display block nosotros podemos
12:45permitir que tenga un padding hacia
12:47arriba y abajo si no le ponemos display
12:49block este padding no funciona solo
12:51funciona hacia los lados tenemos esto le
12:54vamos a cambiar también el
12:55color color a un color blanco y tambén a
12:59poner un text
13:00decoration text decoration know para
13:03quitar el subrayado feo actualizamos y
13:06ya tenemos nuestro menú de navegación ya
13:09por último si tú quieres le puedes
13:10agregar un
13:13hover y cambiarle
13:16el el fondo yo en este caso aquí ya
13:18tengo uno que he copiado simplemente lo
13:20voy a pegar aquí actualizamos y ahí está
13:23cambiamos de color y funciona y acabamos
13:26con la parte de El header ahora vamos a
13:29pasar con la parte de main para m
13:32también es muy sencillo pero tienes que
13:34tener en cuenta algunas cosas vamos a
13:37empezar escribiendo Main articles que
13:40buen es punto articles porque es nuestra
13:42clase es la clase que encierra todos
13:44nuestros artículos y lo que le vamos a
13:46decir es lo siguiente vas a tener un Wi
13:48también se lo vamos a poner en
13:49porcentaje del 70 70 por eh Le vas a
13:54tener un float left con esto con float
13:57left hacemos que el contenido se vaya
13:59hacia la izquierda recuerda eso y ahí
14:02está vamos a actualizar Y si tenemos si
14:05te fijas ya tenemos dos columnas yo de
14:07momento le voy a poner un background
14:10blanco Ahí está actualizamos y tengo el
14:13fondo blanco y ya puedes diferenciarlo
14:16tenemos tanto la parte de nuestro
14:19nuestros artículos como el sidebar Y si
14:21te fijas esta parte es el 70 por de todo
14:24el documento de de del tamaño de nuestro
14:27elemento padre y este es sidebar que
14:29bueno es el cálculo que hace el
14:31navegador por defecto es el tamaño
14:33restante pero también lo tenemos que
14:36especificar Entonces vamos a
14:37especificarlo para le vamos a decir
14:39aside y le vamos a decir que en aside
14:42vamos a tener un Wi de El 30% para que
14:4670 y 30 nos da el 100% le vamos a poner
14:49un fondo el como no podía faltar vamos a
14:52poner el fondo más F toda la historia de
14:55todo el mundo ahí está
14:58actualizamos Y tenemos esto tenemos el
15:00fondo naranja y Pero qué pasa que al
15:03ponerle nosotros ya una medida especial
15:05de 30% le estamos poniendo hacia abajo
15:07Si queremos ponerlo de nuevo hacia acá
15:10hacia la izquierda tenemos que ponerle
15:12otra vez nuestro
15:14float
15:16left nuestro flat left y de esta forma
15:19tenemos el flat left hacia la izquierda
15:21en los artículos y en el asite con flat
15:23l nosotros estamos poniendo las columnas
15:26Ahí está ya tenemos las dos columnas
15:28vamos a hacer cosas un poquito más
15:30avanzadas como por ejemplo agregarle un
15:31margen vamos a agregarle un margen vamos
15:35a irnos aquí en articles y le vamos a
15:37agregar un margen margin ge right de
15:411.5 por. pero si le agregamos ya no
15:45sería el 100% por lo tanto aquí le
15:47tenemos que cambiar de 70 a 68.5 por
15:51para que en total sea el 100 y ahí está
15:54ahora sí se actualizamos ya no habría
15:56problema tenemos el margen y esta caja
15:58se hace un poquito más pequeña y ya
16:00tenemos nuestro margen e Esta es la
16:03forma en este caso yo lo calculé y ya
16:05está Vamos a continuar ahora con ya
16:08tenemos tanto el la Side pero a la Side
16:10le vamos a agregar un padding es más
16:13vamos a trabajar mejor con los artículos
16:14y ahorita trabajamos con el padding del
16:16de la site vamos a irnos aquí a punto
16:19Main pun articles y vamos a decir
16:23article todos los artículos que van a
16:25tener vamos a decirle que tengan un
16:27padding de 20 píxel
16:29y van a tener el background blanco este
16:33background aquí arriba se lo voy a
16:34quitar simplemente lo voy a dejar aquí
16:36abajo porque también van a tener un
16:37margin y un bottom
16:39de 20 píxeles Ahí estamos así lo vamos a
16:44dejar actualizamos y lo único que
16:46hacemos Es agregarle un margen interno a
16:49cada artículo y le agregamos también un
16:51margen externo hacia abajo en cada
16:53artículo dando esta separación y ahí lo
16:56tenemos aquí lo hemos separado y si te
16:58fijas el F se pone de esta parte eh
17:00vamos a empezar a darle propiedades al
17:02fter simplemente algunas para que puedas
17:06ver cómo se
17:07ve vamos a poner el fondo negro y vamos
17:10a poner un color blanco de de fuente
17:14actualizamos y ahí está tenemos nuestro
17:16foter si te fijas aquí tenemos un
17:18problema y es que se pone en esta parte
17:20vamos a solucionarlo simplemente quera
17:22que supieras que está este problema eh
17:25pero primero Vamos a darle estilo aquí
17:27al sidebar que se me olvidó en el aside
17:29vamos a decirle que también va a tener
17:31un
17:32padding de 20 píxeles es un padding
17:35interno aquí
17:37actualizamos y ahí está si te fijas el
17:40padding se ha hecho ha hecho que el
17:42contenedor sea más grande más de 30% Por
17:45lo cual lo desplaza hacia abajo nosotros
17:48no queremos que pase eso Entonces vamos
17:50a usar la propiedad Box
17:51iing que ya te la había comentado
17:54anteriormente Border Box y con esta
17:57propiedad nosotros arreglamos el el
17:59problema ahí está esta propiedad eh de
18:02box sizing Tú la puedes buscar en mi
18:03sitio web tú simplemente en la barra de
18:05búsqueda escribes Box sizing y yo ahí
18:07tengo un artículo muy bueno en el cual
18:08hablo de ella Ahí está ya tenemos
18:11nuestro sitio y simplemente falta
18:13arreglar el foter para arreglarlo
18:15tenemos que aplicar una propiedad
18:16llamada Clear que eh con Clear Boot lo
18:20que lo que nosotros hacemos Es limpiar
18:22los float lev los float lev por defecto
18:25digamos dejan un rastro en los elementos
18:27tanto anteriores como siguientes de esta
18:31propiedad entonces con FL con Clear Bot
18:33Nosotros le decimos vas a limpiar a
18:35partir de aquí los float left y digamos
18:38que de alguna manera me vas a dar un
18:39salto de línea no con un espaciado que
18:41sea visible sino que en la estructura
18:43vas a tener una separación entonces
18:46actualizamos y con Clear Bot ahora sí ya
18:48tenemos la separación y con Clear Bot
18:50estamos respetando ahora sí todo el
18:52tamaño ya por último le voy a agregar
18:54aquí un padding de 10 píxeles hacia
18:57arriba y cero píxeles a los lados é le a
19:00poner un text align Center a nuestro
19:02documento y ahora s actualizamos y ahí
19:05tenemos ya nuestra estructura finalizada
19:08es una estructura muy básica pero que te
19:11sirve para practicar para hacer digamos
19:13tu primer sitio web obviamente se pueden
19:15hacer cosas más avanzadas Y bueno pues
19:18es lo que hemos estado aprendiendo eh
19:20con este curso es era el objetivo porer
19:22crear esta estructura aprender más que
19:24nada las propiedades Este es un curso de
19:27css no un curso de diseño web si tú
19:30quieres ya avanzar un poquito más y ya
19:32entiendes estos eh propiedades y sabes
19:35usarlas puedes entrar a mi sitio web en
19:38lo que es mi curso de diseño web en mi
19:40curso de diseño web tú vas a aprender
19:42Cómo hacer un diseño un poco más
19:44avanzado ya no vas a ver las propiedades
19:46de css simplemente vas a a a utilizarlas
19:50y al final eh el resultado que estamos
19:53usando con este curso es esto un sitio
19:55web con un menú diferente eh tenemos un
19:58sl completamente funcional es una
20:00estructura de un sitio web diferente
20:02como puedes ver También tenemos nuestro
20:04sbar nuestros artículos un un pie de
20:07página diferente y bueno te recomiendo
20:10que veas este curso también es bastante
20:12Bueno te va a servir para practicar y
20:14hacer tus propios sitios web y bien pues
20:16eso ha sido todo por este este capítulo
20:19este último capítulo regular del curso
20:21de css ya sabes que mi nombre es Carlos
20:24Arturo si te gustó el curso de css y de
20:26html por favor suscríbete Sígueme en
20:29Twitter No te olvides de entrar a mi
20:30sitio web donde estoy escribiendo
20:32artículos muy buenos sobre diseño web y
20:34nos vemos hasta la próxima si te ha
20:36gustado el video por favor No olvides
20:38suscribirte al Canal así como también
20:40seguirme en Twitter en @fc Masters por
20:42último te invito a que pases por mi
20:44sitio
20:44www.falconmasters.com en donde
20:47encontrarás tutoriales y recursos sobre
20:49desarrollo y diseño web

About this transcript

This page contains the full transcript of Curso Básico de CSS - 14. Layout, estructura Basica by FalconMasters, generated from the public captions YouTube serves with the video. The transcript has 3,676 words across 523 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.