Diseñando una página web con HTML, CSS y Javascript - Primera parte

y este nuevo vídeo de proyecto web como segunda ya carlos molina desde chica pero en esta ocasión vamos a hacer un autor ial de una página web desde cero con html css y javascript sin utilizar ningún plugin digo framework que obviamente pues no está mal pero siempre cuando conoce cómo hacerlo en html y css puro lo cual posteriormente puede hacer entender mejor cómo diseñar un framework porque es algún plugin así que bueno ya anteriormente habíamos hecho una página similar pero ahora pues voy a hacerlo con otro diseño y también me ordenaron unas cosas así que bueno que ese es el diseño que lo publiqué hace unos días en facebook una imposible de cambiar unas cositas así que bueno esta página responsible yo reduzca el tamaño ahora acaso un botón es así con un botoncito para 'somos dehesa' javascript todos con más ahora todo esto ha sido una sola columna como pueden ver caixa es totalmente responsable este diseño está basado en the boy a este por la plantilla que encontré aquí en w trolley aunque es una web donde ya la mostra anteriormente donde ahí podemos ver algunos este diseños para poder inspirarse y poder aprender también entonces esto es en la web miren es muy similar a ésta obviamente hay cosas que no le agregado como esto de aquí por ejemplo porque el tiempo no me da para hacer mucho así que he hecho lo más básico de repente nosotros llevamos agregando algunas cosas que aprendemos en la página principal para las demás cosas tiene el mismo para los demás esté mejor dicho parte de la web ya pues son y tienes que eso algún y nada más vamos a verlo después entonces vamos a empezar a diseñar esta página de aquí la página principal muy bien así que bueno qué cosas necesitamos para empezar aquí en mi carpetita página web tengo una receta css donde no tengo nada una receta img nueva unas imágenes que hoy te voy a dejar la descripción el link con el código para que tú puedas verlo también ahí esconden en la carpeta josé a js tampoco tengo nada bien así que vamos a empezar desde aquí mi nave desde nada lo voy a hacer voy a crear un nuevo archivo que se llama index.html ten en cuenta que también este es un workshop es decir un tutorial donde pues ya se requieren algunos conocimientos muy explicar de repente para qué sirve cada etiqueta ya eso es un museo donde se requiere que muy bien he creado un archivo index html y un archivo estilo css ese archivo este y los puntos css lo voy a mover a la carpeta css y ahí está en la carpeta css tengo el archivo estilos css que de creadores de aquí bien y bueno vamos ustedes a bloggers que si no lo hemos utilizado mira yo ya ya abrí mi carpeta desde brackets que tú debes hacerlo también si éste lo usa bueno archivo abrir carpeta y ahí eliges la carpeta en la que van a trabajar o termines de aquí en la página web aquí está abrir carpeta maquinaria para hacer otro nombre de realmente la nature niña es abierto abrir carpeta igual eliges la carpeta que va a trabajar bien así que aquí voy a abrir el index mira este en blanco y bueno si tú no sabes cómo está labrada que lo produce todo eso también te puede dejar un link en la descripción de 2002 hacemos esos distintos obviamente como ésta de hablantes como configurarlo para que puedas verlo bien entonces aquí voy a utilizar un atajo de yemen para describir la estructura system y l que es muy básica presión no era signo de exclamación no está bien la estructura aquí voy a cambiar las cosas puede ponerles nombres esto voy a ponerlo así muy bien aquí debajo del taita el cuerpo de dublín por su notable y aquí en la charla juega vincula el css así que escribo css que es la carpeta es también la gestión es punto css ya esta estrella vincula al ccs obviamente todavía no hay nada bien y luego también elegido un meta y me la voy a poner meta dos puntos que es un meta necesario para responsive s para que la página se adapte a cualquier tamaño de pantalla meta dos puntos v pero no está ya está muy bien luego necesitamos para después de tu cuenta así que desde aquí a mujeres a los iconos a casta yo tengo aquí una nueva fuente y voy a empezar a buscar aquí pongo los iconos por ejemplo facebook aquí están éxito luego twitter estoy en esta muy rápido porque no sé cuánto me va a demorar no tengo tanto tiempo que digamos los de aquí puede ser cualquier año y será sede a campo luego en justo más voy a verificar los nombres está facebook twitter este voy a poner ejemplos o sea así con este nombre voy a llamar al icono con el nombre que está aquí aquí no va a ser barça que hacer clic si hay comunión menú por ejemplo y luego quien publicó puedes descargar tu icono o puedes utilizarlo de las 90 pero obviamente sitúan la dirección cuando subas tu página un servidor no estará los iconos en local si por mientras yo voy a usarlo en la nube a opinión pública y me sale este link excelente aquí lo voy a copiar y lo voy a pegar acá en el cml debajo del css ahí lo voy a poner con eso ya yo llamo a los signos que están en la nube de fantástico bien así que bueno también necesitamos fuentes que lo vamos a ver en un ratito bien así que hoy vamos a empezar voy a poner por aquí esto y voy a abrir la vista previa de brackets recuerda que si tú no veo que por aquí si tú quieres trabajar bien debe saber tu carpeta de yebra crecieron ahí está mi destino y este tiempo real ya está en mora mucho también depende del equipo creo que tengas muy bien entonces vamos a empezar voy a reducir esta vista la voy a reducida de chiquito para que podrá trabajar menos o sea diseñar primero a la vista móvil y después ya ir subiendo hasta tamaños de escritorio bien así que ahí está bien ahora vamos a empezar la página como ya antes de mostrarse este de aquí bien voy a también hacer reducir los mira qué tal también los productos para ver cómo va a quedar así que bueno vamos a empezar por aquí y aquí en este relay en el body es el más bajo de la seder con la clase header se puede colocar una etiqueta header con una clase general y dentro de un contenedor el contenedor veces que me va a servir para limitar el el contenido de la página mira te das cuenta aquí la página está no está el fondo de nuestro proyecto así estirados que no está acá es igual entonces parece ser un dedo bien entonces vamos a ir por aquí contenedor y adentro a este contenedor puede colocar un archivo si tú vas a utilizar un nuevo una imagen de cómo hacerlo porque realmente tú después puedes cambiarlo por img con la clase logo y el mismo tiempo un escalón con la clase alto nilo porque es el nombre de la que nos pusimos de guardas y y luego al mismo tiempo también voy a dar una clase así ahí está aquí voy a poner aquí está el icono ves aquí voy a poner el título qué es luego aquí no estamos a colocarlo en las etiquetas de menú voy a utilizar un mueble con la clase de menú y dentro de su vez le voy a poner unos 4 li con la clase menú y dentro de cada uno de ellos una etiqueta de inicio aquí cursos docentes y contactos cursos docentes y por tanto bien obviamente para crear las demás páginas aquí tendrás que poner en línea otra página por ejemplo aquí cursos entonces tlc creo que sin y coma por lo demás diseñas la otra página y obviamente aquí lo vinculan nada más cuánto bien hay otras formas también ustedes antes por procesadores pero es básicamente eso ya está ya tengo eso le tengo el menú y por último lo que voy a hacer es ir a esta sal porque me crees tú ya sin responderle a todo placer a todos se pueden hacer para no utilizar ese es en las etiquetas directamente este sería menú link y este de aquí esto eso no puede ser menos así mira tengo un link una clase menguante y adentro tengo una etiqueta con la clase de menú link y prestarlos línea hasta los aires del canal y ahí está muy bien eso sería por mientras vamos a hacerlo hasta aquí y vamos al ccs mirar aquí en el css ahí está no hay nada en el css vamos a importar las fuentes vamos a utilizar dos fuentes una fuente para el contenido para todo y otra fuente para los títulos así que mira aquí estoy igual forma este es el diseño antiguo bien hay un diseño que son los dos para llevar mente no te confundas entonces mira por ejemplo yo aquí colocó este la fuente que yo quiero en este caso de utilizar este que es así se escribe este de aquí escribo la fuente aquí escribo en cuyos primeros rechazos mira aquí puedo elegir si quieren negrita normal lo lógico normal gana más y luego aquí el vínculo puede ser de html css javascript así que voy a hacer click aquí import para que salga el icono de en por donde el código css voy a ir aquí y aquí lo voy a pegar con gasoil a vincular la fuente luego ya se le aplicó aquí nuestro le aplicó en este caso como esto va a ser para los títulos mira a todos los títulos h1 h2 h3 h 4 h 5 16 procesos la voy a poner ese tipo de fuente 200 mil veces ahí está esto es el tipo de fuerte para los títulos ahora bueno me parece está muy pegadito yo lo que voy a hacer es ponerle un letrero space y sea un espacio entre cada letra 5 1 1.5 y para la otra voy a hacer de nuevo aquí sale este mensajito mira hay una versión de ésta aquí y dice que prácticamente lo mismo no es nada de otro mundo es más fácil obviamente ahí está el volver aquí busco la fuente la fuente más común que sube en sants que está aquí mira eso pensamos igual salen ahí están pensadas me obliga aquí en el más distante selección de la fuente y de igual manera simplemente vínculo en el css sólo esto de aquí el style aquí también puedes obviamente pero analizar como no te acuerdas solo podría seleccionar cada tipo de fuente yo estoy aquí nada más también lo voy a poner abajo este otro y con esto le especificó la fuente lo mismo del anterior así que eso de ahí va a ser para el bote como una ofensa y ya está eso ya lo puse las fuentes que lo estoy en manos de internet también las puedes después descargar aquí del nuevo diseño es más fácil descargar también pensáis tenerlo descargas muy bien y está ahora vamos a empezar voy a utilizar aquí algunos estilos por ejemplo a todo lo veo así porque el box no voy a explicar para qué es cada rosita a todas las teclas ing uy de 100 etiquetas y el efecto elementos inline entonces las acciones y los básicos que tú si quieres puedes ponerlo bien listos ahora vamos a empezar con el género ya puedo hacer comentarios voy a hacerlo todo en una sola hoja ya no voy a hacer las pasadas varias horas y luego también puede ser que lo ideal como ya mencioné en este caso es utilizar alumbre procesadora y si es mucho más fácil es crear con el estilo del género no voy a ser uno solito entonces ya está aquí vamos a empezar con el head lo primero que vamos a hacer es al head bueno al una altura de 60 pisos hasta ahí y luego al por un tenedor está listo del quede porque como ya mencionamos ahí un contador que es el que va a limitar a ese de ahí voy a darles play flex para que sea bloque uno al lado del otro y ya está luego puede dibujar que el iphone menú vamos a dibujar es el botoncito de ahí ese voto porque es el elemento como es un espacio es un elemento de bloque es un elemento de línea vamos a darle week lo hay- de 40 píxeles font-size de 30 y creo que es ecológico de aquí este colorcito es temido naranjita ya este colorcito su código es que feve 9 ese día y un color todavía no voy a ponerle a este color blanco porque ahí no se va a notar despejando con el banner y en el banner está hasta arriba y especificando fíjate al botoncito también un text align centre para este sentido un line hay también de 40 píxeles para que esté ahí centralito de manera este vertical borderes de un poquito más ya está ahora aquí me la voy a ponerle a ver 45 porque usted y entonces ahora lo que tenemos en este menú desaparezca así que voy a utilizar aquí a la vamos a darle posición absoluta para que se salga ahí y voy a darle a ver 20 pero viéndolo aquí ya la isla va a estar ahí ahora al menú al menos voy a quitarle todos los estilos aplicar esas bonitas que ven ahí está en un puede dedicarle el padding martín ahora en este caso al nap habría que darle un todo para que esté debajo debajo de este de aquí voy a la luz de 60 píxeles y además a este de aquí el ancho del 100% porque todos ya la disposición absoluta no ocupa todo 100% también lo que voy a hacer es miren de aquí a este lobo animales de 5 porque hay un espacio de margen que tiene el título unas líneas 5 píxeles y ese margen también se lo voy a dar y el menú vas a la parte de abajo muy bien ahora yo quiero que esté esto uno el título aquí y eso este por acá entonces aquí en el pri flexión cierto al contenedor voy a darle que se recorten y space oddity predisponga está uno a cada extremo ahora aquí hay un detalle aquí miren silva tienen con ojos la misma pero regulable mozilla vamos a ver como la mochila no se pone ahí miren tengo si la parece que en la como que conserva su espacio de presión que le dimos al dar parece entonces tu espacio entonces no pues se pase de mal así que para ello aquí a éste hay un menú ve darle un margen wright out martín martín de croma hacer lo mismo pero en términos de progresar y ya está martín les auto para que le empuje que se pongan en toda la esquina bien y ya está es un pequeño crédito para poder pues que se vea bien ya así que lo voy a usar y muy bien ahora ya está vamos a diseñar el menú que aquí y y vamos a edificar la línea recuerda que los links son las etiquetas no los lee y es menguantes no se activa el display blog por la etiqueta no es un elemento de bloques un momento de línea muy bien voy a darle a ver un pad y de 20 píxeles está un color este mismo color de aquí ese mismo color puede que tal le ha subrayado de color blanco y ahora lo que voy a hacer es que cuando yo pasé el mouse voy a jugar que es el evento para pasar el mouse puede ser que el background sea blanco y el color sea es larga ahora sí creo que es está bien 2015 bien entonces ya está ahora y esa parte esa parte ya está ahora lo que falta diseñar es que con jackie se tengan dos funciones ya aquí miren en este botón en este icono aquí voy a ponerle un hueso guantes para que aparezca ese icono de la manito y parezca pues un motor muy bien ya está aclarado algo menos agregadores y entonces ahora necesito pues que esto de aquí funcione ya para eso voy a utilizar ya ves que así que voy a crear un nuevo archivo mira control tiene para crear un nuevo archivo archivo en la carpeta js miren la carpeta js aquí lo voy a guardar en el menú punto js ya está ahí tengo un punto js y en el html aquí antes de cerrar el body mira aquí en el body aquí voy a vincular script crc js no punto j es y lo que voy a hacer es utilizar algunos haití para quien sale en el javascript así que en este lado voy a poner un aire nada también y en el spam y le voy a poner pt en el menú y el nombre de ser bien y nada más creo que a las antillas en este enlace a mover muy bien estamos aquí en lujo js y vamos a empezar a hacer el script así que lo primero que vamos a hacer es crear un par de variables la variable vtm no va a almacenar en este caso el dip o mejor dicho el spam con la juve tiene menos así que en esta variable menor o mejor dicho 20 nm voy a seleccionar ese elemento como document punto que el evento vaya por ahí cdn entonces este elemento este elemento de aquí se va a guardar en la variable de tn y lo puede ofrecer vaya allí y aquí voy a guardar entonces el nap que es el nap de aquí se va a guardar en la variable en la app y el dip con el aire ivtm no se va a guardar aquí ahora lo que necesito es que para hacer clic en este en este botón de aquí porque es una variable para es una variable entonces vtn de nuestra wtm y voy a ponerle un evento que va a ser cuando haga y cuando haga clic qué cosa vas a hacer voy a tener una función y qué es lo que voy a hacer a ver primero voy a hacer que el nap al nap se le agregó una clase las list y aquí vamos a ver una clase que no lo aclaró en el csd sobre te lo voy a crear no se va a llamar mostrar esta clase voy a mostrar todavía obviamente no esté aquí tú puede usar este de aquí yo también este a cualquier lado voy a hacerlo así así de hacer voy a poner con la comida de aquí porque todos ya está entonces lo que estoy diciendo es que cuando haga clic en el botón este de aquí es tv tn menú con la liga y al nap porque es la que está guardado sea externa se le va a agregar la clase mostrar y quico sabaté la clase mostrar eso vamos a crearlo aquí al ver aquí voy a hacer esto para que esté separado así aquí voy a ponerle y miren a este no voy a darle un led para que les dé menos 100 ahí está aquí la izquierda no sólo que no se ve y aquí voy a crear una clase que se llame mostrar y lo hacemos para tenerle fe pero entonces ahorita en la que estas la izquierda no sólo vas a llevar a desarrollar varios vídeos el nap está aquí en la izquierda que es tiene al menos 100 por ciento y conduce le agregue la clase mostrar le va a volver a su posición original entonces acá éramos de ver si decía como yo voy aquí vamos a ver vamos a actualizar estudio aquí ya esta es la muestra pero obviamente aquí está todo tosco así que aquí debe ser punto 400 y ahora si ves ya está hace esto y actualizará en la vista previa a veces no te funciona y es que para utilizarlas y esta vez ahora si por cada vez que yo hago clic se le agrega a este menú a la clase mostrar la clase mostrarte en el excel y como ya hemos hecho varias veces que de repente y tú nos sigues tiempo y ya sabes cómo hacer esto en el vidente no hicimos esto pero con entonces ese puro detalle está en que navegadores este por ejemplo móvil los más antiguos por funciona y habías el problema entonces con netflix y ya reciba a funcionar tenemos una veloz pero al momento así que esto nos aseguramos de que funcione y está mira ahora sí muy bien así que ahora vamos a hacer valer a los del bando segundo por aquí y vamos a hacer el banner así que aquí voy a poner un informe a la semana dentro de semana sí y dentro de esto va a haber un h 2 con la clase título y al ver a poner título y al mismo tiempo un párrafo con la clase de banner y ponerle banner párrafo del texto y mira ve aquí tendría que haber una imagen y la imagen no puede estar dentro del contenedor porque imagen si ocupa todo el ancho así que aquí voy a poner una imagen una clase ing y esto va a estar así ahí está de ser el atajo o sea la etiqueta img y poner las de banner basada al mismo nivel que el contenedor y adentro del contenedor recién va a estar el título y va a estar este el h2 y el par y ya está mira tú bien el atajo que está porque tu tap y muy bien y tengo el imponer la semana no tengo ninguna clase ing planeta se propaga el ing es una etiqueta img con la clase bandera ing y al mismo nivel un link con la clase de contenedor aquí en ese arrese voy a vincular la imagen img banner o jpg de risa aquí puedes utilizar esto en html veces siempre actualizado ya aquí vamos a ponerle el título voy a ponerle sería este que ese aquí de educación de educación al alcance y aquí estudio después que no puedes copiar y nosotros y ahí está el dip con la clase banner ya aquí me debe mira aquí se dan cuenta en los pequeños espacios ven alrededor se dan cuenta ya eso es por un margen que el body así que aquí miren en body es algo destaca en voy voy a quitarle el marfil martín 0 y ahora sirven martín 0 al body muy bien entonces ahí tengo una estructura del banner ya tengo ahí la estructura del barco así que si image banner ya está así que vamos a hacer aquí el banana trabajito de esto voy a poner qué estilos del bajo antes de empezar en el banner algo que se suele hacer es crear una clase mira aquí una clase se le seleccionado de repente en el menú en el menú para que para que siempre haya un elemento que esté diferente así que mi enlace se le voy a poner sube aquí para que el color sea blanco y el fondo sea blanco y el color sea les dé una cita el primer lee en el islam en white ahí está este link en la etiqueta menú link y ordenarse para que el primero pues de indicio de que estoy ahí no estoy en la página de inicio en la clase y el mérito en el link select cuando tú estés en la otra página en la página curso por ejemplo ese legendary aquino ya está ahí en serie y aquí iría pues como ya mencioné que vincula la otra página nada más ya está aquí tenía sello largo porque el fondo está blanco y te vamos a dar mejorar eso muy bien entonces ya estaba recibamos a pasar con el váter y nos vienen aquí para no redundar xml y ese laburo porque es lo mismo se le aplicó esto al select que se le aplicó cuando pase el mouse en el menor link en ser el mejor valor repetir el mismo estilo muy bien ahora vamos a empezar en el bandera al banner vamos a primero darle si se dan cuenta de bandera llegada o empieze de aquino desde el principio entonces voy a ponerle al banner un partido de menos 60 píxeles porque 160 porque al general que hay al menos foto por 60 píxeles a todo ahí tiene 60 píxeles de alto por sus menos en menos de 60 píxeles ahora y lo tapa todo para evitar eso voy a buscarla en posición relativa para poder aplicarle un zeta index de menos mil pues voy a prenderle para asegurarme de eso y ahora sin mirar el cuando está arriba y está en la parte de atrás no no no no tapa ni al título día el botón ahora sin mirar este texto de ahora está en blanco así que vienen aquí aquí era color blanco y burn esta vez se resiste al banquillo tengo el banner de bazar hasta ahí bien ahora vamos a ver aquí nuestra página hacia el reducirlo todo para ver también cómo queda ahí está el móvil el texto se ve solo se ve el título nada más entonces mira voy al título el texto que existe que es ese párrafo le voy a dar efecto porque el móvil no saber sólo se deberá estudiar así que vamos a empezar con el contenedor y es que el contenedor tienes que estar aquí arriba encima así que como quiero que esté aquí lo que voy a hacer es hacer llegar la exposición upson de eso lo hicimos en el vídeo también de la página otra página responsive puede posicionar solo puede darle un toque de 50% un es de 50 por ciento y un transform translei en x de menos 50 por ciento y también para centrarlo totalmente podría posicionar sólo hay un wing del 100% blanco y un conocido blanco y bueno yo tengo andar para hacer esto para esto aquí está este ml lo puedo minimizar este código y aquí está para que no me moleste tanto código html así que aquí vamos a crear un día por la clase mail o mejor dicho una etiqueta a mí con la clase media para utilizar después este seleccionar en el css no seleccionar las etiquetas muy bien ahora aquí también vamos a ponerle un contenedor para que limite y ha mencionado para que limite el contenido y vamos a crear estas columnas acá tres columnas entonces a esto de aquí vamos a ponerle haciendo de un section en la clase info dentro de ese 6 jon con la clase info vamos a poner unos artículos con la clase de info y van a haber tres conciertos dentro de cada uno de ellos va a haber una etiqueta ing ing al mismo tiempo abre el título a ver en este y fue el eje directamente el atributo crc es un atajo de menú ya que no quiere hacer manualmente unos puntos que otras referencias están los atributos los pongo entre corchetes ahorita va a ser para qué luego ahí mismo voy a poner un h 2 sería h 2 con la clase youtube título y la dignidad también voy a poner entre llaves para maximizar lo entre llaves voy a poner título y un dólar para que se vayan numerando como son tres mira son tres minutos 17 12 33 entonces se va a ir enumerando ahorita obviamente en una página real ya no van a hacer esto está h2o ifo título 13 y el no tiempo un párrafo con el texto triunfo existe y adentro de ese párrafo un texto lo que no sea mucho aquí a 2015 presión nota para que puedas ver y a ver tengo un sello con la clase info tengo tres artículos con la clase y en fútbol una y dentro de cada uno tengo mira ing ahí está la imagen ya vinculada mire ya tengo las imágenes mgu no instalaron la clase a manchados con la sequía título mira el título uno y otro dos o tres y adentro de cada info mundo desde cada barro y con eso ya tengo 2 ahora vamos aquí abajo del banner y los d el estilo de dice obviamente pues como ya mencioné en conjunto pulsador ya tu día en cada procesador cada desarchivo destino muy bien así que aquí vamos a empezar a hacer esto esto de las columnas de cada columna muy bien entonces aquí voy a seleccionar info columna y en cada uno de estos voy a darle un color que es el mismo color que estamos deseando que este de aquí así motóricas hasta ese conocido de ahí le ponen de un color blanco para dyn de 15 más un botón de 20 veces 30 eso depende bastante de cómo quieres tú que se vea y bueno aquí está muy pegado tú podrías hacer de repente que el banner este banner te hace un voto de 30 píxeles también o de 20 ya te dejo su criterio está y prácticamente ya está esto puede darle después formalizados puede hacer que sea más grande ya eso depende de ti bien vamos a la otra parte aquí también voy a reducir esto este es el info voy a reducir así tanto código hacer esto y aquí voy a poner un sección con la clase de cursos en los cursos pero un día con la clase de cursos habrá dentro de esa clase de cursos habría a ver este de aquí no va a ser un cursos título porque esto tú puedes después utilizarlo en otras secciones con ese estilo similar así que se lo voy a poner un así título al mismo tiempo van a ver aquí los knicks vamos a ponerle aquí a esto veo aquí unas columnas zapatería lusos orina y esto de aquí sería van a ver cuatro de estas 4 1 2 3 4 estas es un título y dentro de cada esto de esas columnas dentro de cada uno abre la etiqueta y elegir es igual cursos y bueno voy a hacerlo como el anterior me las es el envase número dos puntos tape g el atajo es más largo todavía hasta que se rece img 2 bien luego al mismo tiempo este de aquí va a ser estar con una descripción cursos d y dentro de ese psi con la clase de curso descripción va a haber un 73 que sería que traiga noche dos porque aquí hay dos aunque sería el título y este de aquí será un caché 2h 26 jon cursos h 2 sección título este va a ser un h 263 trabajando ahí sí vamos a ponerle o si va a hacer cursos el proceso y al mismo tiempo va a haber igual un párrafo con la clase de cursos xd y el dolor entre 10 a 9 puede ser ella depende de 910 mucho más ya está entonces saber y vamos a apoyar desde el atajo y ahí está nuestra clase cursos tengo h2o la sección título aquí ese título después lo puedes utilizar para otras secciones así con el mismo estilo un sello con la clase título perdón h2o necesario un título un dip con los recursos columna está hay cuatro de esos y dentro de cada uno hay una imagen con la clase de cursos y el eje indicó la clase de cursos descripción que va a ser este fondo medio negrito que va a contener ese texto y el h3 no es cierto el título de aquí y el barro mucho texto ahora aquí se vamos a poner algunas cosas aquí sí vamos a ponerle por ejemplo ahí está la mente vamos a poner aquí programación por ejemplo de diseño y graficó a lo que manejó espero que algún día hacer tutoriales de renuncia de tres demás ahí está ya está congreso ya tengo el sml de la sección en curso ya está muy bien así que vamos a hacer una prueba terminada hasta aquí nada más a ver aquí vamos a poner estilos de movimiento y aquí vamos a hacer algo diferente a ya nos falta el título nómina aquí sesión título la cacería nuestros cursos es ese hecho título sección título incluso de sesión título como eso el evento que va a estar siempre en casi todo pues arriba vamos a ponerle vicente pensáis a ver puede ser no sé direcciones 30 más o menos depende bastante 40 y un color aquí mismo como aquí va a ser un estilo general porque como ya mencioné pueden haber varios de esos en otras secciones voy a poner por acá arriba ya aquí arriba de todo aquí puedes poner los generales ya depende de ti tuviera arriba aquí sólo vamos a salir de curso muy bien lo que vamos a hacer aquí es seleccionar suscripción que es este kit que contiene el texto éste va a estar encima de la imagen latina así que posición absoluta obviamente para que se pueda este fusionar mil pulsos columna como salimos y yo composición relativa y para este curso descripción vamos a darle 0 0 el color blanco también está blanquito y voy a ponerle así encontrado rgb 000 0.4 y ya hay también dependería depende de cuánta intensidad quieres ponerle a 0.5 más oscuros a 0.4 aquí creo que está y tomás es cultura y no ocupa todo el ancho mira hasta aquí tú puedes pensarlo como tú quieras yo voy a ponerle un muy de haber 60% y un wing de 60 por ciento luego al título 6 en 3 píxeles y pueda imagen de cinco pisos si quisiera los costados no esté tan separado y y aquí para que ocupe todo vamos a darle siendo hasta preocupe todo el alto por todo el alto y también a esta columna martín botón de píxeles para que esté ese paradito está que también un panel de cinco píxeles puede ser de cinco ya depende de cuando quieras darle a tú ten en cuenta que aquí si el texto es bastante se va a salir ten en cuenta eso y ya está y ya está necesitamos hacerlo responsable muy bien pero eso ya está esta parte y ya era muy rápido amor sea el futuro ya nos queda poco tiempo más en el futuro ya en otros ha sido todo relatos y fuera del main afuerita del mail emilia footer con latas de fruta también y bueno aquí no se va a limitar el contenido el contenido depende de que esto esté al costado este medio si quieres que esté aquí en línea no también tendría que ponerle un contenedor en este caso con lo que lo así que si esto así y aquí en el futuro vamos a poner un dip con las veces social que va a tener a los a los chicos dentro voy a poner la siguen a cuatro y con icon y a una dama porque le voy a especificar cada uno es un hombre por cuatro ya está antes de eso antes de hacer ese de ahí icon social y luego voy a de la clase tengo un social al con facebook y facebook y twitter se acuerda que son los nombres que les pusimos fantástico se aguarda cuando los empezamos a configurar estar un poquito y el 2016 l y con eso miren yo tengo el futuro vamos a acs s vamos a caballito pre separarlo así estilo de shooter y aquí en el futuro vamos a seleccionar un futuro 33 en un color blanco incluso aquí podrían aquí he puesto que no sería aquella evidencia etiquetas y ahí está y aquí pues su respectivo hr obviamente acá tienes que poner ya el link de la red social a la cual va a llevar ya está ahora si me miran revisa esto después de ti de etiquetas y ahora sí ahí está el futuro vamos a seleccionar nuevo la lumbar marín de diez píxeles text align center y voy a seleccionar ahora todos los chicos por poner footer y voy a poner así 9 más todos todas las clases comiencen con algo mío así que estén dentro de futuro sea entonces no todas las clases que empiecen con algún guión y que estén dentro de futuro en este caso va a seleccionar todos los íconos a eso que darle un color voy a darle voy a quitar la decoración vamos a darle un side 20 píxeles y un poquito de 30 está badín de 10 ahora eso de aquí vamos a hacerlo redondito así como pueden ver acá así que voy a ponerle desde este vamos a poner un color como el del fondo y un background blanco y también aquí a ponerle un borde por de radios de 50 por ciento y hemos especificar la caja el alto y el ancho de aguas con el un wing de 50 fire de 50 y esto de aquí no se aplica porque esto es un elemento en línea así que voy a ponerle un display unai blog pueblo muy bien en high de 50 píxeles de 40 40 y está y está ahí ahí está podríamos aquí saben que especificar vemos que se adentró es social porque de repente aquí disfrutar pueden haber otros iconos entonces los iconos con las clases que empiecen con la clase de icon que estén en redes social y a la vez el dentro de la clase futuro y ya está muy bien con eso ya tenemos terminado la parte de móvil nos faltaría pues hacer que esta web sea responsable porque me ellos maximizó hice de todo feo no debe llevarse así así que bueno ya eso vamos a hacerlo ya nosotros vídeo que lo que hecho como en la hora de tutorial hasta ahí es también se le corregirá en otro vídeo porque le corrijo y listo amigos hasta ya vamos a dejarlo en esta primera parte de este vídeo espero que no nos aburra una hora así que bueno ya voy a grabar de inmediato en otra parte para subirlo de una vez así que bueno me dio se decidió todo por esta ocasión esperamos de podido servir hasta aquí el vídeo y recuerda que puedes seguirnos en nuestras redes sociales tanto en facebook como en twitter están en la descripción para que pueda seguir seguirnos cualquier consulta de un tutorial puedes escribirnos por el facebook y para trabajos que quieres que una página por ti un proyecto por el correo de juegos un desarrollo bajo tejido proyecto web.com también recuerda que puede ser éste ingresar al grupo de diseño y desarrollo web en facebook ha impuesto en ingenieros cónsules de tus dudas bien así que existe serbio este vídeo online suscríbete si aún no has hecho y puede compartir luego también con tus amigos así que bueno ha sido todo por este primer vídeo no vamos a ver el siguiente y nos vemos