Front-End Web Developer - Learning Guideline 

 
0. General  
- ( ​Web Development in 2018 - A Practical Guide ) 
-h​ ttps://www.youtube.com/watch?v=Zftx68K-1D4 
 
1. Basic Photoshop Knowledge [ 1-3 Days ] 
- Youtube Channel: TastyTuts 
-- Lesson: Learn Adobe Photoshop (33 Video Episode) 
-- Link: 
https://www.youtube.com/watch?v=sF_jSrBhdlg&list=PLYfCBK8IplO6v0QjCj-TSrFUXnRV0WxfE 
 
[ NOTE ] 
- There is a time that the text in Tfal PSD is save as an image. 
- Used the TRIM when cropping the selected image. 
- Save the image to it specific output. For example, if the image has don't have a 
background, save it into PNG and when the image has a background save it into 
JPG. 
- When saving the image. It's better to used the 'Save for Web' to avoid the 
bigger image size. 
- For the small image, it's better if the image size is below 100kb and for the Big 
Image it's advisable to save it within 150 - 200kb. 
 
2. Advanced HTML & CSS [ 2-3 Days ] 
- Lesson: Advanced CSS and Sass: Flexbox, Grid, Animations and More! 
-- Link: h​ ttps://www.udemy.com/advanced-css-and-sass/learn/v4/overview 
 
[ For Code Documentations, I suggest the following: ] 
-- ​http://devdocs.io/ 
-- ​https://developer.mozilla.org/en-US/docs/Web 
-- ​https://www.w3schools.com/ 
 
3. Learn EMMET for faster developing in HTML and CSS. 
[ 1-2 Hours ] 
- Lesson: Emmet For Faster HTML & CSS Workflow 
-- Link: h
​ ttps://www.youtube.com/watch?v=5BIAdWNcr8Y 
 
[ EMMET Cheat Sheet ] 
- ​https://docs.emmet.io/cheat-sheet/ 
 
4. Learn BEM for organized HTML Code Structure. [ 1-3 Hours] 
- Link: h
​ ttp://getbem.com/ 
 
5. Learning GIT [ 8-10 Hours ] 
- Lesson: GitHub Ultimate: Master Git and GitHub - Beginner to Expert 
-- Link: h
​ ttps://www.udemy.com/github-ultimate/learn/v4/overview 
 
[ NOTE ] 
- ​The most important parts here is the following. 
-- Git Clone 
-- Git Commit 
-- Git Push 
-- Git Pull 
-- Git Branch 
-- Git Merge 
-- Git Checkout 
 
6. Learning Javascript Basic (Functions, Events, Values) [ 10 
Days ] 
- Lesson: The Complete JavaScript Course 2018: Build Real Projects! 
-- Link: 
https://www.udemy.com/the-complete-javascript-course/learn/v4/overview 
 
[ NOTE ] 
- ​In Tfal when naming the class for the animation. They named it by 
'js-yourclassname'. This is the technique they used to organized what is for the 
css designing and what is for js animation. 
 
7. Learning JQuery Basics (DOM Manipulation and Events 
Animation) [ 2-3 Days ] 
- Lesson: Learn JQuery 
-- Link: h
​ ttp://try.jquery.com/levels/1/challenges/1 
 
8. Learning Velocity.js [ 2-3 Days ]  
- Lesson: Web Animation using JavaScript: Develop & Design (Develop and 
Design) 
- Link: 
https://doc.lagout.org/programmation/JavaScript/Web%20Animation%20using%2
0JavaScript_%20Develop%20and%20Design%20%5BShapiro%202015-04-06%5D.p
df 
 
[ For the Activities, do an animation that apply the effects below. ] 
- Page Scroll, Image Transitions, Modal 
 
9.) Study the following JavaScript Plugins [ 2-4 Days ] 
- Name: ​Scroll.js 
-- Link: h
​ ttp://www.club.t-fal.co.jp/js/scroll.js 
-- Activity: h ​ ttps://codepen.io/louie_rosero/full/yKRPJx/ 
 
- Name: ​CSS Browser Selector v0.4.0 
-- Link: h​ ttp://rafael.adm.br 
-- Activity: h ​ ttps://codepen.io/maricarcopicoonggon/pen/MVPVaq?editors=0100 
 
- Name: ​BxSlider v4.1.2 
-- Link: h ​ ttp://bxslider.com 
-- Activity: None 
 
- Name: ​JQuery Fancybox Version 1.3.4 
-- Link: h ​ ttp://fancybox.net 
-- Activity: h ​ ttps://codepen.io/louie_rosero/full/xWypdd/ 
 
- Name: ​Boxer v3.3.0 
-- Link: h ​ ttps://www.jqueryscript.net/lightbox/Quick-Simple-LightBox-Plugin-Boxer.html 
-- Activity: h
​ ttps://codepen.io/christian-gss/full/dmgdKB/ 
 
- Name: ​Underscore.js 1.8.3 
-- Link: h
​ ttp://underscorejs.org 
-- Activity: None 
 
- Name: ​imagesLoaded PACKAGED v4.1.1 
-- Link: h​ ttps://imagesloaded.desandro.com/ 
-- Activity: h ​ ttps://codepen.io/christian-gss/details/rdqGgq/ 
 
- Name: ​Lazy Load 1.9.7 
-- Link: h ​ ttps://appelsiini.net/projects/lazyload/ 
-- Activity: h ​ ttps://codepen.io/louie_rosero/full/jzeKEr/ 
 
 
 
 
 
 
 
 
 

Tfal Website Projects 

1.) Start by gathering the image from psd and save into /assets/img/ 
folder. [ 3-5 Hours ] 
-- ​Get the based HTML template from tfal since this is where your going to code. 
-- ​Only code inside the class “​l-pc​” and “​l-sp​”. ​l-pc​ is for the desktop view up to 
768px device width and the ​l-sp​ is for the device that start at 767px up to smaller 
device width. 
 
2.) Coding the Website into HTML and CSS for Desktop View. [ 8-16 Hours ] 
3.) Coding the Website into HTML and CSS for 767px Mobile Device View.  
[ 5-8 Hours ] 
-- Code Indentation is a must. It should be 2 spaces and not a TAB. 
-- Comment at the closing </div> tag is based on what is the ID or class name of 
the specific <div> tag. 
-- When you image is a Japanese text, include the text into the ALT of the <img> 
tag. 
 
4.) Apply the Animation in Desktop View. [ 5-8 Hours ] 
5.) Apply the Animation in 767px Mobile Device View. [3-5 Hours] 
-- Tfal used a combination of CSS3 and Velocity.js for the animation in their 
website. 
-- When using the CSS3 style, always used the counterpart for the different 
browser.