devctor/F5P7M-Practica-Flex-PP

Practica Flex F5P7M

Practica FLEX

This project presents a solution to the Practica flex proposed challenge for Factoria F5.

Table of contents

• Practica FLEX
  • Table of contents
  • Overview
    • The challenge
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Overview

The challenge

• Semantic and accessible HTML (HTML validator)
• CSS: Atom design like structure
• CSS: BEM for naming
• Reset file
• Stylelint CSS linting
• Stylelint rational order to manage css rules order for modern web apps.

Links

• Live Site URL: Live site

Instructions to run dev environment and test

To run locally

• Clone repo
• run: npm install
• run: npm run dev

To run test locally

• run: npx playwright test

My process

I approached the project using the following methods and technologies:

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• Kanban I utilized the Kanban boards feature in GitHub Projects to manage and track the progress of tasks throughout the project.
• Vite for dev environment and bundle manager.
• Playwright reliable end-to-end testing.
• Netlify a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites.

What I learned

Throughout this project, I gained valuable experience in testing the user interface using Playwright and linting CSS files with Stylelint.

Author

• @devctor