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

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/

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