Cómo construir e implementar su propio sitio de portafolio personal

¡Hola! Mi nombre es Kevin Powell. Me encanta enseñar a las personas cómo construir la web y cómo hacer que se vea bien mientras lo hacen.

Me complace anunciar que acabo de lanzar un curso gratuito que le enseña a crear su propio sitio web de portafolio totalmente receptivo .

Una vez que haya terminado este curso, tendrá un sitio de portafolio de aspecto elegante que lo ayudará a conseguir entrevistas de trabajo y trabajos independientes. También es algo genial para mostrárselo a tus amigos y familiares.

Vamos a construir la cartera utilizando la plataforma de aprendizaje de código interactivo de Scrimba y luego implementarla utilizando los servicios en la nube de DigitalOcean.

Además, DigitalOcean ha sido generoso al brindar a todos los que se inscriben un crédito gratuito , por lo que no le costará nada ponerlo en funcionamiento.

Esta publicación es un desglose del curso en sí, lo que le da una idea de lo que se incluye en todas las lecciones. Si te gusta lo que ves, ¡asegúrate de revisarlo en Scrimba!

Lección 1: Introducción

En la primera lección, obtendrá una descripción general del curso para que sepa qué esperar, qué debe saber antes de tomarlo y con qué terminará una vez que haya terminado. También les doy una breve introducción a mí mismo.

Alguna información general sobre el autor del curso

Lección 2: Configuración - HTML

En la segunda parte, les mostraré el entorno de Scrimba y también configuraremos el proyecto.

Todas las imágenes se suministran, por lo que no tendrá que preocuparse por buscar la foto perfecta todavía. ¡Podemos concentrarnos en construir la cartera!

No olvide que puede acceder a todo lo que necesita, desde texto y colores hasta fuentes y mucho más en nuestra página de diseño dedicada.

Lección 3: El área de encabezado - HTML

Finalmente es hora de comenzar a construir la cartera. En esta lección, crearemos la sección de encabezado. Repasaremos la metodología BEM para establecer nombres de clases en CSS, y creo que encontrará que esto hace que la navegación sea simple y fácil de crear.

Lección 4: sección de introducción

El siguiente es la sección Introducción de la cartera. Aquí es donde nos presentaremos y pondremos una foto de nosotros mismos.

Al final, agregamos una sección sobre las principales habilidades / servicios que podemos hacer. Por el momento, podemos completarlo todo con el texto "Lorem ipsum" como marcador de posición, hasta que esté listo para completarlo con su propio texto.

Lección 5: Acerca de mí, trabajo y pie de página - HTML

En este capítulo, estamos terminando el resto de nuestro HTML con las últimas 3 secciones: Acerca de mí, donde nos vamos a presentar con mayor detalle; Trabajo, donde vamos a agregar algunos de los ejemplos de nuestro portafolio y nuestro pie de página.

Los pies de página son ideales para vincular a direcciones de correo electrónico y le mostraré cómo hacerlo con una etiqueta. También podemos agregar nuestros enlaces de redes sociales allí.

Por ahora, todo parece un poco crudo y toda la diversión de CSS está por delante.

Lección 6: Configuración de propiedades personalizadas y estilos generales

Muy bien, ¡es hora de hacer que esa página se vea increíble!

En esta parte, aprenderemos cómo agregar propiedades personalizadas.

Si bien la configuración de las variables CSS puede llevar algún tiempo, realmente vale la pena cuando el sitio se ensambla. También son perfectos para permitirle personalizar los colores y las fuentes del sitio en solo unos segundos, lo que veré cómo hacerlo una vez que terminemos el sitio.

Lección 7: Aplicar estilo a los títulos y subtítulos

Habiendo configurado toda la tipografía necesaria, lo guiaré a través de los subtítulos para diseñar y diseñar los títulos y subtítulos en nuestras secciones.

Lección 8: Configuración de la sección de introducción

Durante los próximos capítulos, será bastante práctico, así que no se preocupe si tiene ganas de volver a ver los screencasts un par de veces.

Estamos manteniendo todo receptivo, usando CSS Grid y también sumergiéndonos un poco en el uso de emunidades.

Este es el ejemplo perfecto donde sobresale CSS Grid y vamos a aprender cómo usar propiedades como grid-column-gap, grid-template-areasy grid-template-columns.

Sección de introducción del sitio

Lección 9: Estilo de la sección de servicios

Para agregar un poco de interés, miro cómo podemos agregar background-imagea esta sección del sitio. Es una buena manera de dividir el segundo y evitar tener fondos de colores sólidos en todas partes, y también veo cómo podría usar background-blend-modepara cambiar el color de la imagen para ayudar a mantener la apariencia de su sitio consistente.

Como beneficio adicional, también vamos a aprender a diseñar botones cuando se coloquen sobre ellos o se seleccionen cuando pasamos por la página.

La sección de servicios del sitio

Lección 10: La sección Acerca de mí

¡Gran progreso! Así que esta es la sección más importante sobre mí. Este es bastante similar al Intro porque vamos a usar CSS Grid, pero mueve la imagen al lado derecho y busca un ejemplo útil para la frunidad CSS .

