This is an educational project to make a website for a web conference event with home page and about page.

  • By Mavericks Balitaan
  • Last update: Jul 21, 2022
  • Comments: 3



Microverse First Capstone Project

This is an educational project to make a website for a web conference event with home page and about page.

Learning Objectives 🔖

  • Use semantic HTML tags.
  • Apply best practices in HTML code.
  • Use CSS selectors correctly.
  • Use CSS box model.
  • Use Flexbox to place elements in the page.
  • Demonstrate ability to create UIs
  • adaptable to different screen sizes using media queries.
  • Use GitHub Pages to deploy web pages.
  • Apply JavaScript best practices and language style guides in code.
  • Use JavaScript to manipulate DOM elements.
  • Use JavaScript events.
  • Use objects to store and access data.
  • Communicate technical concepts to other technical people.

Project Documentation

  • Here is the loom video link

Website Mockup 📱 💻 🖥️

Screenshots 📸

Mobile and desktop version screenshots can be found in the repository.

Built With 🛠️

  • HTML, CSS and JavaScript
  • Linters: Lighthouse, Webhint, Stylelint and ESlint
  • VS Code

Live Demo 🔗

Check out the live demo here 👈

Getting Started

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


  • A web browser like Google Chrome.
  • A code editor like Visual Studio Code with Git and Node.js.

You can check if Git is installed by running the following command in the terminal.

$ git --version

Likewise for Node.js and npm for package installation.

$ node --version && npm --version


Clone the repository using the GitHub link provided below.


In the terminal, go to your file directory and run this command.

$ git clone [email protected]:mavericks-db/capstone01.git


Kindly modify the files as needed. This website demonstrates both desktop and mobile versions.

Run tests

To check for linters, use the files provided by Microverse. A GitHub action is also set to run during pull request.

$ npm install


This app is deployed in the GitHub Pages for easy viewing. Please find the link in the Live Demo section.


👤 Mavericks Balitaan

  • GitHub: GitHub Badge
  • Twitter: Twitter Badge
  • Facebook: Facebook Badge
  • LinkedIn: LinkedIn Badge
  • Gmail: Gmail Badge

🤝 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!


📝 License

This project is MIT licensed.



  • 1

    Issue Capstone

    The webpage is neat and everything looks clean. Good job with the design and mobile responsiveness :+1: However please refer to the following issues:

    • [ ] Please fix the white space on the right side. It occurs on the tablet view.
    • [ ] Kindly consider adding transitions and animations to the nav links to create a better user experience.
    • [ ] Make sure the cards under the main section do not move on hover. Can be fixed by giving them a default border.
    • [ ] Consider adding a WebKit textbox background image to the headline text. [OPTIONAL]
  • 2

    Peer to Peer Code Review

    KUDOS! on;

    • The use of inline comments, help one understand the project much better.
    • Good use of DOM.
    • The layout of your project is perfect.
    • Your Webpage has good content.

    Issues to improve the project.

    • Consider using semantic tags to section your homepage. For example, the nav links should be placed inside the header tag.
    • Consider storing multiple CSS and images in a folder for more organized work.
  • 3

    Milestone 01: Asia Web Conference 2022 Home page and About page

    Asia Web Conference 2022


    Descriptive README file with appropriate credit to:

    Deployed GitHub page (currently linked to homepage branch)

    This branch includes the following interactions:


    • [ ] The home page should 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 should have a close (X) button that closes the menu.

    Dynamic Page

    • [ ] The section "Featured speakers" should be created dynamically in JavaScript.

    Project Documentation

    • Here is the loom video link

    Screenshots 📸

    Desktop Version

    • [ ] Home Page homepageDesktop_screenshot

    • [ ] About Page aboutpageDesktop_screenshot

    Mobile Version

    • [ ] Home Page homepageMobile_screenshot

    • [ ] About Page aboutpageMobile_screenshot

    Future additions

    Tickets page and Schedule page