Front-End Web Developer - Learning Guideline: 0. General

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.

Front-End Web Developer - Learning Guideline: 0. General

Uploaded by

Copyright:

Available Formats

Front-End Web Developer - Learning Guideline: 0. General

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Front-End Web Developer - Learning Guideline: 0. General

Uploaded by

Copyright:

Available Formats

Front-End Web Developer - Learning Guideline

Tfal Website Projects

You might also like