/Eagle-English

This is a prototype for a English school company. Built to practice my skills in HTML CSS and JavaScript and mainly regarding responsiveness

Primary LanguageSCSSMIT LicenseMIT

Eagle English

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.


Built With

HTML Badge

CSS Badge

JavaScript Badge

Live Demo

Live Demo Link

Screenshots:

Getting Started

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.

Authors

👤 Tiago Lelinski Marin

🤝 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

  • Hat tip to anyone whose code was used
  • Special thanks to Cindy Shin the author of the original design,

📝 License

This project is MIT licensed.