Frontend Mentor - Easybank landing page

Intermediate Level Challenge by Frontend Mentor.

Live Link: EasyBank Landing Page Solution

Overview

This project was initiated in response to an intermediate challenge on Frontend Mentor. Its primary objectives included gaining proficiency in translating design concepts into functional code and mastering the art of creating responsive websites. Additionally, it served as a valuable learning experience for creating a basic landing page, marking my first foray into this aspect of web development.

The Challenge

The challenge was to build out this landing page and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Technologies Used

1. HTML
2. CSS
3. JS
4. Sass

Project Structure

  - /app
    - /js
      - script.js
    - /scss
      - /globals
        - ...
      - /layout
        - ...
      - / util
        - ...
      - style.scss
  - /design
    - ...
  - /dist
    - index.css
    - style.css
    - ...
  - /images
  - index.html
  - ...

Installation

To get started with this project, follow these steps:

1. Clone the repository to your local machine:

     git clone https://github.com/vijita-u/EasyBank_Landing_Page.git

2. Open the project in your preferred code editor.

Usage

1. To run the project locally, simply open the index.html file in your web browser. You can make changes to the code and see the live updates, OR
2. Open the live link to play around.

Features

• Responsive design that adapts to various screen sizes and devices.
• Implementation of a sleek and modern landing page.
• Use of Sass for organized and maintainable CSS code.
• Interactivity added through JavaScript for a dynamic user experience.

Additional Note

This project was inspired by a video tutorial which served as a valuable resource in guiding me through the systematic process of creating a website and writing code that adheres to best practices. However, it's important to note that I didn't merely copy the tutorial; instead, I independently crafted all the styles using my own creativity and problem-solving skills. This hands-on approach not only enhanced my abilities but also enabled me to adapt to diverse design challenges and explore various methods for achieving the same design objectives.

Credits

• Coder Coder
• FreeCodeCamp
• Frontend Mentor

Acknowledgments

Special thanks to FreeCodeCamp and Coder Coder for putting out this amazing content out there.

License

This project is open-source and available under the MIT License.

Contact

• Email me

• Let's connect on LinkedIn

• Check out portfolio website