Skip to content

A training program to get new CMS Operations developers up to speed in their first ~2.5 weeks.

License

Notifications You must be signed in to change notification settings

simpleviewinc/cms-bootcamp

Repository files navigation

CMS Bootcamp

A training program to get new CMS Operations developers up to speed in their first ~2.5 weeks.

Each module will come with a training course and series of assessments to be completed. The "Estimate Time Needed" accounts for both the course and completion of the assessments in order to keep the bootcamp to roughly 2 weeks.

Week 1

HTML

A crash course on the basics of HTML; everything from tags and attributes to structured content and accessibility.

Estimated Time Needed: 4 hours

Course: https://web.dev/learn/html/

Assessment:

  1. Build a form
  2. Create a responsive image that only changes in resolution
  3. Create a responsive image that changes aspect ratio
  4. Mock up a design in using only HTML

CSS

An overview of the cascade, inheritance, specificity, RWD, all the way up to the latest with Flexbox and Grid.

Estimated Time Needed: 6 hours

Course: https://web.dev/learn/css/

Assessment:

  1. Style based on attribute
  2. Style only the children of an element
  3. Style only the elements that are immediately preceded by another element
  4. Create a series of buttons with different color schemes
  5. Create a hover effect that makes an element grow from its center animating only 1 property
  6. Allow clicks to pass through an overlay

JavaScript

A complete beginners course that focuses on the fundamentals of JavaScript with practical, real world examples.

Estimated Time Needed: ~46 hours

Course: https://levelup.video/tutorials/better-javascript

Assessment:

  1. Create a new array that is a subset of a bigger array based on some criteria
  2. Make a new array that is a transform of an existing array
  3. Use an object to create a map
  4. Add a click event listener to a button
  5. Grab the HTML from part of the DOM and copy it to another part of the DOM
  6. Fetch data from an API and print the titles from the returned items to the DOM

Week 2

CSS Grid

Know that you know the fundamentals of CSS, let's go deep on the topic of CSS Grid and how it can empower and simplify layout building.

Estimated Time Needed: 8 hours

Course: https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG

Assessment:

  1. Write a responsive grid without media queries
  2. Overlap multiple layers without using position
  3. Place items in specific places on a grid, placed items should also stick to the top of the page as you scroll

Flexbox

Flexbox, like CSS Grid, is an invaluable tool when building components or layouts. This training will explore the limits of what can be done with Flexbox.

Estimated Time Needed: 8 hours

Course: https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid

Assessments:

  1. Center some content
  2. Place sibling elements at either end of their parent
  3. Position element at the bottom of parent
  4. Create responsive form layout

Collections

It's time to go over some Simpleview specific tools. In this module, you'll learn about our Collections system which is the bread-and-butter of our CMS. This exercise should give you a walk through of the evolution of how Collections have been built over the years in order to demonstrate how all it's complex systems fit together and the problems they were trying to solve.

In this section you'll learn about:

  • Collections: A system that can hydrate a template with data from different sources.
  • Collection Helper: A system that normalizes data regardless of source to make template management simpler as well as providing hooks for various expected features.
  • Core Collection Library (CCL): A library of classes of widgets that are theme-able and extendable.

All work will be done in a fresh instance of the Base Client specific to the trainee.

Estimated Time Needed: 24 hours

Course: Hands-on, 1-1 time with your Lead/teammates

Assessments:

  1. Make your own version of the Cards, 3-Across collection without using Collection Helper or CCL
  2. Rebuild your version of Cards, 3-Across using Collection Helper
  3. Rebuild your version of Cards, 3-Across as a CCL widget using Collection Helper; include a change to the image aspect ratio and some styling changes to the fonts and colors
  4. Add title and view all link support to widget from #3, update template to support the new fields

About

A training program to get new CMS Operations developers up to speed in their first ~2.5 weeks.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 3

  •  
  •  
  •  

Languages