CSS-Only Facebook Reactions UI
1.6K views · 2023-02-21
UI Design
We offer free trials - learn CSS with us! http://bit.ly/3T9KnpT
Most social media platforms allow users to interact with other users’ posts. Letting users use an emoji to show how they feel about them is a fun way to add some interactivity to your project or app. Follow along as Dustin reveals how to recreate the Facebook reactions UI with just CSS! Start your free trial to learn more!
http://bit.ly/3T9KnpT
GitHub Repo
https://github.com/treehouse/facebook-reactions
Related Courses
CSS Transitions: http://bit.ly/3ZEnsWh
CSS Basics: http://bit.ly/3YF7BVW
Resources
Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/
Chapters
0:00 Intro
0:15 Github Repo
1:10 Cloning down the project
1:35 Reviewing the project files & demo
2:51 How to use SCSS or CSS
4:13 HTML markup for the UI
10:05 HTML markup review
11:00 Beginning SCSS
12:20 CSS variables
13:07 General styles
14:20 Styling the facebook-post rule
16:58 Styling the post-header rule
22:59 Styling the post rule
24:20 Styling the post interactions rule
27:57 Styling the reactions menu
36:51 Closing thoughts
#css #html #javascript
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/
Most social media platforms allow users to interact with other users’ posts. Letting users use an emoji to show how they feel about them is a fun way to add some interactivity to your project or app. Follow along as Dustin reveals how to recreate the Facebook reactions UI with just CSS! Start your free trial to learn more!
http://bit.ly/3T9KnpT
GitHub Repo
https://github.com/treehouse/facebook-reactions
Related Courses
CSS Transitions: http://bit.ly/3ZEnsWh
CSS Basics: http://bit.ly/3YF7BVW
Resources
Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/
Chapters
0:00 Intro
0:15 Github Repo
1:10 Cloning down the project
1:35 Reviewing the project files & demo
2:51 How to use SCSS or CSS
4:13 HTML markup for the UI
10:05 HTML markup review
11:00 Beginning SCSS
12:20 CSS variables
13:07 General styles
14:20 Styling the facebook-post rule
16:58 Styling the post-header rule
22:59 Styling the post rule
24:20 Styling the post interactions rule
27:57 Styling the reactions menu
36:51 Closing thoughts
#css #html #javascript
---
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/