La sección Acerca de mí del sitio

Lección 11: El portafolio

La sección de cartera

En este screencast, mostraré cómo construir nuestra sección de portafolio para mostrar algunos de nuestros excelentes trabajos. ¡E incluso vamos a aprender a usarlo cubic-bezier()con un gran e impresionante efecto con un poco de estilo flotante!

Sección de cartera con elemento destacado

Lección 12: Agregar los íconos sociales con Font Awesome

Este elenco será dulce y breve, por lo que puede descansar un poco y aprender algunos trucos y consejos rápidos.

Agregar enlaces de redes sociales con íconos de Font Awesome es muy sencillo. Podemos hacerlo con una etiqueta y luego agregando un nombre de clase de un ícono que deseamos agregar.

Como ejemplo, aquí se explica cómo agregar un ícono para GitHub una vez que haya vinculado Font Awesome en su marcado.

Lección 13: Aplicar estilo al pie de página

El pie de página

Mientras los íconos están en su lugar, necesitamos agregar más estilo aquí para configurarlos de la manera que necesitamos.

Con un poco de uso de flexbox y eliminando el estilo de la lista list-style: none, es relativamente sencillo.

Lección 14: Configurar los estilos de navegación

Hemos dejado la navegación para el final porque muy a menudo es una de esas cosas simples que pueden tardar más en configurarse y realizarse correctamente.

Una vez completada, la navegación estará fuera de la pantalla, pero se deslizará hacia adentro cuando un usuario haga clic en el icono de la hamburguesa. Sin embargo, el primer paso es darle el estilo que queremos que se vea, ¡entonces podemos preocuparnos por hacer que funcione!

menú de navegación con estilo

Lección 14: Creando la hamburguesa

toma de la parte superior de la página con una flecha que resalta el icono del portamonedas

En este screencast, aprenderá cómo agregar un menú de hamburguesas para hacer la transición a la vista de navegación. No es un icono o un svg, sino CSS puro.

Vamos a tener una práctica de azar ::beforey ::afterpseudo-selectores, transición y, dado que no es un enlace sino un button, también necesitamos definir el cursor diferente cuando pasamos el cursor sobre el icono de la hamburguesa para indicar que se puede hacer clic en él cursor: pointer.

Lección 15: Adición de JS

Con un poco de JavaScript, lo guiaré a través de la implementación de una transición realmente agradable y suave desde nuestra pantalla principal a la ventana de navegación al hacer clic en el menú de hamburguesas.

animación de apertura / cierre de menú

También eché un vistazo a cómo podemos agregar un desplazamiento suave con CSS solo usando scroll-behavior: smooth. ¡Sí, realmente es así de simple! También es un gran tweet para Today I Learned (TIL). ¡No dudes en enviarte TILs a @scrimba y estoy seguro de que estarán muy felices de retuitearlos!

Lección 16: Creación de la página de elementos de la cartera

Con la página de inicio terminada, es hora de trabajar en una página de portafolio de plantillas que se puede usar para brindar más detalles sobre cada uno de los proyectos que está poniendo en su portafolio.

También vamos a aprender cómo vincularlo sin problemas con nuestra página principal para una experiencia de usuario agradable.

página de artículo de cartera

Lección 17: Personalización de su página

¡Aquí es donde entra la magia de las propiedades personalizadas de CSS!

En este video, miro cómo podemos personalizar las propiedades personalizadas que configuramos para cambiar el esquema de color de su sitio en segundos, y cómo podemos actualizar las fuentes rápida y fácilmente para hacer que el sitio sea suyo.

Lección 18: DigitalOcean Droplets: qué son y cómo configurar una

En este screencast, vamos a explorar las gotas de DigitalOcean. Son máquinas virtuales basadas en Linux y cada gota es un nuevo servidor que puede usar.

Puede parecer abrumador, pero son muy fáciles de configurar, muy personalizables y vienen con muchas funciones útiles, como un firewall automáticamente.

Panel de control de DigitalOcean

Te explicaré cada paso del camino para que sepas exactamente cómo preparar una gota.

Lección 19: Droplets de DigitalOcean: carga de archivos a través de FTP

Para finalizar todo el proceso, permítanme mostrarles cómo podemos cargar nuestro portafolio en la gota que hemos creado en el capítulo anterior y ahora está en línea para que otros lo vean.

Lección 20: Conclusión

¡Y eso es! Su próximo paso puede ser hacer que esta página sea todo sobre usted, agregar todos los ejemplos relevantes, contarnos sobre usted y hacerla vivir en una gota de DigitalOcean.

Una vez que haya reunido el suyo y lo tenga en línea, ¡comparta su portafolio conmigo y con el equipo de Scrimba! Puedes encontrarnos en @KevinJPowell y @scrimba en Twitter, ¡y estaremos encantados de compartir lo que estás haciendo!

Ver el curso completo

Recuerde, este curso es completamente gratuito. ¡Dirígete a Scrimba ahora y puedes seguirlo y construir un sitio de aspecto fantástico!

Original text