8/2/2017 Internship - Frontend Internship

Divisions Projects Departments Partnerships Trainings Self Service OSF External Sharing Portal

Frontend Internship
Demandware
 New  Upload 
Basic Front-End Demandware Training Name

Frontend
Internship
PSD +
FSD
Table Of Contents
Drag files here to

1. Learning Material

> 1.1 HTML, CSS, Responsive

> 1.2 Javascript

> 1.3 Sass

2. eCommerce Frontend Project (HTML/CSS/JavaScript + Responsive)

> 2.1 Git Setup

> 2.2 Project documentation

> 2.3. Video Presentation

> 2.4. Self Evaluation

1. Learning Material

1.1 HTML, CSS, Responsive

Tutorials
Please go through these tutorials first, so that you have a clear overview of the technologies you are going to work with, in the
practical project.

First step

1.1.1 Learn HTML/CSS in 30 days - http://courses.tutsplus.com/courses/30-days-to-learn-html-css

(this tutorial is very important and needs to be gone through thoroughly, to make sure you have all the basics very clear)
After you finish this tutorial please send the trainer a subject with a full report on each topic, with a short description of what you have
learnt there and how and when you intend to use those concepts.

Further steps

1.1.2 PSD to HTML: http://code.tutsplus.com/tutorials/from-psd-to-html-building-a-set-of-website-designs-step-by-step--net-37

http://webdesign.tutsplus.com/articles/create-a-sleek-corporate-web-design-hd-video-series-day-1--webdesign-
2680
1.1.3 HTML Best Practices - http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
1.1.4. Design and Code Your First Website in Easy to Understand Steps - http://net.tutsplus.com/tutorials/html-css-
techniques/design-and-code-your-first-website-in-easy-to-understand-steps/
1.1.5. How to use Firebug - http://www.youtube.com/watch?v=d83vhCYMXPI
1.1.6 Best practices to develop responsible websites - http://www.catswhocode.com/blog/tips-and-best-practices-to-develop-
responsible-websites
1.1.7 Guidelines for responsive web design - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
1.1.8 30 css selectors you must memorize - http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-
memorize/

Responsive Design Workflows - http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-Workflows/107421-

2.html?
srchtrk=index%3A1%0Alinktypeid%3A2%0Aq%3Aresponsive%0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2
Responsive Design Fundamentals - http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-
Fundamentals/104969-2.html?
srchtrk=index%3A2%0Alinktypeid%3A2%0Aq%3Aresponsive%0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2
Creating Responsive Web Design - http://www.lynda.com/CSS-tutorials/Creating-Responsive-Web-Design/110716-2.html?
srchtrk=index%3A3%0Alinktypeid%3A2%0Aq%3Aresponsive%0Apage%3A1%0As%3Arelevance%0Asa%3Atrue%0Aproducttypeid%3A2
^ Back to Top

https://osfglobalinc.sharepoint.com/intern/SitePages/DW/Frontend%20Internship.aspx?RootFolder=%2Fintern%2Fdw%2FFrontend&FolderCTID=0x0120007D… 1/4
8/2/2017 Internship - Frontend Internship
How to reduce and optimize png images - http://www.queness.com/post/2507/most-effective-method-to-reduce-and-optimize-png-
images

Tools
These tools will help you speed up the front development process. Check them out and use them in your project. Also explore others
that can make your process faster and more efficient.

         1.1.13 Evaluate all these tools

W3 Validator - http://validator.w3.org

CSS Validator - http://jigsaw.w3.org/css-validator

Pixus - http://code.google.com/p/pixus
Photoshop Trial - https://creative.adobe.com/products/download/photoshop
Color Cop - http://colorcop.net
Firebug - https://getfirebug.com
Lipsum - http://www.lipsum.com
Lorem Pixum - http://lorempixum.com
Sublime Text - http://www.sublimetext.com/

Further reference:
You are encouraged to use the following resources as reference:

HTML5 Reference - http://html5doctor.com/

Sitepoint - http://www.sitepoint.com
Webdesigner Depot - http://www.webdesignerdepot.com
Mozilla Developer Network - https://developer.mozilla.org/

1.2 Javascript

Tutorials

First step

