This website is an Original design idea by Cindy Shin in Behance. Visit her profile and send her some love for her amazing job!
- 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.
- 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.
=======
- HTML/SCSS
- Node.JS
- Figma
=======
To watch the video showcasing the process of building this site please go to this Youtube link:
If you want to visit the Figma Design System that I created to help me building this project you can visit the following link
If you want to visit the deployed app just visit the following link:
If you want a copy of this file go to the github repository and download it
After cloning it you can see the project opening the index.html file with your favorite browser ( Firefox for example )
- 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.
- Links
- 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.
- Node.JS
=======
👤 Abraham Rodriguez
- GitHub: @metsanpeitto
- Twitter: @metsanpeitto
- LinkedIn: Abraham Rodriguez
- Portfolio: Waldenberg
=======
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
=======
Give a ⭐️ if you like this project!
=======
- Microverse for giving me this chance
- The amazing code reviewers for making me improve every day 👍
=======