Transcripciones
1. Introducción al curso: bienvenido a esta serie de videos donde aprenderás cómo puedes crear fácilmente tu propio sitio web usando solo HTML y CSS. En esta serie, realmente
he hecho un sitio web simple usando solo HTML y CSS. No sólo aprenderás a hacer un sitio web, sino que también aprenderás el sitio web. Diseñar flujo de trabajo el cual creo que si sigues, definitivamente
aumentará tu productividad en esta ciudad realmente está haciendo este sitio web, aunque parece sencillo. Pero al construir esto, aprenderás lo fundamental y el flujo de trabajo de diseño Web que son muy cruciales en el proceso de
diseño web . En primer lugar, te
enseñaré a crear un layout. Este sitio web es un sitio web de dos columnas con una estructura simple. Entonces usaré HTML y CSS para diseñar este layout y después de diseñar el layout, añadiré contenido en él de esta manera, creando un sitio web que primero diseñaste la carga, ya sea en papel o en cualquier tipo de pintura o Photoshopped y luego darle vida usando HTML y CSS para luego agregar contenido hará que tu proceso de desarrollo sea mucho más fácil y bien organizado. En primer lugar, déjame decirte, este curso no está pensado para un principiante completo que no sepa nada de HTML y CSS. Asumo que tienes una comprensión muy básica fuera de HTML y CSS como, digamos, por ejemplo, ya
sabes qué etiquetas de encabezado, etiquetas de
párrafo, hotel target CSS I D y cambiar el color de fondo en Sitra. Si quieres aprender sobre los conceptos básicos de HTML y CSS, puedes ir a la página web azul de tres escuelas. Tienen algunos asombrosos organizarán contenido, por lo que dicho eso, empecemos.
2. Lectura principal: En primer lugar, déjame mostrarte el diseño que diseñé usando el Victor Sort en línea gratuito para el cual
también se llama Vector V E C P. R. Solo busca en Google y encontrarás esto. Es un programa increíble para hacer de Victor arte en línea. Aquí acabo de utilizar formas básicas toe construir una pendiente. Este diseño se divide en diferentes secciones. Esta caja fuera de negro es el rapero que sostendrá todos nuestros elementos dentro de la página, el hash o la libra Signos delante. Fuera de este rapero significa que declararé esto como un yo d en mi Dave. Después de esto tengo el jefe de sección que será un live con un encabezado de idea. Y dentro de esto tengo el logo el cual también será un live con un logo I D. Entonces tengo este nunca bar. Después de esto, no
tengo otro Div con un contenedor i d el cual sostendrá nuestro contenido principal y esto tiene a sección izquierda y derecha. El apartado izquierdo tiene un poco apagado alrededor de persona calificada y la sección derecha tiene un poco ahora 73%. Y al fondo Aquí tengo el pie de página con I d foto. Por lo que espero que la estructura de esta carga sea clara para ustedes. Ahora que hemos hecho un Leo, es el momento de citarlo. Entonces en esta serie de videos, estaré usando Corp en la que es una herramienta en línea para escribir html, CSS y JavaScript. También puedes usar un editor de texto como texto sublime o corchete Más pack plus si te gusta hacer este sitio web. Pero aquí usaré Corp en el que será perfecto para este tutorial. Entonces empecemos. Acude a la corte, renderizado Io y crea un vehículo y luego da click aquí para hacer un nuevo pin. Este es el General Interfiere Off Corp en esta parte izquierda se divide en tres secciones para la calificación de cada demonio CSS y código JavaScript. Y en la sección derecha verás la salida de este tutorial. No voy a estar requiriendo Js o JavaScript, así que lo minimizaré. No, ya
vamos a crear primero nuestro html Marco. En primer lugar haré un derecho reparador. Hash it up y pechuga Corbyn creará automáticamente el David Idea Rapper todo nuestro contenido irá dentro de este rapero Así que esta es una caja negra que te he mostrado en nuestro diseño bajo. Entonces dentro de este rapero, voy a crear el Dave con el encabezado de idea. Y luego dentro del obstáculo, crearé un trato con el logo de la idea. Estoy creando lo lucrativo dentro del aditivo de cabeza. Ya que nuestro logo está presente dentro del más duro No después de la cabeza. Ah, crearé la barra de gallo y después crearé el contenedor. Y si ven nuestro diseño, tengo que vivir dentro de este contenedor, la sección izquierda y la sección tardía. Entonces voy a crear estas primitivas dentro de este contenedor y finalmente fuera del contenedor. Voy a crear la sección de fotos. Entonces esto es todo lo que tenemos que escribir para el marcado HTML. Ahora viene la divertida parte dos estilo permitido. En primer lugar, vamos a restablecer todas las etiquetas mediante un estricto y luego dijo el margen a cero y despedida 20 y familia
extranjera Ariel, si escribes FF y presionas tabulador la cancha cuando lo hará o terminado, así que dale off a una familia extranjera aéreo. Después de esto, voy a apuntar al rapero, Así que déjenme dar un borde de color rojo para que puedan ver todos los elementos que va dentro de este rapero. Entonces apuntaré al encabezado. Vamos a darle un poco de descuento al 100% y la altura fuera de 100 píxeles. Vea cómo un rapero se ha expandido para sostener esta tive de cabecera. Ahora cambiemos el color de fondo para esto. Usaré un valor de núcleo hexadecimal. Puedes tener cualquier color que te guste, pero para este tutorial tengo este sitio web el cual proveen heck anotado Así solo daré click en este azul electrón el cual copiará la X anotada en el portapapeles y ahora la puedo pegar aquí para conseguir el color de fondo. Déjame quitar este vit porque por defecto es 100% así que no tengo que escribirlo. Ahora vamos a seleccionar el local. Voy a darle una altura de 50 pixel y ditto 100 pixel Y vamos a darle un
color de fondo . G se ha ido. Déjame cambiar la altura. 200 pixeles. Es una estupidez. Entonces vamos a escribir 80 pixel. OK, esto es bueno. Ahora déjame darle un poco de dedo de separación un rappel principal para crear algo de espacio. ¿ Verdad? Mordiendo 20 pixel. Por lo que esto aplicará el relleno de 20 píxeles en la parte superior, inferior
izquierda y lado derecho apagado. Esta avistamiento de aves rapero significa el espacio interior y el margen significa espacio exterior. Ahora posicionemos primero nuestro logo. Aumentemos el dedo del pie 200 pixels Ahora Está bien aquí. Yo le voy a dar un pariente de posición y ella es el top 20 pixel o que sea 10 pixels y dejó 20 pixel. Por lo que esto moverá el logotipo relativo a la cabeza de la Déjame poco más de 2150 píxeles. Después de esto, sumemos un número. Dale un corazón apagado 70 fotos de y están crecidas color fuera de esta luz tres y dan un margen Top off 10 picks in para que no se pegue con el más duro después de la barra nerviosa, voy a apuntar al contenedor. Entonces primero le daré una frontera verde para ver si la oposición de sección izquierda y derecha correctamente. Entonces apuntaré a la sección izquierda. Entonces aquí le voy a dar una altura de 400 píxeles. Ve cómo se ha expandido Lacandona. Significado son sección izquierda se ha creado dentro del contenedor. Ahora vamos a entregárselo. Por lo que quiero que esta sección izquierda ocupe 25% de descuento este contenedor por lo que escribiré. Escogido 25% y finalmente darle un color de fondo. Entonces elegiré este azul verdoso. Ver, nuestra sección izquierda ha ocupado un 25% de descuento en su espíritu, que es el diff con I d contenedor. Aumentemos la altura de este a 600 imagen. Ahora está bien. Ahora voy a apuntar a la sección correcta. Por lo que aquí voy a dar una altura de 600 pixel y un poco de descuento 73%. No le estoy dando un vencedor de 75% porque si lo hice 75 persona, entonces no habrá espacio entre la sección izquierda y la derecha. Entonces para tener el margen, lo
estoy haciendo 73%. Y finalmente cambiaré el color de fondo. Pero esta hoja de pato menta color. Por lo que hay una sección de tarifas. No te preocupes, está aquí al fondo. Entonces para tener este lado a lado, tenemos que hacerlos uso de la palabra. Por lo que primer piso, la sección derecha dos justo aquí notarás que la sección ha salido ofrece contenedor que es esta frontera verde. Entonces esto se debe a que sede floreció y elemento sale del flujo normal fuera del documento. Por lo que el flujo normal es de arriba a abajo. Entonces por eso esto se ha movido hacia arriba. Para arreglar esto, tenemos que despejar la flauta. Pero primero, flotemos nuestra sección izquierda. ¿ Quién salió tan derecho flotar izquierda? No. Se puede ver tanto nuestra posición correctamente, pero nuestra fuera de su cantina, incluso el rapero principal Contenedor. Entonces arregla esto. Tenemos que despejar el flotador para este nivel. Agrega un pseudo selector en el contenedor. Entonces contenedor derecho y luego a colon. Y justo después de que estén dentro de este contenido correcto Colin, marca de
doble condición, bloque de
exhibición y borrar ambos. Por lo que este es un truco usado para despejar los pisos y hace que el elemento llegue a su
piso normal . Normalcy son sección izquierda y derecha está dentro de su padre, que es el contenedor davit idea. Entonces démosle algún margen superior al contenedor. Diga margen. Top 10 pixels. No, finalmente, crearemos la foto. Por lo que derecha encontró foto, dale la altura de 100 fijador y le deja el color de fondo a este río americano. Y me imagino los 10 primeros pixeles. Déjame cambiar el ingenio de la sección derecha. 74%. Pero esto se ve bien. Por lo que enhorabuena, has hecho tu a colon diseño de página web usando HTML y CSS. Entonces ahora es el momento de agregar el contenido en un layout para que sea un funcionamiento ese sitio. Entonces primero voy a añadir un texto dentro de la locomotora. Para esto, voy a crear su etiqueta de tres encabezados. Y dentro de esto voy a escribir nombre de empresa. Se puede escribir cualquier cosa. Tú No, Hagamos primero esta barra de navegación. Voy a crear la navegación Manu dentro del encabezado y luego voy a crear la navegación dentro de la barra de knave. Entonces primero, creémoslo dentro del jefe de sección. La forma más común de crear una barra de navegación es utilizar una lista nórdica. Por lo que voy a crear un A nordeste. Y dentro de esto tendré elementos de lista los cuales contendrán un enlace. Tan bien, entonces
disminuirás por dentro y presiona tab Corte puede crear el mercado para ti. Entonces dentro del elemento de lista derecha A y presionado para hacer el enlace en la libra derecha X Chef . Por lo que si hace clic en este enlace, no irá a ninguna parte. Y luego dentro de eso una etiqueta, derecha, el nombre del elemento del menú. Entonces este es nuestro Manu, pero esto no parece un menú de navegación. Tenemos que añadir algunos CS es para que se vea bien. Pero primero, déjame posicionar este X tres elemento dentro de la inferior para que hash logo. Es de tres y dentro de esta posición correcta absoluta. Entonces voy a dar un top 20 pixel o decir, 30 pixel. Se ve bien. Entonces ahora trabajemos con Domino. En primer lugar blanco, el elemento U y luego flotó hacia la derecha. Después de esto, voy a apuntar al elemento Ally y hacer la pantalla en línea, por
lo que esto colocará el elemento uno al lado del otro. Déjame darle un margen superior al Elemento U Primero, margen
derecho, top 30 pixel o digamos, 40 Dixon. Además, vamos a dar una tasa de margen 40 píxeles para crear algo de espacio en el lado izquierdo. Entonces voy a apuntar al tipo A tan derecho hash A. Y dentro de esto, escribiré decoración de texto. Ninguno. Esto eliminará el subyacente Ahora vamos a dar una pelea de color y aplicar tu indulto de 20 píxeles por todos lados. Entonces, ¿así es como hacemos nuestro menú de navegación? No, eliminemos el color de fondo de este encabezado. Es decir, espera, um, en subasta porque le tengo un color blanco. Entonces cambia el color a negro, y ahora está mal. También voy a quitar el color de fondo off logo. Ahora voy a agregar algunas viviendas de efecto ho usando la pseudo clase sobre tan derecho, cabecera U l I un colon encima Y luego dentro de este primero, déjame dar un borde inferior para ver cómo se ve. Es como que se ve bien, pero voy a añadir borde en todos los lados por lo quitado fondo. No, se ve bien. Por lo que esta es la naba dentro del jefe de sección. No. Vamos a crear este menú en el nab nuestro live para esto. Yo sólo voy a cortar esta, um lista y probarla dentro de la Nath Bharti. Tengo que hacer un pequeño cambio en mi CSS. Por lo tanto, basta con quitar el encabezado hash y reemplazarlo con hash. Nunca porque nuestro elemento ul está ahora dentro del nervio. Bardo. A continuación, retire la parte superior del margen dentro del valor hash. Bueno, porque no requiero el espacio negativo que está empujando el menú hacia arriba y luego le daré un margen top de 20 pixel. Debe haber espacio aquí, permítanme cambiar el margen a 25. No, está bien. Sé que tenemos un logo y navegación creado. Añadamos contenido en la sección izquierda. Por lo que dentro de la sección izquierda, voy a crear su etiqueta de tres con las noticias de texto, y luego voy a añadir un párrafo fuera de texto ficticio. Entonces sólo escribe P, luego mayor que firmar y escribir. Cargarlo y presionado sobre Up Corp insertarlos automáticamente. Se necesita para ti. Copiemos y peguemos esto una vez más y cambiemos la calle H a trabajar. Por lo que tenemos el contenido colocado dentro de la sección izquierda. Es hora de corregir algunos CS es lo primero. Voy a apuntar al impuesto patrimonial dentro de la sección izquierda, así que voy a dar una despedida de 30 pixel y luego centrar este texto. Disminuyamos la fiesta en 20 pixel. De acuerdo, ahora vamos a apuntar a la libra derecha Peter sección izquierda y p Aquí. Veamos cómo se ve justificado. Por lo que alineo texto. Justificar ahora. No se ve bien. Cámbialo al centro. De acuerdo, entonces le daré un margen de fondo 10 píxeles o tal vez cuatro para arreglarlo. Entonces ahora cambiemos el color de fondo de esta sección izquierda a algo que se ve bien aquí. Voy a elegir el color, que he usado para el nunca. Por lo que he instalado un Google chrome Extensión politica. Esta es una herramienta increíble para escoger color de cualquier sitio web, así que haz clic en esta extensión y ahora haz clic en la opción elegir color de tono y ahora solo tienes que
aprovechar al máximo el color que quieras elegir. Y cuando veas el color en esta caja cuadrada superior, solo tienes que hacer click. El color será copiado en el portapapeles. Ahora voy a basar este color en la propiedad de color de fondo de la sección izquierda tan simple como eso. Por lo tanto, permítanme agregar subrayado hacia a etiquetar para que quede en pie. Nota un poco Aquí para este propósito tutorial, he agregado, están encabezando y algún tiempo de párrafo. Pero también puedes crear menú a un lado si lo deseas. Entonces siguiente es la sección correcta. Así que ve dentro de la sección de tarifas, vive y crea una tang Jordan y derecha. Bienvenido a mi página web. Entonces voy a crear una etiqueta de párrafo con algún texto ficticio. Añadamos uno más mejor. Entonces de nuevo voy a copiar todo este contenido de twin p y pegar para tener un poco más de contenido. Cambiemos el H un dedo del pie sufrido en Gaza. Siguen siendo espacio. Entonces de nuevo voy a copiar y pegar una cosa más y cambiemos. Eso es 12 contenido más ahora. Creo que tengo suficiente contenido. Puedes agregar más si quieres, pero voy a parar aquí ahora. Añadamos algunos. Ver ancestral a la H y Pitak dentro de la sección derecha. En primer lugar, voy a apuntar a la etiqueta H one. Probemos un margen a la izquierda. 20 pixel. Ah, tal vez 30 lo recoge. Dejémoslo por ahora. Vamos a cambiar esto aún más después de comer peinar dedo un párrafo. Siguiente objetivo, el tipo de párrafo. Déjenme darle un texto. El margen de la línea Centro de propiedades dejado 30 lo recoge o tal vez 10 lo recoge. Por lo que este párrafo se ve muy cerca el uno del otro. Por lo que voy a añadir un margen inferior o 20 píxeles para crear un poco de espacio para siempre. Creo que ahora puedo cambiar el estilo H one. Vamos a moverlo al centro mediante el uso del texto Alinear la propiedad centro. Entonces ahora no necesito el margen, así que quita esto, pero voy a agregar un margen fondo de 10 píxeles para hacer más espacio en la parte inferior. Ahora es el momento de cambiar el color de fondo. Por lo que voy a elegir de nuevo el crítico usando la herramienta de selección de color y luego probarlo en la sección correcta. Color de fondo. De acuerdo, Nuestra página web ahora tiene algo de contenido ahora. No necesito estas fronteras verdes, así que quita la frontera. Déjame añadir un poco de margen top toe esta H one tag. Por lo que margen hablar 20 pixel. No, está bien. Por último, es momento de agregar contenido a una foto. Añadiré algún texto muy básico dentro de una foto, así que usaré su etiqueta cuatro. Y dentro de esto advertí un símbolo copulado para esta u puede escribir en copia por ciento y luego
puse todo derecho reservado que un símbolo de pipa y hecho por ti. Ahora marquemos este texto. Déjame primero alinear esto al centro y luego Al Gore separándose por 20 pixel o tal vez 30 pixel No. 40 pixeles. No, está bien. Y por último, voy a cambiar el color de fondo de esta agua al mismo color gris que hemos utilizado para toda nuestra sección. Por lo que finalmente son simples. Upside está listo, y lo hemos hecho usando sólo HTML y CSS. Por lo que ahora que has creado tu sitio web de dos columnas, es momento de ampliar las habilidades aprendidas en este videocities. Por lo que intenta hacer sitio web de tres columnas o cuatro columnas. Basta con buscar en Google tres columnas o cuatro columnas. Orejas es ruidoso. Te superarás de todos y de ese novio diseñó el layout para ti y después de se haga
el layout, después agrega el contenido. Puedo apostar si sigues este principio que primero se diseña el Señor en papel o cualquier programa
gráfico y luego se implementa usando el HTML y CSS para luego agregar contenido, podrás soportar cualquier sitio web uno. Por lo que espero que hayan aprendido algo de mi serie de videos. Y si lo haces, te
pido amablemente que revises y un pulgar arriba. Me ayuda inmensamente y lo mantiene motivado para hacer más control. Gracias
Dev Gupta, Front End Developer and Designer
