Тёмный

Curso Básico HTML CSS 2019 | #3: Construyendo sitio 

brda (Bruno De Angelis)
Подписаться 3 тыс.
Просмотров 1,6 тыс.
50% 1

00:40 Comienzo y HTML
23:00 CSS
25:25 Box-Sizing
31:57 Position Fixed
34:40 Sintaxis Margin y Padding
37:08 Breve explicación de Flexbox
58:58 Selector con pseudo-clase
1:04:09 Media Query
1:09:04 Flex-wrap
1:12:23 Suena el teléfono por 3ra vez
1:13:11 Aplicando JavaScript
Parte 3 del Curso Básico HTML CSS. En esta parte vamos a estar aplicando lo que vimos en las dos clases pasadas, y construyendo finalmente nuestra primera página web.
Al final del curso, van a haber creado este sitio: brunodeangelis.github.io/html...
Descargar material de sitio en GitHub: github.com/brunodeangelis/htm...
Canción intro: Artificial Music - Herbal Tea / tea
Canción outro: LAKEY INSPIRED - All I Need • Video

Опубликовано:

 

13 фев 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 45   
@carloseduardomaia655
@carloseduardomaia655 5 лет назад
Esto siguió su curso hasta aquí desde Brasil, estoy empezando en HTML y CSS, y fue de mucho valor a min. Estoy agradecido. ahora hace un tutorial explicando javascrit.
@hnatyk77
@hnatyk77 5 лет назад
Muy bueno el básico, excelente, te felicito..
@annyrondon7874
@annyrondon7874 4 года назад
¡ Gracias por tanto orden !
@bluefutbol1515
@bluefutbol1515 2 года назад
te amo xd
@Fabian-Garcia
@Fabian-Garcia 5 лет назад
Este video me ayudó muchisímo
@leniedor733
@leniedor733 5 лет назад
Buenas bruno, me encanta este tipo de videos, tienes otro nuevo sub y seguidor! Me gustaría añadir que en este video hay varias bajadas de resolucion, que en un monitor molesta más que si usas un mobil o algo más pequeño, pero al ser un video tan largo puede pasar al renderizar la grabación, ejemplo, en 33:31. (como nota, ya que parar el vídeo para gente nueva y ver que hace nuestro código y el tuyo antes de seguir ayuda mucho)
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Gracias! La bajada de resolución viene de parte de RU-vid que tira el video a 360p para ahorrar ancho de banda, pareciera. Se puede restablecer si manualmente se cambia la resolución a 720p o 1080p.
@leniedor733
@leniedor733 5 лет назад
@@BrunoDeAngelis gracias, Me di cuenta Al reiniciar la pagina que me lo hacia en diferentes tiempos del video y que no pasaba en el mismo... Tmb viene por micro cortes de la compania Telefonica, hacia tiempo que no me pasaba 😂
@gonzaaas1
@gonzaaas1 5 лет назад
TE amo
@jcdsdovhn
@jcdsdovhn 5 лет назад
Sos muy capo. Queremos ver mysql y base de datos!
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Cómo no, Franco! Lo tendré en cuenta.
@efrainespaderocanaviri3265
@efrainespaderocanaviri3265 5 лет назад
Un curso de JavaScript :)
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Está en mis planes!
@bluefutbol1515
@bluefutbol1515 2 года назад
Bro no tienes mas videos como este ¿?
@aleman1516
@aleman1516 5 лет назад
hay muchisimo que dejaste en el aire ya que no es desde cero ya que vas demasiado rapido y pues dejas mucho al final y ya modificaste sobre la marcha y no se puede seguir asi tal cual
@manueldavidjoserangelevans1604
amigo que navegador puedo usar soy mas de firefox sera que me sirve mas adelante para ser desarrollador web front-end ¿?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Vas a estar muy bien ya sea que utilices Firefox o Chrome, y por el momento no otros. Esos dos son los que se mantienen más al "filo" de la tecnología web. Saludos!
@manueldavidjoserangelevans1604
@@BrunoDeAngelis gracias amigo voy a practicar con tus videos y gracias por tomarte el tiempo de responder :)
@leniedor733
@leniedor733 5 лет назад
Una duda, si no usamos el WRAP (flex-wrap) la compresion de los elementos se hace igual, es decir, al cambiar la resolucion hace lo mismo, esto es porque lo hace por defecto? Esque he ido haciendo pruebas y cambiando la resolucion para ir comprovando quite esa funcion de CSS y hace lo mismo (responsive igual esa parte del WRAP)
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Hay ciertos breakpoints (tamaños de pantalla) en los que no se acomodarán bien los elementos a no ser que usemos flex-wrap, para que vayan saltando de fila. Vos los ves actuando de la misma forma ya que en el breakpoint de celular no usamos display flex, lo que significa que los elementos se acomodarán uno arriba de otro por defecto; esto es porque son etiquetas de tipo bloque (a diferencia de tipo en línea). Eso se explica en la primera parte de la serie. Saludos!
@leniedor733
@leniedor733 5 лет назад
@@BrunoDeAngelis Ah es verdad, entonces si fuesen etiquetas tipo inline se pondrian todas comprimidas sin usar el wrap? por ejemplo usando el SPAN/display en css cambiar su propiedad (de una etiqueta tipo bloque) se veria en linea todo?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
@@leniedor733 Así es! Los flex items se verían forzados a permanecer horizontal sin importar el ancho de la pantalla.
@josemerlo4888
@josemerlo4888 4 года назад
Has un curso de git
@nevardes
@nevardes 5 лет назад
¿Cuánto tiempo te demoró aprender toda la genialidad y destreza que demuestras en tus tutoriales?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Llevo unos dos años aprendiendo desarrollo web. Todavía me falta mucho para aprender y enseñar! Lo importante es perseverar y no abandonarlo. Por poco que sea cada día, todo suma. Gracias y saludos!
@nevardes
@nevardes 5 лет назад
Me gusta tu ironía al momento de iniciar tus tutoriales, la soltura y la fluidez verbal te suma puntos. Algún día yo también quiero hacer esto, ¿Serías tan amable por favor en decirme que tipo de micrófono usas para hacer que el audio sea tan nítido?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
@@nevardes Te agradezco mucho! El micrófono que uso es un Audio-Technica AT2020. Excelente relación calidad-precio.
@luism7524
@luism7524 4 года назад
Buenazo el video , pero ami me ocurrio un problema no me funciona el media query ayudame con eso porfa ....existen otras opciones¿
@BrunoDeAngelis
@BrunoDeAngelis 4 года назад
Puede haber muchas razones por las que no te funcione el media query. Para desarrollo responsive, es la mejor opción por lejos. Fijate de tener bien escrito todo como está en el video. Saludos!
@luism7524
@luism7524 4 года назад
@@BrunoDeAngelis gracias por la respuesta , si la vi muchas veces de hecho funciona con @media (min-width:768px) pero no me queda nada bien , por eso la pregunta o quiza alla alguna libreria que debi instalar o algo por el estilo ¿?, gracias
@zarkapixelart7461
@zarkapixelart7461 5 лет назад
Has otro curso para gente intermedia en HTML CSS
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Qué estarías buscando aprender precisamente? Gracias!
@zarkapixelart7461
@zarkapixelart7461 5 лет назад
@@BrunoDeAngelis Un juego web como algo parecido a habbo o club penguin
@zarkapixelart7461
@zarkapixelart7461 5 лет назад
@@BrunoDeAngelis ¿Cual es la diferencia entre HTML5 y HTML normal?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
@@zarkapixelart7461 Los juegos como Habbo o Club Penguin utilizan tecnologías más complejas que sólo HTML y CSS. Yo no estoy al nivel de hacer algo de esa magnitud. Respecto a tu pregunta, la diferencia entre HTML5 y HTML es la inclusión de etiquetas semánticas (explicadas en la primera parte de este curso); etiquetas como , y que son muy poderosas en sí mismas; y otros detalles menores sobre la sintaxis. Podés leer más al respecto acá: html.com/html5
@leniedor733
@leniedor733 5 лет назад
@@zarkapixelart7461 podrias ver python, java orientado a juego flash y demas, aunque como dice Bruno... Es complejo eso ya es usar varias tecnologias y como no tiempo a Aprender como todo. Yo hace anos hice un breve Mario de 2 niveles y use mas codigo de python que cualquier otra cosa, y es divertido la frustacion de que algo no vaya y descubrir bugs es el dia dia que uno se debe acostumbrar para aprender Pd. Mirar codigo de otras personas ayuda mucho, no solo el tuyo, en git y stack Hay gente que sube cosas que puede ayudar.
@leniedor733
@leniedor733 5 лет назад
Buenas, tendria una duda sobre la clase btn primary Cuando usas css el echo de que btn primary sean dos palabras separadas como es que puedes modificar el contenido de la clase de forma "dividida", es decir; Al nombrar una etiqueta con clase "X Y" tu puedes modificar a X por un lado y a Y por otro (usando .X {} e Y.{} respectivamente) Esta duda me viene porque el nombre de la clase "btn primary" tenemos a dos palabras entre las comillas, por lo que pensaba que al ser un elemento dentro de las comillas solo se puede cojer 1... Por lo que creo que lo que haces es "partir" el codigo css porque creo que no se puede usar // .btn primary // dado que no existe ninguna etiqueta primary en HTML ni dentro de btn, esa es mi teoria xD, ademas queda más ordenado. Ejemplo
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Correcto! Utilizar class="btn primary" en HTML implica que esa etiqueta tendrá aplicadas dos clases por separado. De esta manera, podemos tener botones que se vean igual (todos con la clase btn), pero de diferente color (primary, secondary, o la clase que elijas). Esta es la manera en que trabajan librerías de CSS como por ejemplo Bootstrap. Esto creo haberlo explicado en la segunda parte de esta serie de videos, aunque no recuerdo exactamente. Un saludo!
@leniedor733
@leniedor733 5 лет назад
@@BrunoDeAngelis muchas gracias, revisare el anterior video tmb!
@manueldavidjoserangelevans1604
amigo el background-color: inherit; que no lo entendi muy bien oculta los elementos ? o algo asi porque no me quedo claro
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
Hola Manuel. El valor *inherit* significa que esa propiedad (background-color) será heredada del elemento padre del elemento al que se esté seleccionando. Si el elemento padre no tiene declarada esa propiedad, irá a *su* elemento padre, y así sucesivamente. Podés leer más al respecto acá: www.w3schools.com/cssref/css_inherit.asp Para ocultar un elemento, se utiliza la propiedad *display: none*
@manueldavidjoserangelevans1604
esta heredando un fondo blanco ?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
@@manueldavidjoserangelevans1604 Así es. Hereda el color de fondo de la etiqueta *nav*
@manueldavidjoserangelevans1604
@@BrunoDeAngelis amigo es necesario conocer todas las propiedades de css ?
@BrunoDeAngelis
@BrunoDeAngelis 5 лет назад
@@manueldavidjoserangelevans1604 no, para nada. Con el tiempo vas a ir conociendo más. No es necesario aprendérselas de memoria
Далее
кукинг с Даниилом 🥸
01:00
Просмотров 848 тыс.
ASMR Programming - Starbucks Home Page - No Talking
39:19
Learn HTML - Full Tutorial for Beginners (2022)
4:07:30
HTML and CSS For Absolute Beginners | 2024 Crash Course
1:58:05
HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!
2:17:48
Learn Web Design For Beginners - Full Course (2024)
3:07:31