HTML/CSS & JavaScript capstone project - Conference page

Disclaimer!

This website is an Original design idea by Cindy Shin in Behance. Visit her profile and send her some love for her amazing job!

• https://www.behance.net/adagio07

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.

Instructions

• Deploy your website using GitHub Pages.
• Check the online version of your portfolio and make sure that the page works properly.
• Update the README of your repository to include a link to the online version.

=======

Built With

• HTML/SCSS
• Node.JS
• Figma

=======

Getting Started

To watch the video showcasing the process of building this site please go to this Youtube link:

• https://www.youtube.com/watch?v=lG3Q4bRfKuQ

If you want to visit the Figma Design System that I created to help me building this project you can visit the following link

• https://www.figma.com/file/uxDIr6zq8lVsdJH08j6b0w/capstone-1

If you want to visit the deployed app just visit the following link:

• https://metsanpeitto.github.io/capstone-1/index.html

If you want a copy of this file go to the github repository and download it

• git clone https://github.com/Metsanpeitto/capstone-1

After cloning it you can see the project opening the index.html file with your favorite browser ( Firefox for example )

Project requirements

• You should personalize the content of your page. Choose a topic first and then design your webpage, keeping your topic in mind while you design it so that your page design works well for the topic you choose.
• You should 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.
• You should follow these design guidelines, including:
  • Colors.
  • Typography: font face, size and weight.
  • Layout: composition and space between elements.
• 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.

Prerequisites

• Node.JS

=======

Author

👤 Abraham Rodriguez

• GitHub: @metsanpeitto
• Twitter: @metsanpeitto
• LinkedIn: Abraham Rodriguez
• Portfolio: Waldenberg

=======

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

=======

Acknowledgments

• Microverse for giving me this chance
• The amazing code reviewers for making me improve every day :thumbsup:

=======