1.2.1 Learn Jquery in 30 days - http://courses.tutsplus.com/courses/30-days-to-learn-jquery

(this tutorial is very important and needs to be gone through thoroughly, to make sure you have all the basics very clear)

Further steps

1.2.2 In this overview some of the recent useful JavaScript and jQuery libraries for forms, typography, images and general time-
savers are presented: http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/
1.2.3 Tips, Resources and Patterns for Responsive Web Design: http://bradfrost.github.com/this-is-responsive/index.html
1.2.4 jQuery Fundamentals: http://jqfundamentals.com/
1.2.5. TheCodePlayer plays code like a video helping people to teach and learn front end technologies like HTML5, CSS3,
Javascript, Jquery easily, quickly and interactively: http://thecodeplayer.com/
1.2.6 a useful tool: http://responsive.victorcoulon.fr/
1.2.7 an article on PNG optimization techniques: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/;
1.2.8 tutorials on introduction to JavaScript Source Maps: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
1.2.9 useful resources to learn more about jQuery Mobile: http://jquerymobile.com/resources/

Further ference:

a very good book on Javascript (from beginner to intermediate): http://www.amazon.com/Object-Oriented-JavaScript-high-quality-

applications-Technologies/dp/1847194141

1.3 Sass

Tutorial on Sass: http://sass-lang.com/guide

Good video tutorials: http://code.tutsplus.com/series/mastering-sass--net-19077

You can compile sass with 

Compass - http://compass-style.org/ or
Gulp - http://www.sitepoint.com/introduction-gulp-js/

2. eCommerce Frontend Project (HTML/CSS/JavaScript + Responsive)

2.1 Git Setup

^ Back to Top

https://osfglobalinc.sharepoint.com/intern/SitePages/DW/Frontend%20Internship.aspx?RootFolder=%2Fintern%2Fdw%2FFrontend&FolderCTID=0x0120007D… 2/4
8/2/2017 Internship - Frontend Internship
Please create your own repository on a free Bitbucket account and communicate the repository url to the trainer.
Than commit and push sources after you finish features, preferably daily.

Please use these tutorials to set things up:

Bitbucket with SourceTree - https://www.youtube.com/watch?v=8wtV7sbc6Ng
Quick Git Guite http://rogerdudler.github.io/git-guide/
Interactive Git Tutorial - https://www.codeschool.com/courses/try-git

2.2 Project documentation

Please download the PSD + FSD archive for the Project.

The Functional Specifications Document (FSD) will show you step by step what the requirements are for the layouts, that need to look
exactly like in the Photoshop (PSD) file.

What will be reviewed on the project:

HTML5
Code Simplicity (avoid too many ids, classes, etc)
Correct CSS usage
Sass usage
Javascript plugins & custom javascript
Implement all requirements in FSD document
Implement all details in the PSD file
The layouts should be responsive

2.3. Video Presentation

Please create a presentation video of the website where you analyze:

- the frontend, in the browser, where you present any action elements for the user, etc;
- how your organized your css/js;
- present the overall js logic and why you chose certain methods;
- the challenges you had to overcome;
- what other improvements could be added.

Tools needed:
- Jing (Download here);

Jing is a free tool that captures your screen and records your voice. The maximum duration is 5 minutes/video but you can do 2 videos
so you can explain the full application. It can record in SWF/Flash format which has a very small file size - Aprox. 50 MB/5 minute
movie.
Please upload these 2 vids to your personal dropbox folder and send the invite to the files over email.

2.4. Self Evaluation

The best developers are those that have clear self-awareness and clear goals regarding their professional development and hard skills
development.

Please send your trainer an email with the following:

- Strong Points
- Points to Improve;
- Short term goals;
- Long term goals.

^ Back to Top

https://osfglobalinc.sharepoint.com/intern/SitePages/DW/Frontend%20Internship.aspx?RootFolder=%2Fintern%2Fdw%2FFrontend&FolderCTID=0x0120007D… 3/4
8/2/2017 Internship - Frontend Internship

^ Back to Top

https://osfglobalinc.sharepoint.com/intern/SitePages/DW/Frontend%20Internship.aspx?RootFolder=%2Fintern%2Fdw%2FFrontend&FolderCTID=0x0120007D… 4/4