Descarga de fylo dark theme landing page fylo dark theme landing page

fylo dark theme landing page

Componentes de terceros

1.0.0

Descargar

fylo dark theme landing page - Frontend Mentor

¡Hola! ¡Gracias por ver este proyecto!

Esta es una solución para un desafío de Frontend Mentor que consiste en crear una página de destino que se parezca lo más posible al diseño dado. El objetivo es mejorar mis habilidades de diseño web mediante la construcción de un proyecto realista.

1. Índice de contenidos ✒️

fylo dark theme landing page - Frontend Mentor
- 1. Índice de contenidos ✒️
- 2. Descripción general
  - El desafío
  - Cómo ejecutar el proyecto:
  - Campo de golf
- 3. ¿Mi proceso?
  - Construido con
  - lo que aprendí
  - Recursos útiles
- 4. ¿Autor?

2. Descripción general

El desafío

Los usuarios deberían poder:

Ver el diseño óptimo para el sitio según el tamaño de pantalla de su dispositivo
Ver estados de desplazamiento para todos los elementos interactivos en la página

Vista previa del diseño para <span class= Desafío de la página de inicio del tema oscuro de fylo" style="max-width: 100%;">

Puede consultar los detalles del desafío en la página Frontend Mentor.

Cómo ejecutar el proyecto:

Elegí utilizar el kit de inicio de Adalab para trabajar en este proyecto, creado con Node y Gulp. Entonces, antes que nada es necesario tener instalado Node JS para poder ejecutarlo.

Abra la terminal en la carpeta raíz del repositorio.
Instale las dependencias locales usando el siguiente comando en la terminal:

npm install

Comience a ejecutar el proyecto usando el siguiente comando que abrirá una ventana del navegador que muestra una versión en vivo de la página.

npm start

Campo de golf

URL del sitio en vivo: https://leireomadina.github.io/fylo-dark-theme-landing-page/
URL de la solución: próximamente

3. ¿Mi proceso?

Construido con

Marcado semántico HTML5
sistema de plantillas HTML
Propiedades personalizadas de CSS3
Caja flexible
Cuadrícula CSS
SASS con metodología BEM
Trago
Diseño responsivo con flujo de trabajo móvil primero

lo que aprendí

Utilice @for para crear bucles en SCSS : en este caso quería seleccionar solo la segunda y tercera tarjeta de la sección de testimonios.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

Use y administre archivos svg : use el atributo viewBox para modificar su posición y dimensión, agregue título y etiqueta desc para mejorar la accesibilidad, estilo en línea y CSS, personalice los colores usando relleno o trazo...
Utilice roles ARIA para mejorar la accesibilidad web : por ejemplo, eche un vistazo a estos roles del menú de navegación.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

Recursos útiles

Cómo usar @for para crear un bucle Sass: https://www.youtube.com/watch?v=6CbsNFXMYgs. También puedes echar un vistazo a la documentación oficial de SASS.
Lista de roles, estados y propiedades de ARIA (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Estilo SVG en línea: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
Más recursos próximamente..