Frontend UI of website
Welcome to the Women Tech Makers Bamenda website frontend! This website is designed to provide a platform for women in technology to connect, learn, and grow. The frontend is built using HTML, CSS, and JavaScript with framework like react.js, and is optimized for user experience and accessibility.
Using HTML, CSS, JavaScript, and /or React in frontend development allows for flexible, responsive, and dynamic user interfaces. These technologies work together to create engaging and interactive web experiences, ensuring a seamless user journey and providing a solid foundation for the website's functionality and aesthetics.
The Women Tech Makers Bamenda Website Frontend Project aims to create a modern and user-friendly website for the Women Tech Makers community in Bamenda. The project focuses on developing the frontend components, including the user interface, design, and interactivity of the website.
To get started with the project follow the steps below:
Before you start contributing, make sure you have the following tools installed:
- HTML: Familiarity with HTML is essential for working on the frontend of this project.
- CSS: Basic knowledge of CSS will be helpful in styling the website.
- JavaScript: Understanding JavaScript will enable you to add interactivity to the website.
To set up the project locally, follow these steps:
-
Clone the repository:
git clone [email protected]:WTMBamenda/wtm-bamenda-website-frontend.git -
Change into the project directory:
cd wtm-bamenda-website-frontend -
Open the project in your preferred code editor. please refer to the CONTRIBUTING.md To install and run a React project, you need to follow a series of steps. Here is a comprehensive guide on how to do it:
-
Prerequisites: Before starting, ensure that you have the following software installed on your system:
- Node.js: React requires Node.js to run. You can download and install it from the official Node.js website (https://nodejs.org).
- Package Manager: npm (Node Package Manager) is usually installed along with Node.js. However, you can check if it is installed by running
npm -vin your command line.
- Create a React Project: Once you have the prerequisites set up, you can create a new React project by using a tool called Create React App. Open your command line interface and run the following command:
npx create-react-app my-react-project
This command will create a new directory named "my-react-project" and set up a basic React project structure inside it.
- Navigate to Project Directory: After creating the project, navigate to its directory by running the following command:
cd my-react-project
- Start the Development Server: To run your React project locally, start the development server provided by Create React App. Run the following command in your project directory:
npm start
This will start the development server and open your project in a web browser at http://localhost:3000. Any changes you make to your code will automatically be reflected in the browser.
- Build for Production: When you are ready to deploy your React project, you need to build it for production. This step optimizes your code and creates static files that can be served by a web server. In your project directory, run the following command:
npm run build
This will create a build directory containing the optimized and minified version of your project.
- Serve the Production Build: To serve the production build locally, you can use a static file server. One popular option is to use the
servepackage from npm. Install it globally by running the following command:
npm install -g serve
Once installed, navigate to your project's build directory and run the following command:
serve -s
This will start a static file server and provide you with a URL where you can access your production-ready React project.
Remember to regularly update your dependencies by running npm update in your project directory.
For more inside visit:
- Official React Documentation: https://reactjs.org/
- Create React App Documentation: https://create-react-app.dev/
- Node.js Documentation: https://nodejs.org/
The project structure is organized as follows:
- index.html: The main HTML file that serves as the entry point for the website.
- css/: Directory containing CSS files for styling the website.
- js/: Directory containing JavaScript files for adding interactivity to the website.
- images/: Directory for storing images used in the website.
- fonts/: Directory for storing custom fonts, if any.
We welcome contributions from everyone! To contribute to the project, please refer to CONTRIBUTING.md
We follow the official WTM brand guidelines in this project. Please refer to the coding style guidelines in the STYLEGUIDE.md file for more information.
Testing is an important aspect of ensuring the quality of our code. Before submitting a pull request, please make sure that your changes have been thoroughly tested. You can use modern testing frameworks such as Jest or Mocha to write and run tests for your code.
The deployment process will be handled by the project maintainers. Once your changes have been reviewed and merged into the main branch, they will be deployed to the live website.
Here are some resources that you may find helpful while working on this project:
If you have any questions or need further assistance, please feel free to reach out:
- by tagging the leaders
- or other members
Thank you for being a part of the WTM Bamenda community and helping us make a positive impact in the tech industry!