Pagepro Blog

Internship

Front-end Internship: Days 2-3

Posted on .

Front-end Internship: Days 2-3

Introduction

I. Recall basics of Adobe Photoshop

II. Convert the following PSD (Photoshop) web design to HTML/CSS/JS.

Source files

Requirements

  1. Level Easy:
    • Prepare project without custom fonts.
  2. Level Medium
    • Add Google Webfonts
    • Add HTML5 validation for Newsletter Form
    • Embed VIMEO video: https://vimeo.com/channels/staffpicks/160397656
  3. Level Hard:

Workflow

  1. Create project using the latest version of HTML5Boilerplate
  2. Use HTML5 / CSS3 (do not use SASS).
  3. Stick to our HTML/CSS styleguide: https://github.com/klojniewski/boilessplate
  4. Create new GitHub repository for this project and push changes frequently:
    1. First Commit: HTML5 Boilerplate project structure
    2. Second Commit: HTML for HEADER
    3. … small parts of HTML sections as separate commits
    4. CSS for base styles
    5. CSS for HEADER
    6. … small parts of CSS for specific sections as separate commits.
  5. Ask your Mentor for feedback after:
    1. Preparing whole HTML for whole Page.
    2. Preparing whole CSS for Page.
  6. Recommended tools:
    1. https://validator.w3.org
    2. http://www.welldonecode.com/perfectpixel/

Supported browsers

  • Firefox (latest version)
  • Google Chrome (latest version)
  • Microsoft Edge
  • Internet Explorer 10 / 11
Chris Lojniewski

Chris Lojniewski

http://pagepro.co

There are no comments.

View Comments (0) ...
Navigation