Front End Developer - Learning Material
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
 
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
2
HTML & CSS
3
4
NameContent TypeStatusStartedCompletedNotesLink
5
Codecademy: HTML & CSS (old)CourseCOMPLETE*/*/20167/4/2017https://www.codecademy.com/learn/web
6
Codecademy: Learn HTML & CSS Part ICourseCOMPLETE7/4/201712/4/2017https://www.codecademy.com/learn/learn-html-css
7
Codecademy: Learn HTMLCourseCOMPLETE29/8/201730/8/2017https://www.codecademy.com/learn/learn-html
8
Codecademy: Learn CSSCourseCOMPLETE30/8/201730/8/2017https://www.codecademy.com/learn/learn-css
9
Codecademy: Learn CSS (Grid Update)CourseCOMPLETE2/6/20182/6/2018CSS Grid Update
10
HTML & CSS : Design & Build WebsitesBookCOMPLETE7/4/201720/5/2017N/A
11
Specifics of CSS SpecificityArticleCOMPLETE12/4/201712/4/2017https://css-tricks.com/specifics-on-css-specificity/
12
Learn CSS LayoutArticleCOMPLETE13/4/201713/4/2017http://learnlayout.com/
13
SMACSSArticleCOMPLETE19/4/201715/5/2017
14
9 Basic Principles of Responsive Web DesignArticleCOMPLETE13/4/201713/4/2017http://blog.froont.com/9-basic-principles-of-responsive-web-design/
15
Udacity - Responsive Web Design FundamentalsCourseCOMPLETE15/5/201727/06/2017Lesson 5 - Minor breakpoint understandinghttps://www.udacity.com/course/responsive-web-design-fundamentals--ud893
16
Manage Mobile Performance OptimizationArticleCOMPLETE27/06/201727/06/2017Good point of reference for optimization tools
https://www.smashingmagazine.com/2016/03/managing-mobile-performance-optimization/
17
Udacity - Browser Rendering OptimizationCourseINCOMPLETE
Lesson 3 : Android mobile Dev mode setup / Lesson 4 - Javascript knowledge required / Lesson 5 - Javascript knowledge required
https://www.udacity.com/course/browser-rendering-optimization--ud860
18
Udacity - Website Performance OptimizationCourseINCOMPLETEhttps://www.udacity.com/course/website-performance-optimization--ud884
19
Google - Web FundamentalsArticleINCOMPLETEhttps://developers.google.com/web/fundamentals/?hl=en
20
Wes Bos's CSS Grid CourseCourseCOMPLETE2/6/20183/6/2018
21
22
Further Reading
23
24
NameContent TypeStatusStartedCompletedLink
25
The Power of CSS Selectors and How to Use ThemArticleCOMPLETE15/5/201715/5/2017
http://webdesignerwall.com/tutorials/the-power-of-css-selectors-and-how-to-use-them
26
Level Up Your CSS Skills With These 20 Pro CSS TipsArticleCOMPLETE15/5/201715/5/2017http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips
27
HTML & CSSPoint of ReferenceN/Ahttps://internetingishard.com/
28
Codecademy: Learn SassCourseCOMPLETE24/5/20176/6/2017https://www.codecademy.com/learn/learn-sass
29
Learn: LESSVisual ExamplesCOMPLETE7/6/20177/6/2017http://winless.org/online-less-compiler
30
Comparisons Between LESS & SASSVisual ExamplesCOMPLETE7/6/20177/6/2017http://shelbymoulden.com/blog/?post=comparison-between-less-and-sass
31
Learn: BootstrapDocumentationN/Ahttp://getbootstrap.com/css/
32
Guide: Writing Cleaner CSS (BEM)N/Ahttp://getbem.com/
33
Optimization (CSS)COMPLETE12/6/201712/6/2017https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
34
CSS Specificity (Further Information)ArticleCOMPLETE13/4/201713/4/2017
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
35
Learn to code HTML & CSSPoint of ReferenceN/Ahttp://learn.shayhowe.com/html-css/
36
Codecademy: Make a WebsiteTutorialCOMPLETE14/7/201714/7/2017https://www.codecademy.com/learn/make-a-website
37
Flexbox (CSS Page Layout)ArticleCOMPLETE13/4/201713/4/2017https://bocoup.com/blog/dive-into-flexbox/
38
Designing for the Appearance of SpeedArticleCOMPLETE25/4/201725/4/2017
https://medium.com/mobify-design-team/designing-for-the-appearance-of-speed-aaabc7f568c2
39
App Shell ModelArticleCOMPLETE14/7/201714/7/2017Service Workers, js requiredhttps://developers.google.com/web/fundamentals/architecture/app-shell
40
CSS DebuggingPoint of ReferenceN/ADebuggers, best and links
https://css-tricks.com/debugging-tips-tricks/?utm_source=javascriptweekly&utm_medium=email
41
Complete Guide to CSS GridArticleCOMPLETE14/7/201724/7/2017
http://chris.house/blog/a-complete-guide-css-grid-layout/?utm_source=frontendfocus&utm_medium=email
42
Getting Started with CSS Grid LayoutPoint of ReferenceN/ALinks to other CSS Grid articles
https://hackernoon.com/getting-started-with-css-grid-layout-8e00de547daf?utm_source=frontendfocus&utm_medium=email
43
Start Using CSS Grids TodayVideoCOMPLETE21/8/201721/8/2017Conference Slides available in Youtube infohttps://www.youtube.com/watch?v=tjHOLtouElA
44
Designers Guide to DPIArticleIN PROGRESS21/7/2017http://sebastien-gabriel.com/designers-guide-to-dpi/
45
Learn CSS GridINCOMPLETE
http://learncssgrid.com/?utm_source=CSS-Weekly&utm_campaign=Issue-265&utm_medium=RSS
46
CSS Grid : Learning ResourceINCOMPLETE
http://varun.ca/css-grid/?utm_source=CSS-Weekly&utm_campaign=Issue-266&utm_medium=RSS
47
Grid by ExampleINCOMPLETEhttps://gridbyexample.com/
48
Learning FlexboxArticleCOMPLETE17/6/201817/6/2018TL:DR Find the time to read the flexbox docshttps://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
49
Code School: HTML EmailsCourseCOMPLETE21/8/201721/8/2017Slides downloadedhttps://www.codeschool.com/courses/unmasking-html-emails
50
Introduction to CSS GridArticleCOMPLETE17/6/201817/6/2018Useful info on rest of her site
http://www.lottejackson.com/learning/an-intro-to-css-grid?utm_source=CSS-Weekly&utm_campaign=Issue-267&utm_medium=RSS
51
CSS StyleguideArticleINCOMPLETE
https://css-tricks.com/build-style-guide-straight-sass/?utm_source=CSS-Weekly&utm_campaign=Issue-267&utm_medium=RSS
52
CSS DoodleDocumentationINCOMPLETE
http://yuanchuan.name/css-doodle/?utm_source=CSS-Weekly&utm_campaign=Issue-267&utm_medium=RSS
53
Flexbox PlaygroundVisual ExamplesN/Ahttps://codepen.io/enxaneta/full/adLPwv/
54
BEM - Visual ExamplesVisual ExamplesN/A21/6/201721/6/2017
https://seesparkbox.com/foundry/bem_by_example?utm_source=CSS-Weekly&utm_campaign=Issue-270&utm_medium=RSS
55
CSS Grid : Importance of the FR unitArticleCOMPLETE21/6/201721/6/2017http://www.hongkiat.com/blog/css-grid-layout-fr-unit/
56
CSS VariablesArticleCOMPLETE21/6/201722/6/2017
https://www.sitepoint.com/practical-guide-css-variables-custom-properties/?utm_source=CSS-Weekly&utm_campaign=Issue-270&utm_medium=RSS
57
The State of CSSBleeding Edge infoCOMPLETE22/6/201722/6/2017http://ryanogles.by/css/javascript/2017/05/25/the-state-of-css.html
58
HTML Email - WorkflowPoint of ReferenceN/A
https://css-tricks.com/tools-html-email-workflow/?utm_source=frontendfocus&utm_medium=email
59
Codecademy - Responsive DesignCourseCOMPLETE24/6/201724/6/2017https://www.codecademy.com/learn/learn-responsive-design
60
Full Page Video - HTML, CSS & JSArticleCOMPLETE25/6/201825/6/2018
http://mediatemple.net/blog/tips/full-page-background-video-styles/?utm_source=frontendfocus&utm_medium=email
61
Udacity - Responsive ImagesCourseINCOMPLETEhttps://classroom.udacity.com/courses/ud882
62
Chris Coyier - Complete Guide to FlexboxArticleINCOMPLETEhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/
63
How to make pure CSS ImagesCourseINCOMPLETEhttp://coding-artist.teachable.com/courses/
64
Beginners Guide to Pure CSS ImagesArticleINCOMPLETEhttps://codepen.io/mikemang/post/a-beginner-s-guide-to-pure-css-images
65
How to make pure CSS animated loaderINCOMPLETE
https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c
66
Page Layout with FlexboxVideoINCOMPLETEhttps://codeburst.io/page-layout-with-flexbox-e879ceb2fd6e
67
FlexboxVideoINCOMPLETEhttps://codeburst.io/flexbox-flex-basis-flex-grow-41b10bcd33a3
68
Performance Web AnimationsArticleINCOMPLETE
https://blog.algolia.com/performant-web-animations/?imm_mid=0f581a&cmp=em-web-na-na-newsltr_20170816
69
CSS ModulesArticleCOMPLETE14/06/201814/06/2018https://glenmaddern.com/articles/css-modules
70
CSS Modules Official DocumentationINCOMPLETEhttps://github.com/css-modules/css-modules
71
Designers Guide to Flexbox & CSS GridINCOMPLETE
https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736
72
Getting Started with SassINCOMPLETE
https://www.sitepoint.com/getting-started-with-sass/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
73
Page PerformanceArticleINCOMPLETE
Article lists tools for measuring page performance
https://www.sitepoint.com/a-designers-guide-to-fast-websites-and-perceived-performance/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
74
Web AccessibilityINCOMPLETE
https://aerolab.co/blog/web-accessibility/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
75
CSS Hover TransitionsArticle / GuideINCOMPLETE
https://codeburst.io/tutorial-three-awesome-css-hover-transitions-animations-for-beginners-c14c08309091
76
Flexbox CheatsheetINCOMPLETEhttps://codeburst.io/a-simple-cheatsheet-for-flexbox-f5d3e1658447
77
Combining Flexbox & CSS Grid INCOMPLETE
https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
78
CSS Grid BuilderINCOMPLETE
https://cssgrid.cc/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
79
Responsive ImagesArticleCOMPLETE25/6/201825/6/2018useful links in the footer
https://www.lullabot.com/articles/fundamentals-of-responsive-images?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
80
HTML5 CheatsheetPoint of ReferenceN/Ahttps://medium.com/level-up-web/the-mega-html5-cheatsheet-e8c479b1c521
81
Email CSS Guide (CampaignMonitor)https://www.campaignmonitor.com/css/
82
CSS Modules for Specificity
https://webdesign.tutsplus.com/tutorials/solve-your-specificity-headaches-with-css-modules--cms-28973?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
83
(S)CSS Best Practices ArticleCOMPLETE19/06/201819/06/2018Good Article, useful links in the footer
https://medium.com/@mciastek/s-css-best-practices-that-you-have-not-yet-known-ba2f6329b5dd
84
Code School - Front End FoundationsCourseCOMPLETE18/11/201719/11/2017
85
Code School - Front End FormationsCourseCOMPLETE19/11/201719/11/2017
86
The Ultimate Guide to Flexbox
https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
87
Making Your Web App work offline (PWA)
https://css-tricks.com/making-your-web-app-work-offline-part-1/?mkt_tok=eyJpIjoiT1RFMVpHTTVaR1F6TmpObCIsInQiOiI0ajc2UnlIdE1KT21tRXdocjhWdlRWblVLYkE0dTJ0XC9razRpR3NoK1BnUlI0alRMTllLYm92dHBpU2I5TDVvbVwvOTR3UkcwaG5ZNFV0cDQySVFHRUd5XC9KZGhlOE5IYVFiaEhtSkNoXC80ZjVBOWM2eERtSE9YS01ycXlCK2J0anYifQ%3D%3D
88
Developers Guide to GraphQLArticleCOMPLETE7/7/20187/7/2018
https://css-tricks.com/front-end-developers-guide-graphql/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
89
CSS Selector SkillsArticleCOMPLETE12/06/201812/06/2018
Good resource for the different type of css selectors
https://blog.logrocket.com/level-up-your-css-selector-skills-5d7bb45ddd37
90
Interoperable CSSArticleINCOMPLETEhttps://glenmaddern.com/articles/interoperable-css
91
Smarter CSS - Webpack & SassArticleINCOMPLETEhttps://www.bensmithett.com/smarter-css-builds-with-webpack/
92
Smashingmag - BEM for beginnersArticleINCOMPLETEhttps://www.smashingmagazine.com/2018/06/bem-for-beginners/
93
94
Projects
95
96
NameContent TypeStatusStartedCompletedNotesLink
97
98
How to build a pure CSS crosswordCreate as a addition to my CVhttps://www.sitepoint.com/how-built-pure-css-crossword-puzzle/
99
How to make a Interactive Map using SVG
https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals
100
How to build a connect 4 game
https://css-tricks.com/roman-empire-made-pure-css-connect-4-possible/?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning
Loading...