https://github.com/ppeeou/fe-study

codepen.io , template etc..
https://github.com/ppeeou/fe-study

Last synced: 3 months ago
JSON representation

codepen.io , template etc..

• Host: GitHub
• URL: https://github.com/ppeeou/fe-study
• Owner: ppeeou
• Created: 2017-05-26T02:17:47.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T11:29:17.000Z (over 3 years ago)
• Last Synced: 2024-04-15T07:41:54.124Z (about 2 years ago)
• Language: HTML
• Homepage:
• Size: 341 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# FE- Study

## codepen , template etc..

link : https://codepen.io

- animation 

ur: http://anicollection.github.io/#/

## Web 개발

00. MEDIA Query 

    - 0~ 480px Phone

    - 480 ~ 768px tablet

    - 768 ~ 1024px tablet 가로

01. font는 15 ~ 25px 로 작성 / head line font 32 , 60 px

02. 글자간 간격은 150% 이 적합 / 한줄에 글자수는 78글자가 적합

03. font url 

    - google : https://fonts.google.com/ 

    - free download : http://www.fontsquirrel.com/

04. color

    - material https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=F44336

    - Cool Flat UI colors: http://flatuicolors.com/

    - Even more cool colors: http://getuicolors.com/

    - Find varia.ons of colors (very good) : http://www.0to255.com/

    - Adobe Color CC, play around with colors: http://color.adobe.com/create/color-wheel/    

    - PaleTon, play around with colors: http://paleTon.com

    - Beau.ful gradients for webdesign: http://uigradients.com/

    - Learn about colors:

    http://www.rocket-design.fr/color-template/

    - Learn even more about colors:

http://webdesign.tutsplus.com/ar.cles/an-introduc.on-to-color-theory-for-web-designers--webdesign-1437

05. Image

    - Random Image

    https://unsplash.it/200/300

    - Basically all free images in one place:

    http://thestocks.im/

    - Images from many sources:

    http://www.pexels.com/

    - Unsplash, a must see:

    http://unsplash.com/

    - Food images:

    http://foodiesfeed.com/

    - A curated collec.on of free resources:

    http://www.imcreator.com/free

    - Huge paTern library:

    http://thepaTernlibrary.com/         

    - Subtle paTerns:

    http://subtlepaTerns.com/

    - Free videos:

    http://mazwai.com/

    - Techniques for working with images in CSS:

    http://css-tricks.com/design-considera.ons-text-images/

    - People face

    https://uifaces.com/

06. ICON

    - Beau.ful icon font:

    http://ionicons.com/

    - Another beau.ful icon set:

    http://entypo.com/

    - Font awesome icons:

    http://fontawesome.io/icons/

    - Big collec.on of SVG fonts:

    http://iconmonstr.com/

    - Yet another icon font:

    http://icon-works.com/

07. 영감 얻는 곳

    - Find beau.ful websites:

    http://www.siteinspire.com/

    - Dribble, show and tell for designers:

    http://dribbble.com/

    - Behance:

    http://www.behance.net/

    - Inspira.on for one-page websites:

    http://onepagelove.com/

    - Even more webdesign inspira.on:

    http://www.admiretheweb.com/

    - Flat design inspira.on:

    http://flatdsgn.com/

    - Collec.on of specific design elements and paTerns:

    http://paTerntap.com/

    - Another collec.on of design elements:

    http://calltoidea.com/

    - Google fonts inspira.on:

    http://femmebot.github.io/google-type/      

    - Some amazing designers on Dribble:

        - http://dribbble.com/victorerixon

        - http://dribbble.com/benske 

        - http://dribbble.com/peterfinlan 

        - http://dribbble.com/Radium

08. Resource

    - Huge list of front-end development resources:

    http://github.com/dypsilon/frontend-dev-bookmarks

    - Curated resources for everything crea.ve:

    http://oozled.com/

09. 구조

    - HTML special characters

    http://css-tricks.com/snippets/html/glyphs/

10. css selector about

    - Complete CSS reference (this is really good):

    http://tympanus.net/codrops/css_reference/

    - Important CSS selectors:

    http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

    - Cool things you can do with Google Chrome Developer Tools:

    http://www.labnol.org/sokware/chrome-dev-tools-tutorial/28131/

11. web 제작 순서

    - Periodic table of web design process:

    http://www.newdesigngroup.ca/blog/web-design-process-infographic/

12. web 제작시 필요한 도구

* simple and easy-to-use fluid grid:

    - http://www.responsivegridsystem.com/

* animate

    - http://daneden.github.io/animate.css/ 

* Maplace.js, google maps plugin:

    - http://maplacejs.com/

* OnePageScroll

    - http://www.thepetedesign.com/demos/onepage_scroll_demo.html

* Favicon Generator. For real. 

    - http://realfavicongenerator.net/

* Compress images:

    - http://op.mizilla.com/

* Normalize.css

    - http://necolas.github.io/normalize.css/

* jsdelivr (css IE 8,9,10 )

    - http://www.jsdelivr.com

* caniuse (브라우저 기능 지원 확인)

    - http://caniuse.com

* Tooltipster

    - http://iamceege.github.io/tooltipster/#demos

* Webappers, huge list of plugins:

    - http://www.webappers.com/category/components/tool.ps/

* jQuery Rain, another huge list of plugins:

    - http://www.jqueryrain.com/

* Magnific popup:

    - http://dimsemenov.com/plugins/magnific-popup/

        

### CSS PREFIXES

```

Android : -webkit-

Chrome : -webkit-

Firefox : -moz

Internet Explorer : -ms-

IOS : -webkit-

Opera : -o-

Safari : -webkit-

```