FED1 Project Exam 1

Diana Bergelin

A responsive, accessible, and visually engaging website for Deleine Hairstudio, built as part of the Front-End Development (FED1) program at Noroff School of Technology and Digital Media. It aims to put into practice the various skills learned throughout the first year, including HTML, CSS, JavaScript, and design.

Live Site Deleine

---

Table of Contents

• Description
• Features
• Technologies Used
• Installation
• Usage
• File Structure
• Future Improvements
• Credits
• Delivery
• License

---

Description

The goal of this assignment is to build a responsive blogging application for a fictional client. The application allows users to view, create, update, and delete blog posts via a front-end interface that interacts with an existing API. Admin features include user registration and login functionality, along with the ability to manage posts.

The client chosen for this project is Deleine Hairstudio, a small and cozy Hairstudio with 3 employees offering the latest in hair coloring, techniques, and trends while providing a warm, welcoming community. The studio is located in Stockholm and has a cozy atmosphere where clients can escape the stresses of everyday life.

---

Features

• Responsive Design: Ensures the application looks great on desktop and mobile devices.
• User Authentication: Users can register, login, and manage their blog posts.
• CRUD Functionality: Admin users can create, read, update, and delete blog posts.
• Blog Carousel and Thumbnail Display: A homepage showcasing the latest blog posts.
• Admin Pages: Admin-specific pages for managing blog posts, including creating new posts, editing existing posts, and deleting them.

---

Technologies Used

• Frontend:

• Tools:

---

Installation

Have Node.js installed on your machine (for running a local server)

1. Clone the repository:

git clone https://github.com/NoroffFEU/FED1-PE1-Anaid0616.git

2. Navigate into the project folder:

cd FED1-PE1-Anaid0616

3. Install dependencies:

npm install

4. Run the project on your local machine:

npm start

---

Usage

1. Register or Login to access admin features.

2. Create a new blog post by clicking on the "Create Post" button.

3. Edit or Delete existing posts via the blog post details page.

4. View recent blog posts on the carousel on the blog feed page.

5. View a static list of the 12 latest posts in a responsive thumbnail grid on the blog feed page.

---

File Structure

/assets # Images, logos, and other static files

/mjs # JavaScript modules

/src # CSS and styling files

index.html # Main homepage

post/index.html # Post index page

post/edit.html # Post creation/editing page

account/login.html # Login page

account/register.html # Register page

---

Future improvemnts

Pagination: Implement pagination to limit the number of posts per page.

Search and Filter: Add functionality to search blog posts by tags or title.

---

Acknowledgments

Design and Development: Diana Bergelin

Icons: Font Awesome for icons used in the project.

Images: Deleine.hair and hairby.dianaa on instagram for images used in the project, Postimages for getting the media URL Link

Information: Mollify, Mdn web docs, Stack Overflow

Register, Login and Create blog post: Martin Krügers learning videos

Carousel and thumbnail: Inspiration for the carousel from Web Dev Simplified: Watch this video on YouTube but then i modified it and changed it with my friend ChatGPTs help, so that solved the issues with the responsivness. Inspo for Thumbnail grid from: Watch this video on YouTube

To always help when needed: ChatGPT

README: Read Link and Read Link

---

Contributing

Since this is a school project, contributions are not needed. However, if you have any feedback or suggestions, feel free to reach out!

Contact

If you want to connect or learn more about me:

Email: diana.bergelin@live.se

LinkedIn

License

This project is not currently under any open-source license as it's a school project.

Back to Top