https://github.com/codex-team/html-css-practice

Making Facebook for several minutes
https://github.com/codex-team/html-css-practice

beginner-friendly css html

Last synced: 10 months ago
JSON representation

Making Facebook for several minutes

• Host: GitHub
• URL: https://github.com/codex-team/html-css-practice
• Owner: codex-team
• License: mit
• Created: 2017-03-18T00:16:40.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-26T12:27:58.000Z (over 8 years ago)
• Last Synced: 2024-12-31T05:28:28.749Z (12 months ago)
• Topics: beginner-friendly, css, html
• Language: HTML
• Size: 4.88 KB
• Stars: 9
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Sources from CodeX Meetup: HTML+CSS Practice

Just another one exercise for frontend beginners. Making the Facebook-view on a fast-coding example.

Enjoy.

## Base knowledges

- `display` https://developer.mozilla.org/en-US/docs/Web/CSS/display

- `position` https://developer.mozilla.org/en/docs/Web/CSS/position

- `float` https://developer.mozilla.org/en/docs/Web/CSS/float

- `Clearfix Hack` https://css-tricks.com/snippets/css/clear-fix/

- `Media queries` https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

and other.

## More interest

### Native fonts

- Medium Team https://medium.design/system-shock-6b1dc6d6596f#.eycroax4i

- Smashing Magazine https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

### CSS Variables

- Spec https://www.w3.org/TR/css-variables/

- Using https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

- Supporting http://caniuse.com/#feat=css-variables

### BEM style

- Naming http://getbem.com/naming/

- [ru] Методология https://ru.bem.info/

### CSS Triangle

![CSS Triangle](https://ifmo.su/public/img/external/css-triangle.png)

https://css-tricks.com/snippets/css/css-triangle/

How its possible: http://stackoverflow.com/questions/7073484/how-do-css-triangles-work

### Position: sticky

https://css-tricks.com/position-sticky-2/

## Result 😺

http://html.ifmo.su/

![CodeX Meetup:HTML+CSSS](https://ifmo.su/public/img/external/html-css-meetup.png)

## About CodeX

We are small team of Web-developing fans consisting of IFMO students and graduates located in St. Petersburg, Russia.

Fell free to give us a feedback on team@ifmo.su

https://ifmo.su

### Follow us!

VK: https://vk.com/codex_team

Telegram: https://t.me/codex_team

Instagram: https://www.instagram.com/codex_team