Skip to content

JarneDirken/2022-Webdesign_Project

Repository files navigation

🥷🏽 Sass - bootstrap5 - js webdesign project

An informational website made with bootstrap5, sass, js. Teammembers:

📦 Technologies

  • Sass
  • Javascript
  • Bootstrap5
  • Html

🦄 Features

Here's what you can do with our website:

  • View all the informational pages: View all the informational data on each page.

  • Toggle light / dark mode: We made a light / dark mode switch.

👩🏽‍🍳 The Process

For a straightforward project, create a website where each team member provides explanations for two programming languages. The requirement is to design it with a clean appearance, resembling an authentic representation of a website. Additionally, each team member is tasked with crafting two JavaScript-related functions incorporated into the project.

Our team swiftly selected the programming languages we wished to showcase and established a concise backlog on Trello to guide our efforts. Subsequently, we commenced the development of the web application.

Although the process was not time-consuming, it proved to be a valuable project for grasping the fundamentals of JavaScript, Bootstrap 5, Sass, and HTML.

📚 What I Learned

During this project, I've improved my bootstrap5, sass, js and html abilities. Also working in a team was really great.

🧠 Brain:

  • Problem solving: First time working with JS really had me writing "console.log()" a lot during this project. Problem solving is an important skill that definitely is improved.

📏 Team coordination:

  • Working as a team: Working in a team is important, here the basis are made of how we should work in a team.

⌚ Time management:

  • Using scrum board: Keeping track of all our tasks using a scrum board really made everything organised. For this project we used Trello.

📓 New knowledge:

  • Javascript: First time using Javascript and I kind off liked it.
  • Sass: Sass is basically CSS but more "powerfull". I would say I like it but sometimes code could get clustered.
  • bootstrap5: Powerfull tool for basic styling, has it pro's and con's.

📈 Overall Growth:

This project made me understand github more and more. Aswell as the importance of teamwork.

💭 How can it be improved?

  • More user friendly
  • Styling the application more
  • Implementing more features

🚦 Running the Project

To run the project in your local environment, follow these steps:

  1. Clone the repository to your local machine.
  2. Run npm install or yarn in the project directory to install the required dependencies.
  3. Run npm run start or yarn start to get the project started.
  4. Open http://localhost:8000 (or the address shown in your console) in your web browser to view the app.

🍿 Video

demo.2.mp4