📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Capstone Microverse! Project

Capstone Microverse! project is a repository consisting of the following files:

• HTML file (index.html)
• CSS file (styles.css)
• JS files
• Html,CSS and JS linters file

The repository also contains files for setting up linters and validators.

🛠 Built With

Tech Stack

• HTML
• CSS
• JS

Key Features

Capstone - HTML/CSS & JavaScript capstone project

Features Added:

• The content of the pages personalized.

• The design guidelines, is followed including:

  • Colors.
  • Typography: font face, size and weight (Lato as it is a free font similar to the one used in the original design) is used
  • Layout: composition and space between elements.

• The pages look almost identical to the original design. Small adjustments like text or image changes is done

• The following 2 pages implemented:

  • The home page.

  • The about page.

  • Each of these pages have versions for 2 different screen sizes:

    -  Mobile: up to 768px wide.
    
    -  Desktop: 768px or wider.
    

• Interactions

  • Links
    • The home page have a link in the menu to the about page.
    • The logo in the header links to the home page.
  • Mobile menu
    • When the user clicks (or taps) the hamburger button on the header, the mobile menu appears over the page.
    • The mobile menu have a close (X) button that closes the menu.

• Dynamic page - The section "Featured speakers" is created dynamically in JavaScript.

(back to top)

🚀 Live Demo

• Live Demo
• Loom

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Setup

Clone this repository to your desired folder:

cd my-folder git clone git@github.com:myaccount/my-project.git

Prerequisites

In order to run this project you need:

• gitHub account;
• git installed on your OS.

Install

https://github.com/microverseinc/linters-config/tree/master/html-css-js

• Installations required to run this project:

Webhint installation.

• Run the following command:

npm install --save-dev hint@7.x

Stylelint installation.

• Run the following command:

npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

ESLint

• Run

npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

Usage

You can use this project by cloning it to your folder and changing index.html and styles.css files.

Run tests

To run tests, run the following commands:

To track linter errors locally follow these steps:

Download all the dependencies run:

npm install

Track HTML linter errors run:

npx hint .

Track CSS linter errors run:

npx stylelint "**/*.{css,scss}"

Track JavaScript linter errors run:

npx eslint ."

Deployment

You can deploy this project adding new lines of code to index.html and styles.css files.

(back to top)

👥 Authors

👤 Habtamu Alemayehu

• GitHub: @bena

(back to top)

🔭 Future Features

For the second milestone in building this portfolio website, it will create the mobile website section where you will list your portfolio projects.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

Give me ⭐️ If you like this project!

(back to top)

🙏 Acknowledgments

• I would like to thank Microverse program for providing me this great chance.
• Again I would like to thankCindy Shin the author of the original design, as required by the Creative Commons License and for project requirements

(back to top)

❓ FAQ (OPTIONAL)

(back to top)

📝 License

This project is MIT licensed.

(back to top)