Comunidad les comparto esta página donde pueden encontrar una colección de herramientas para hacer que los sitios web se vean bien ya también aportar las suyas.

https://nodesign.dev/

Buenas comunidad, les recomiendo esta extensión que se instala en nuestro editor de código o IDE favorito que nos permite saber cuánto tiempo pasamos trabajando en cada función de nuestros proyecto. mostrando resultados de gráficos, etc.

https://wakatime.com/@steveen_echeverri/projects/expztcifjo?start=2020-01-05&end=2020-01-11

Hola comunidad, si alguien le interesa como personalizar los colores de la plataforma, y demás estilos, yo les recomiendo la extensión de Ghrome que se llama Stylish (temas a medida para cada sitio web), en mi caso modifique los estilos como un tema dark. Aquí les dejo una vista y las modificaciones en las clases que hice: Extención: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=es

body {
   background: var(--dark-color);
   color: var(--light-color);
}
.main-header {
   border-bottom: 1px solid #fff;
   background: var(--dark-color);
}
.main-menu a {
   color: var(--light-color);
}
.main-logo {
   height: 2.5rem;
   background-color: #fff;
   border-radius: 5px;
   padding: 5px;
   box-shadow: 0 0 6px 2px rgba(255,255,255,1);
}
.topbar {
   background-color: var(--dark-color);
}

.meatballs-menu__nav {
   background: var(--dark-color-darker);
   box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.lg-tooltip {
   background-color: var(--dark-color-darker);
}
.dropdown ul .main-menu__item a {
    color: var(--light-color);
}

.notification-panel {
   background-color: var(--dark-color-darker);
}
.color {
   color: var(--color);
}
.text-color,
.publication-editor__textarea{
   --color: var(--text-color-light);
}
textarea{
   color: #fff;
}
.dark-color {
   --color: var(--grey-color-lighter);
   --color-alt: var(--grey-color-lighter);
}
.answer {
   color: var(--fourth-color-darker);
}
.vote{
	color: var(--first-color);
}
.featured-publication, 
.featured-publication__item,
.foro-sidebar__list {
   background-color: var(--dark-color-darker);
}
.create-publication.active.main .create-publication__container {
   background-color: var(--dark-color);
   border-radius: 5px;
   box-shadow: 0 0 3px 2px rgba(255,255,255,1);
}
.courses-searchbar {
   background-color: var(--dark-color-dark);
}
.footer-card {
   background-color: var(--thumb-color-hover);
}
.s-bg-white {
   background-color: var(--dark-color-darker);
}
.t4, .aside-course-card__price .t4, h3{
   color: var(--light-color);
}
.class-page-container{
   background-color: var(--dark-color);
}
.main-banner {
   background-color: var(--dark-color-darker);
}
.s-to-bottom {
   background-color: var(--dark-color-darker);
}
.lg-bg-white {
   background-color: var(--dark-color-dark);
}
.scroll, [class*=scroll], body {
   --thumb-color: var(--dark-color-dark);
   --thumb-color-hover: var(--dark-color-smooth);
   --track-color: var(--dark-color-smoother);
}

Realice este proyecto con fines prácticos de la replica de mi facebook en versión BLACK, los invito a que lo vean.

Publicado: https://styvensoft.github.io/fakebook-black/

Posdata. no me vallan a hackear! :V

Comunidad acá les comparto un diseño de portafolio sencillo, en donde implemente algunas animaciones simples en css y javascript, (por el momento desarrollando sin ningún framework).

Proyecto publicado: https://styvensoft.github.io/SE-Design/

Diseño template basado: https://drive.google.com/file/d/1xpxwuKECNDwdfJKOxXusxAnkU-qnR7ky/view

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