Intro
This project is made so all the elements are displayed correctly on popular screen sizes. We recommend investing more time in completing this project, since it’s more difficult than previous ones.
Figma
Images
The way you’ll do this at work is by exporting images directly from Figma — we recommend doing that to practice more. Don’t forget to optimize them here, so your project loads faster.
Good luck and have fun!
Spots: A Responsive Social Media Web App Project Overview “Spots” is a simple social media app where users can:
Add and remove photos. Like other users’ photos. Edit their profile info. The goal was to build a responsive webpage that works well on all devices, from mobile to desktop, using the skills I’ve learned so far.
Features:
Responsive Design: Desktop: 3 cards in a row. Tablet: 2 cards in a row. Mobile: 1 card per row.
Profile Page: Adjusts layout depending on the screen size (Google Inspection tool).
Technologies I Used: HTML5 for structure (which we learned more in Sprint 1-2)
CSS3 for styling (which we learned more in the Sprint 3) Flexbox and Grid for layouts Media queries to make it responsive Added custom fonts (Poppins family) BEM Methodology to keep my CSS organized GitHub Pages for deployment
To set the Spots up we would have to clone the repository by doing following:
In bash write the following: git clone https://github.com/nebojsamandic/se_project_spots.git
We would then go to the project folder: cd se_project_spots
And then open the Index.HTML and thats it!
Deployment Link: https://nebojsamandic.github.io/se_project_spots/
Video explanation link found below: Video is much longer as I got into depth https://drive.google.com/file/d/1Mr_blWMw0_NHHRoeKFcZYyS2MrMUOv4U/view?usp=sharing