https://github.com/freyamade/netsoc-css-talk

css slides for netsoc techtalk
https://github.com/freyamade/netsoc-css-talk

bootstrap bulma css-framework css3 materializecss sass scss tech-talks ucc-netsoc

Last synced: 2 months ago
JSON representation

css slides for netsoc techtalk

• Host: GitHub
• URL: https://github.com/freyamade/netsoc-css-talk
• Owner: freyamade
• Created: 2017-09-29T19:44:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:28:56.000Z (about 2 years ago)
• Last Synced: 2023-03-05T20:52:37.423Z (almost 2 years ago)
• Topics: bootstrap, bulma, css-framework, css3, materializecss, sass, scss, tech-talks, ucc-netsoc
• Language: HTML
• Homepage: http://freyamade.netsoc.co/techtalks/css
• Size: 3 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS

![title slide](https://raw.githubusercontent.com/freyamade/netsoc-css-talk/master/title.png)

Cascading Style Sheets (CSS) are a way of styling your HTML to make your website look nice af.

But with such a large emphasis on terms like "mobile-first", CSS can be a tedious job.

But it doesn't have to be!

There are some great people out there that have done and continue to do all the hard work for us by creating frameworks such as Materialize, Bootstrap, Bulma and more!

This talk focuses on these frameworks and how easy it is to make your website look nice *and* be mobile friendly with ease!

Also we will briefly discuss SASS/SCSS as these systems are widely used in said frameworks to customize them further!

## Roadmap

The talk will go as follows;

1. Brief Introduction to HTML, CSS, JS

2. Introduction of 3 frameworks

    - Bootstrap

    - MaterializeCSS

    - Bulma

3. Using one as an example, build up a simple webpage from scratch

4. Show how the same page can look in the other 2 frameworks

5. Brief introduction to SCSS

    - Variables

    - Maps

    - Loops

    - etc.

6. Simple SCSS example creating `is-color` classes for some colors and use it in a webpage

7. Profit