Front-End Web Developer - Learning Guideline
0. General
- ( Web Development in 2018 - A Practical Guide )
-h ttps://[Link]/watch?v=Zftx68K-1D4
1. Basic Photoshop Knowledge [ 1-3 Days ]
- Youtube Channel: TastyTuts
-- Lesson: Learn Adobe Photoshop (33 Video Episode)
-- Link:
[Link]
[ 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://[Link]/advanced-css-and-sass/learn/v4/overview
[ For Code Documentations, I suggest the following: ]
-- [Link]
-- [Link]
-- [Link]
3. Learn EMMET for faster developing in HTML and CSS.
[ 1-2 Hours ]
- Lesson: Emmet For Faster HTML & CSS Workflow
-- Link: h
ttps://[Link]/watch?v=5BIAdWNcr8Y
[ EMMET Cheat Sheet ]
- [Link]
4. Learn BEM for organized HTML Code Structure. [ 1-3 Hours]
- Link: h
ttp://[Link]/
5. Learning GIT [ 8-10 Hours ]
- Lesson: GitHub Ultimate: Master Git and GitHub - Beginner to Expert
-- Link: h
ttps://[Link]/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:
[Link]
[ 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://[Link]/levels/1/challenges/1
8. Learning [Link] [ 2-3 Days ]
- Lesson: Web Animation using JavaScript: Develop & Design (Develop and
Design)
- Link:
[Link]
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: [Link]
-- Link: h
ttp://[Link]/js/[Link]
-- Activity: h ttps://[Link]/louie_rosero/full/yKRPJx/
- Name: CSS Browser Selector v0.4.0
-- Link: h ttp://[Link]
-- Activity: h ttps://[Link]/maricarcopicoonggon/pen/MVPVaq?editors=0100
- Name: BxSlider v4.1.2
-- Link: h ttp://[Link]
-- Activity: None
- Name: JQuery Fancybox Version 1.3.4
-- Link: h ttp://[Link]
-- Activity: h ttps://[Link]/louie_rosero/full/xWypdd/
- Name: Boxer v3.3.0
-- Link: h ttps://[Link]/lightbox/[Link]
-- Activity: h
ttps://[Link]/christian-gss/full/dmgdKB/
- Name: [Link] 1.8.3
-- Link: h
ttp://[Link]
-- Activity: None
- Name: imagesLoaded PACKAGED v4.1.1
-- Link: h ttps://[Link]/
-- Activity: h ttps://[Link]/christian-gss/details/rdqGgq/
- Name: Lazy Load 1.9.7
-- Link: h ttps://[Link]/projects/lazyload/
-- Activity: h ttps://[Link]/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 [Link] for the animation in their
website.
-- When using the CSS3 style, always used the counterpart for the different
browser.
