Skip to content

A responsive site created by following the provided design guideline. We tried to apply best practices like setting-up a code linter, using Github flow, making good commit messages, and writing a good README.

Notifications You must be signed in to change notification settings

300ms/HTML-CSS-Capstone-Project

Repository files navigation

Microverse Education "Capstone Experiment" Project :

Full Task description of project:

https://www.notion.so/HTML-CSS-capstone-project-Social-network-5f1311dcf3734d71ac98198dff5254c2

Description:

--This project was an experiment for us. Although i've health issues while this progress, i completed this project finally ^^

--The project supposed to be like a social interaction web page. Some screenshots have been given to us, you can see them on link which is under "Full Task description of project" section.

--I added 1 breakpoint for the page on 1024px width, as expected. I've re-positioned, re-sized and re-styled elements depending on width of the window/page and i tried to make them seem as much as similar to expected style in screenshots. Also, min-width of the page is 500px and i've set everything for that value about their minimum sizes.

--Header contains elements which are responsive. Buttons are displayed depending on screen-width.

--I've created different sections on main section, they are responsive too and being displayed -same as header buttons- depending on screen-width.

-- Almost every section on the page, are being re-styled for different screen sizes thanks to flexbox styling ^^

-- I was going to make a sliding system for next and previous profiles on main section but i could not find a way to do it without using javascript, also i am late to submit this project so i passed that feature. Also, for the same reason, i did not change "/chat-board.html" page much. There were different ideas on my mind to add some cool features but project is restricted with html&css only and i don't have enough time to do them :(

-- I've added screenshots of my page below this section so you can see them. I hope you like it ^^

Personal Video-Representation of this project ^^ :

https://www.loom.com/share/5cc71e51606042b78ec7eab43d5d0ac5

500px-Index

alt text

500px-Chat Board

alt text

500px-Chat Details

alt text

500px-Personal

alt text

1024px-Index

alt text

1024px-Chat Board

alt text

1024px-Chat Details

alt text

1024px-Personal

alt text

About

A responsive site created by following the provided design guideline. We tried to apply best practices like setting-up a code linter, using Github flow, making good commit messages, and writing a good README.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published