This project is a prototype landing page for an English School where you can find some basic information about the course and a little about the teachers.
This project was designed to test some of the abilities I learned in the first module of the Microverse program. I had to create a website from scratch following basic design guidelines.
The abilities to be tested:
- 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.
Requirements for this projects:
-
Build only these 2 pages: The "home" page and the "about" page.
-
Each of these pages should have versions for 2 different screen sizes: mobile: up to 768px wide and 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.
To get a local copy up and running follow these simple example steps:
- Clone this repo to your computer using git. Or
- Download the compressed zip folder and use a decompressor to unzip it into your computer. Then open the folder and all the project files will be there.
👤 Tiago Lelinski Marin
- GitHub: Tiago-Lelinski-Marin
- Twitter: @LelinskiMarin
- LinkedIn: tiago-lelinski-marin
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Hat tip to anyone whose code was used
- Special thanks to Cindy Shin the author of the original design,
This project is MIT licensed.