Based on an online website for a conference. Applied Power Electronics Conference (APEC) uses the acquired knowledge about HTML, CSS, and JavaScript in a single project.

  • By Marco
  • Last update: Oct 11, 2022
  • Comments: 2

Capstone #1 : Applied Power Electronics Conference (APEC)

  • This project is a conference-related website created to master all the knowledge acquired in Microverse module 1 curriculum.
  • The information shown in the project is officially available at this link.

Link to Loom Video explaining the features of this project

Built With

  • HTML/CSS and JavaScript

🌎 Live Demo:

Authors

👤 Marco Oquendo

Show your support

  • Give a ⭐️ if you like this project!

Acknowledgments

📝 License

  • This project is MIT licensed.

📝 Webpages pictures


Github

https://github.com/MarcoOquendoC/CapstoneAPEC

Comments(2)

  • 1

    Capstone 1

    HTML + basic JavaScript Capstone - day 3

    Hi good reviewer,

    Have a good day bear

    These are the changes proposed to the Capstone project:

    For more detail refer to the README.md file.

    Project requirements

    • Personalize the content of the page. Choose a topic that is different than the one in the original design.
    • Follow these design guidelines:
      • Colors.
      • Typography: font face, size and weight (we suggest using Lato as it is a free font similar to the one used in the original design).
      • Layout: composition and space between elements.
      • The pages should look almost identical to the original design. Small adjustments like text or image changes are acceptable.

    Build only these 2 pages:

    The home page. The about page. Each of these pages should have versions for 2 different screen sizes:

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

    Links

    • 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.
    • There are no guidelines for the mobile menu in the docs, but you should implement it so it is consistent with the design (colors, typography, spacings, etc.).
    • 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.
    • Use a JavaScript variable with the data about the speakers and use it when the page loads to create the HTML for this section dynamically.

    Original design idea by Cindy Shin in Behance.

    • The Creative Commons license of the design requires that you give appropriate credit to the author. Therefore, you must do it in the README of your project.
  • 2

    Peer to peer review

    Good job Marco with your design and code.

    Your code is written professionally and the website also looks very beautiful. I commend you for that!

    However, there's a little issue that you can improve on to make your code even better:

    You can add a "More" button in the speakers section of the mobile version of your website to display some initially hidden speaker content when clicked. This would make your website much better. Happy coding 🥂

Popular Tag

Related