ArtScope is a HTML/CSS and JS based responsive webpage for an institution that combines Photography with Astronomy and is specialize on teaching students Space Photography around the world.

  • By Angel Uray
  • Last update: Sep 20, 2022
  • Comments: 2

Project Name

Capstone Project of Module 1.


This is the final project of the module 1 in Microverse our approach was put in practice all the skills we got through our first module, such as Set up linters, Git and the Github Flow, Flexbox and Grid, HTML/CSS and JS best practices to recreate a webpage from scratch using visual content/guidelines.

Built With

  • HTML
  • CSS
  • JS

Live Demo

Live Demo Link

Video Presentation

Capstone project video presentation

Getting Started

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


  • Internet Service.
  • Basic Knowledge about Git and Github.
  • VSCode.


  1. Create an empty folder in your computer to store the clone.

  2. Copy the following link and paste it into your VSCode or your terminal:

[email protected]:angeluray/angelCapstone-project.git

  1. Store it in the file you created before.

  2. Create a new branch for working and make changes to adapt it according to your requirements.


To install linters please open the .github/workflows then get into linters.yml and check the instructions and commands.


For educational purpose only, use it as a guideline.


👤 Angel Uray

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!


  • Special thanks to the autor of the original design Cindy Shin, The Microverse team and my Coding partners through this module.
  • “There are three ways to ultimate success: The first way is to be kind. The second way is to be kind. The third way is to be kind.” —Mister Rogers

📝 License

This project is MIT licensed.

Images Check

photo_5125144248109345314_w photo_5125144248109345313_w photo_5125144248109345349_y photo_5125144248109345348_w photo_5125144248109345317_y photo_5125144248109345315_w



  • 1

    Capstone Project Module One

    Basic Check✔

    • Created a new branch according to the Github Flow rules.
    • Added two HTML files that include the Home and About page.
    • Added two .css files that include styles to the Home and About webpage.
    • Set up linters for HTML/CSS and JS making sure they work correctly.
    • Added a .gitignore file to make sure any irrelevant files are ignored by git.
    • Added a professional README file description with the link of the webpage deployed using Github Pages.

    Project Requirements Basic checks ✔

    • You should personalize the content of your page. Choose a topic that is different than the one in the original design. - Done.
    • The pages should look almost identical to the original design. Small adjustments like text or image changes are acceptable. - Done.
    • Implement the About Page and The home page. - Done.
    • The section "Featured speakers" should be created dynamically in JavaScript. - Done.

    Image Check ✔

    photo_5125144248109345313_w photo_5125144248109345314_w photo_5125144248109345315_w photo_5125144248109345317_y

  • 2

    peer to peer code review.

    Morning peer-to-peer code review

    Great work so far champ! Kindly find below a few changes that could make your project even better.

    • On the Speaker section, you could add a toggle function to your button to display show less when clicked and vice versa.