se_project_spots

Spots

A social media website

Description

The spots project is a website that resembles what a practical social media website looks like. The website allows the user to explore the given page, edit any post/card the user has made within the past using the “edit button,” and create new posts/cards and ideas using the “New Post button.” There is also a function where the webpage will allow the user to give a like using the “heart button” to express their interest into the post/card. I have used multiple HTML and CSS elements to display the structure and the design of the website. The most notable element I used to create this structure is the display:flex-grid. It was my first time using and I’ve gained a lot more understanding on how powerful the element is. During my project, I also focused on using BEM which stands for Block-Element-Modifier. BEM really helped me organize the multiple tags used the index.html document. On top of utilizing the BEM organizaton rule, I also learned organized each of the blocks of the BEM into its own CSS file using the @import function. I have learned the organization within the index.html and index.css is paramount while also having a simple and easy way to access your files. This also my first time where I’ve @imported my own font styles which is called “Poppins” into a website. Having an abundance of font-styles that can be obtained from Google really expands what type of styles you can add to your websites. There is still a lot that can be added the Spots website such as functionality with javascript, which I have not learned yet, smooth animations when hovering or clicking certain buttons, etc. In the future I will add on these elements and designs and make the Spots website much more fun and interactive to view.

Tech Stack

Deployment

This webpage is deployed to Github Pages.