First Capstone project where we applied what we learned during the first module of the Microverse program curriculum. We are trying to apply what we have studied regarding: Use semantic HTML tags. Apply best practices in HTML code. Use CSS selectors correctly

  • By Juan Diaz
  • Last update: Aug 26, 2022
  • Comments: 1

Microverse-Capstone-1

First Capstone project where we applied what we learned during the first module of the Microverse program curriculum.

We are trying to apply what we have studied regarding: 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.

Built With

  • HTML
  • CSS
  • JavaScript

Authors

👤 Author1

Acknowledgement

Special credits to Cindy Shin: the author of the original design. Also available in following link

here!

🤝 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 doesn't have or require any license.

Preview

This is how this project looks like

here!

Online version

Try watching the live version

here!

Project Explanation

Try watching my project explanation

here!

Github

https://github.com/juanmanuelbyc/Capstone1

Comments(1)

  • 1

    Finish home page

    Create home page and about page for capstone 1 project

    Project requirements

    Personalize the content of your page. Choose a topic that is different than the one in the original design.

    Follow design guidlines, including:

    Colors. Typography: font face, size and weight. 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 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. You should 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.

Popular Tag

Related