Wow... esta es la primera vez que veo tus videos y quedé impresionado (y mira que pocas cosas me impresionan). Excelente aportación, muchas gracias. ¡Eres un capo! Saludos...
Lo que le sigue de bueno este video, me ha agrado demasiado. Como puedo hacer para que el skill y el percent los modifique desde javascript, ya que estos me los dara el backend (ajax y php). PD: La parte de la funcion solo se puede en sass verdad. En mi caso solo usamos css.
Genial Alvaro! muy bueno el vídeo. Al final fue mejor meterlo en un mixin, aunque en el proceso de optimizado yo usé @Extend para no tener que complicarme tanto xD
He buscado como hacer esto en tiempo real y no lo encuentro. Asi esta muy bonito y todo pero es fijo, como podríamos hacerlo al retornar algun objeto de una api por ejemplo o de base de datos. Se ve bonito pero no se si funcional
Muy buenos los videos Alvaro, una pregunta estoy usando webstorm pero no puedo poner un lorem en jade como en sublime, hay que que configurar algo para que aparezca presionando tab como en sublime.
buen vídeo, buenas explicaciones, me gustan los cursos que das y me gustaría que en los trucos css agregues haciendo slider-show, jumbotron seria genial
Guille Solimo lo dudo, PHP es un lenguaje de programación y Sass es un lenguaje de maquetación, que incluye algunas variables como en programación, pero luego estás se convierten en css.
Buenos días, saludos cordiales... Quisiera preguntar si esa vista en vivo es directo desde tú editor de código y cuál sería. Actualmente uso Adobe Bracket que también posee la misma vista en vivo y actualiza sin usar tanto el comando para refrescar. ¡Gracias, saludos!
En este video Alvaro se ve jodidamente cansado, y solo puedo sentir respeto por el; tener la disciplina de no faltar con estos videos, que en su momento fueron clave.
Una pregunta por que no usas llaves? y como se llama el otro lenguaje que usar de parte del css? Tus videos me estan sirviendo demaciado Muchas gracias!!
SASS es como un framework de CSS (tecnicamente es un preprocesador) que usa llaves y existe SCSS (Sassy CSS, indented syntax) que es un SASS que no usa llaves.
Exacto. Me enfoque contestando la 2da parte de la pregunta de ariel, la parte del CSS (SASS) que olvide mencionar que el HTML que esta usando sin tags, es JADE, y JADE no usa llaves.
Me parece genial esa barra... como se puede hacer para que el numero, por ejemplo: HTML5 86% ... valla aumentando progresivamente? ósea 1% 2% ..... 86%....
Es la primera vez que veo tus videos y estoy muy pero muy perdido pence que era css pero no sabia que se podian poner funciones y veo tu extencion de archivos y veo que dice .jade y .scss y .css ¿me podrías indicar el nombre de tu video donde empiezas las introduccion de esas extenciones y archivos?
Mejor hereda el color o imagen de fondo: Background: inherit; Me falta algun parametro que alinea la imagen de fondo heredada a la imagen de fondo del padre
+Andres Jimenez +Efrain Ramirez subió a Github puedes conseguirlo ahí, o de lo contrario hacer el ejercicio tu mismo, vamos no es muy complicado no te quita mucho tiempo.
Hola que tal buenas, alguien que me pueda ayudar con la siguiente duda: muchas gracias y por cierto que buen video, me esta ayudando ahorita para una pagina que estoy diseñando El problema que tengo es que quiero agregar una celda mas para el ingreso de información, mi problema es que no encuentro la manera y quería ver si me podrían apoyar
Muchísimas gracias, lo implementé en un proyecto muy importante!!, saludos desde Aguascalientes México!!
Parabéns pelos vídeos!! Consigo compreender bem apesar de estar em espanhol e obrigado por compartilhar seu conhecimento. Me ajudou!
Se me vino una idea, entraré a maraton de madrugada para practicar este video. Esta bueno.
Fantástico... tendré que verlo un par de veces pero queda genial....
Me saco el sombrero 😅
Exelente!
Wow... esta es la primera vez que veo tus videos y quedé impresionado (y mira que pocas cosas me impresionan). Excelente aportación, muchas gracias. ¡Eres un capo!
Saludos...
porfinnnnn alguien que explicaa!!!!
Que buen vídeo, pero tengo una pregunta, si por ejemplo esos porcentajes los obtengo desde javascript , ¿Hay alguna forma de pasárselos a css?
Alguna respuesta?
Lo averiguaste?🤔
Lo que le sigue de bueno este video, me ha agrado demasiado.
Como puedo hacer para que el skill y el percent los modifique desde javascript, ya que estos me los dara el backend (ajax y php).
PD: La parte de la funcion solo se puede en sass verdad. En mi caso solo usamos css.
Genial Alvaro! muy bueno el vídeo.
Al final fue mejor meterlo en un mixin, aunque en el proceso de optimizado yo usé @Extend para no tener que complicarme tanto xD
Eres un crack! Con ganas de probarlo en mis proyectos. Gracias Álvaro!
Yo lo hice en CSS nativo este es el código
HTML:
Layout
CSS:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #000000;
min-height: 100vh;
color: #FFFFFF;
}
h1 {
text-align: center;
font-family: verdana;
margin-bottom: 3rem;
}
.html {
--uno: #FF7700;
--dos: #772200;
--percentage: 95;
color: var(--uno);
}
.css {
--uno: #0081EE;
--dos: #004077;
--percentage: 90;
color: var(--uno);
}
.js {
--uno: #FFCE00;
--dos: #995600;
--percentage: 75;
color: var(--uno);
}
.progressBar {
--deg: calc(var(--percentage)/100*180deg);
--result: linear-gradient(var(--deg), var(--uno) 50%, var(--dos) 50%);
height: 15rem;
width: 15rem;
background: var(--result);
margin: auto;
border-radius: 50%;
position: relative;
font-family: verdana;
font-weight: bold;
}
.progressBar::before {
box-sizing: border-box;
height: inherit;
width: inherit;
background: linear-gradient(#000000 50%, transparent 50%) content-box;
padding: 1.75rem;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
text-align: center;
line-height : 10.5rem;
font-size: 1.5rem;
}
.progressBar::after {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 15.3rem;
width: 15.3rem;
background: linear-gradient(transparent 50%, #000000 50%);
border-radius: 50%;
padding-top: 1.5rem;
position: absolute;
top: -.15rem;
right: -.15rem;
}
.html::before {
content: "HTML";
}
.css::before {
content: "CSS";
}
.js::before {
content: "JavaScript";
}
.html::after {
content: "95%";
}
.css::after {
content: "90%";
}
.js::after {
content: "75%";
}
Buenas, no logro ver la relacion entre el HTML y el CSS.... Podrias revisarlo? Grax!
Hola Alvaro, mismo resultado multiplicar el percent * 1.8
Hola soy de Venezuela gracias por el vídeo solo una duda sera que se puede operar desde mysql y php es decir que este bajo el dominio de una etiqueta
Excelente video MAESTRAZO!
He buscado como hacer esto en tiempo real y no lo encuentro. Asi esta muy bonito y todo pero es fijo, como podríamos hacerlo al retornar algun objeto de una api por ejemplo o de base de datos. Se ve bonito pero no se si funcional
Hola, están muy buenos. LA parte del Index la puedes compartir?
Muy buenos los videos Alvaro, una pregunta estoy usando webstorm pero no puedo poner un lorem en jade como en sublime, hay que que configurar algo para que aparezca presionando tab como en sublime.
Finally a masterpiece CSS tutorial, subscribed ""
buen vídeo, buenas explicaciones, me gustan los cursos que das y me gustaría que en los trucos css agregues haciendo slider-show, jumbotron seria genial
Eres un monstruo!!! jjj genial
Muy buen tutorial, me preguntaba si en lugar de usar sass uso php, puedo lograr lo mismo, no? gracias!
Guille Solimo lo dudo, PHP es un lenguaje de programación y Sass es un lenguaje de maquetación, que incluye algunas variables como en programación, pero luego estás se convierten en css.
buenas, soy nuevo en tus videos. Es posible que en vscode para los before y after se use :: y no : ?
Hay forma de que se haga dinámica?
alvaro....muuuy buen tutorial, bien explicado, una pregunta, ¿también se puede hacer lo mismo utilizando Jquery-UI? para ahorrar tiempo.
creo que el giro de la barra de progreso se puede solucionar girando los grados del degradado solamente
Por eso me gustan sus videos, enseñan muchas cosas :) buen video
que buen video
esto se puede haces condatos provenientes de una base de datos, es decir con php , mysql, JS, y html? es mi duda, de ante mano gracias.
Rajado el tutorial... gracias ♥
excelente video me sirvio mucho gracias
Al momento de agregar. no me detecta los cambios y no aparece la gráfica.
Hola una pregunta diseñar un pagina para un barra para controlar liquidos en lugar de la progress bar
demasiado bueno tus videos, aunque deberias poner el codigo para descargarlo ya que no me da el resultado
Si de verdad quieres aprender debes hacer que funcionen
La practica hace al maestro
Ahora mismo me doy cuente que muuuuy poco de css
Buenos días, saludos cordiales... Quisiera preguntar si esa vista en vivo es directo desde tú editor de código y cuál sería. Actualmente uso Adobe Bracket que también posee la misma vista en vivo y actualiza sin usar tanto el comando para refrescar. ¡Gracias, saludos!
Utiliza un IDE llamado Web Storm
Boa noite, por favor, consigo o arquivo css e html desse video? No github não encontro ....
Esta algo loco esto... voy a ir por partes para comprenderlo bien...
Woww!! Increible buen video :)
En este video Alvaro se ve jodidamente cansado, y solo puedo sentir respeto por el; tener la disciplina de no faltar con estos videos, que en su momento fueron clave.
Y como podriamos hacer que funcione en tiempo real
Una pregunta por que no usas llaves? y como se llama el otro lenguaje que usar de parte del css?
Tus videos me estan sirviendo demaciado Muchas gracias!!
SASS es como un framework de CSS (tecnicamente es un preprocesador) que usa llaves y existe SCSS (Sassy CSS, indented syntax) que es un SASS que no usa llaves.
Oh muchas gracias, ya no estoy programando pero gracias jeje
Cuando no usas las llaves, eso es jade (ahora PUG me parece), que igual es un preprocesador y no las necesita.
Exacto. Me enfoque contestando la 2da parte de la pregunta de ariel, la parte del CSS (SASS) que olvide mencionar que el HTML que esta usando sin tags, es JADE, y JADE no usa llaves.
a partir del &: ya no me sirve nada ¿qué debo hacer?
Me pasa lo mismo
debes sacar el before afuera, asi: .circular-progress::before{ ......} lo mismo para el after saludos
¿Porque el sass me marca error las variables? :,v
Me parece genial esa barra... como se puede hacer para que el numero, por ejemplo: HTML5 86% ... valla aumentando progresivamente? ósea 1% 2% ..... 86%....
Raul Anampa ya deberías de hacerlo con Javascript
Genial pero no me funciona el linear-gradient a que se puede deber ???? Gracias
tal ves la version del navegador
Es la primera vez que veo tus videos y estoy muy pero muy perdido pence que era css pero no sabia que se podian poner funciones y veo tu extencion de archivos y veo que dice .jade y .scss y .css ¿me podrías indicar el nombre de tu video donde empiezas las introduccion de esas extenciones y archivos?
ruclips.net/video/xu0lVyrA8Y0/видео.html
ruclips.net/video/XcLiwuTMSwo/видео.html
Gracias por responder
tengo una duda porque en el html colocas solo .circular-progress y no como una clase, a mi no me sale el circulo
Álvaro utiliza un framework para acortar código html, luego se compila como divs, tú debes hacer los divs normalmente.
El esta utlizando Jade y scss para poder compilar el ejercicio es un framework que acorta y hace mas eficiente el proyecto
Mejor hereda el color o imagen de fondo:
Background: inherit;
Me falta algun parametro que alinea la imagen de fondo heredada a la imagen de fondo del padre
compartes en codpen ?
+Andres Jimenez +Efrain Ramirez subió a Github puedes conseguirlo ahí, o de lo contrario hacer el ejercicio tu mismo, vamos no es muy complicado no te quita mucho tiempo.
Si tranquilo luego me di cuenta, salu
jejejejej una pregunta como haces para las caritas que salen en tu video de compilacion
es una aplicacion para compilar los archivos!
prepros.io/
para ya no usar node!
me parece interesante pero El Github ya no funciona puedes arreglarlo por favor
👍
Hola que tal buenas, alguien que me pueda ayudar con la siguiente duda:
muchas gracias y por cierto que buen video, me esta ayudando ahorita para una pagina que estoy diseñando
El problema que tengo es que quiero agregar una celda mas para el ingreso de información, mi problema es que no encuentro la manera y quería ver si me podrían apoyar
envia el codigo original, porfa
thank you man
M-a-r-a-v-i-l-l-o-s-o.
y el codigo? XD
Solo dame el madito código.jpg