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
- GitHub: @juanmanuelbyc
Acknowledgement
Special credits to Cindy Shin: the author of the original design. Also available in following link
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
Give a
📝
License
This project doesn't have or require any license.
Preview
This is how this project looks like
Online version
Try watching the live version
Project Explanation
Try watching my project explanation
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.