Comparto mi sitio de tarjeta personal (HTML y CSS)

Avatar

@steveenecheverrisilva

Buen día comunidad, este es un pequeño proyecto de una tarjeta de presentación personal, en la que practique lo básico en el desarrollo web (html y css), usando el editar de código visual studio code, aplicando flex-box para darle la estructura sencilla, iconos de font-awesome, y una media query haciendo una pequeña adaptación móvil.

Publicado en: https://styvensoft.github.io/card-site/

Diseño basado: https://dribbble.com/shots/2316130-Riche-vCard-Personal-vCard-HTML-Template

Avatar

@adgonzalez

Está chévere la verdad, muy bonito. Es curioso como llamas primero a las hojas y luego colocas la meta del viewport. Lo que si hubiera evitado yo es colocar div.container. Te felicito Steven muy bonita tu home.

¿Cómo hiciste para publicar este proyecto en un subdominio de GitHub?

Disculpa mi ignorancia xD

SAlu2!!!

Avatar

@steveenecheverrisilva

Muchas gracias por tu comentario. Y si tienes razón de no usar ese <div> allí, lo voy actualizar por un <main>. Para publicar el proyecto lo hice por medio del servicio de GitHub Pages que te permite alojar sitios estáticos en HTML, CSS y JavaScript. Así que tienes que primero crear un nuevo repositorio donde subas el código completo con la estructura de organización de tu proyecto, después te diriges a Settings, luego buscas el apartado de GitHub Pages y en la primera opción de Source, seleccionas la opción de Master Branch. Y listo ya te da el subdominio https. (También se puede personalizar la URL). Saludos!

Avatar

@adgonzalez

Exactamente Steveen, me referia al <main> lo viste sin problemas. De verdad agradecido por tu explicación referente al servicio de GitHub Pages.

Gran trabajo el tuyo la verdad.

Saludos!!!

Avatar

@steveenecheverrisilva

Si compañero, igualmente gracias por tu aporte, y de nada pues ya sabes como puedes compartir tus proyectos static web pages para que los puedas subir gratis. Gracias y saludos!

Avatar

@jhoneiberhurtado101770

La verdad amigo esta super tu pagina, te felicito!!, espero pronto también poder compartirles la mía.

Avatar

@steveenecheverrisilva

Gracias! Y claro compañero, comparte tu proyecto, sigue aprendiendo y adelante!

Avatar

@franyer_rangel

Wow Steveen, esta muy bueno tu card-web, jeje ; ) Sigue así, y que alcances todas tus metas. Saludos desde Venezuela :)

Avatar

@steveenecheverrisilva

Muchas gracias! Sigo practicando mas sobre el desarrollo web que es lo que me apasiona, y pues igualmente saludos! :D

Avatar

@steveenecheverrisilva

Que bien compañero que tengas tu canal donde puedas mostrar lo que ya aprendiste, ya mi suscribí!

Avatar

@franyer_rangel

Gracias Steveen, estaré subiendo contenido brutal que te podrá ayudar, saludos! :D

Avatar

@jhangonzales

Me gusto el diseño, pero la imagen del lado izquierdo te recomiendo usar SVG para que no pierda la calidad

Avatar

@steveenecheverrisilva

Si de verdad gracias por tu recomendación tienes razón, es bueno usar SVG, en este caso solo busque una imagen rápida que estuviera acorde a la paleta de colores que seleccione. para otro proyecto que lleve mas contenido tratare de usar ese formato.

Avatar

@sknirvana88472

Te quedo muy bonita, me encanto. Simple y llamativa a la vez, te felicito!

Avatar

@steveenecheverrisilva

Muchas gracias, pues esa era la idea un proyecto simple y agradable para practicar las bases.

Avatar

@efra-rz

Me parece que tu diseño quedo bastante parecido al del template.

¡Sigue así!

Avatar

@germanbaena67846

Steven, está genial, muchas felicitaciones; sin duda vas a ser un gran Desarrollador Web; lo de la firma "Steven Echeverry" me fascinó, se ve súper; tengo unas observaciones, yo tengo dos monitores, uno de 29" y cuando despliego tu web la imagen de la mano sosteniendo el celular se ve borrosa y otro de 19" cuadrado en el cual la imagen se ve demasiado alargada; mi monitor de 29" tiene un viewport width de 2500px y tu aplicación utiliza todo este ancho, considero que es mejor para monitores de este tamaño y aún pantallas más grandes limitar este ancho, darle un margen o trabajarle mucho más a las imágenes; pero en fin, genial, son solo pequeños ajustes. Un abrazo!

Avatar

@steveenecheverrisilva

German! Si gracias el camino para desarrollado web es el que estoy apuntando! por si te interesa sacar una firma propia o darle un vistazo a las tipografías lo hice en esta pagina: https://www.dafont.com/es/ las tipógrafas no son adaptadas para web pero lo que yo hice fue recortarla y pasarla a PGN. Y pues el template la verdad cuando lo realice no tome en cuenta la resolución de la imagen, deberia si pasarla a SVG para no tener problemas y al igual tampoco pensé en monitores con viewpor tan grande, yo tengo ahora solo un PC de 18,5" mas adelante hare esas modificaciones con una @media querie, igual muchas gracias por tus observaciones! Saludos!

Recuerdainiciar sesiónpara participar en la comunidad.