├── README.md ├── how.md ├── index.md ├── phases ├── 1-programming.md ├── 2-frontend.md └── 3-project.md └── projects ├── proj-browser-testing.md ├── proj-event-cards.md ├── proj-more-git.md └── proj-sb-howto.md /README.md: -------------------------------------------------------------------------------- 1 | **Disclaimer:** *This guide is under construction. We are slowly translating our Sparkbox apprenticeship content into a useful format here on GitHub.* 2 | 3 | # Sparkbox Apprenticeship Guide 4 | 5 | Sparkbox is a team that values education. We offer paid apprenticeships at our Dayton office because we love what we do, we want to help create new talent, and we genuinely care about the future of the web. 6 | 7 | We hate the idea of keeping our apprenticeship program to ourselves, though. If you're not in our area, no problem! We're outlining our entire program here for you to do on your own - or to introduce to your team. If you're crazy about the idea of becoming a well-rounded web developer, yet aren't quite sure where to start, we think you've found just the right place to begin. 8 | 9 | ## Who This Is For 10 | 11 | We build responsive, standards-compliant, content-focused, well-crafted, accessible, beautiful web sites and apps, and we're looking for other web geeks who want to do the same. Passion, character, and initiative are a requirement. A long resumé is not — as long as you care about the right things, we can help build your skillset. 12 | 13 | This isn't for the faint of heart. Learning technical skillsets isn't easy work, and the curve can be steep. This curriculum is for the kind of people who are ready to pour themselves into it - eager to pick up everything they can. We're looking for folks interested in *web development* — frontend, backend, or anything code related. 14 | 15 | ## What You'll Be Doing 16 | 17 | In the first months of your apprenticeship, you'll be exposed to the core technologies of our work and work flow. Everyone, regardless of job title, will be brought to an understanding of Sparkbox's convictions on the priority of content, value of design, semantic HTML, and mobile-first CSS. 18 | 19 | We'll start with a philosophy of learning - we want you to get the most out of your education. Then you'll be exposed to programming languages, our Github-centric project management, our highly specialized frontend development workflow, our deployment processes, best practices for clean code and separation of concerns, and unit testing techniques. 20 | 21 | ### Apply 22 | 23 | If you're [local][] to Dayton, Ohio (or want to be for 6 months), we invite you to take on a full-fledged apprenticeship in our office. We run the 6-month program once per year (typically, January through June). You'll get a seat right in the middle of our office, and hands-on training in a real web shop. Visit the [Sparkbox Apprenticeships website][] for more information and to apply. 24 | 25 | Otherwise, this guide should provide you with everything you need to get started on your own. 26 | 27 | Enough jabber. [Let's get going][]. 28 | 29 | [local]: https://maps.google.com/maps?q=123+Webster+St.,+Studio+2,+Dayton,+OH+45402&hl=en&sll=40.365277,-82.669252&sspn=4.53679,8.811035&hnear=123+Webster+St,+Dayton,+Montgomery,+Ohio+45402&t=m&z=16 30 | [Sparkbox Apprenticeships website]: http://apprentices.seesparkbox.com/ 31 | [Let's get going]: index.md 32 | -------------------------------------------------------------------------------- /how.md: -------------------------------------------------------------------------------- 1 | [← Back to README](/README.md) 2 | 3 | The Sparkbox Apprenticeship is comprised of a [curriculum](/index.md) supplemented by a regular schedule of: pairing with fulltime Sparkboxers, pairing with other apprentices, journal writing, and informal and formal reviews which include short presentations. 4 | 5 | ## Pairing 6 | 7 | ###With Sparkboxers### 8 | 9 | Nothing can compare to sitting with full-time, professional developers to gain exposure to good technique and problem solving. Our apprentices are expected to pair at least twice a week, at least one hour at a time, with full-time Sparkboxers. 10 | 11 | ###With Other Apprentices### 12 | 13 | Sometimes, figuring out a problem with another person—even if they don't have any more answers than you—can really benefit new learners. Sparkbox apprentices are encouraged to collaborate and pair with their fellow apprentices early and often, and pairing becomes essential as the apprenticeship progresses into group project work. 14 | 15 | ## Journal Writing 16 | 17 | If for no other reason than to allow apprentices the opportunity to reflect on their experiences and catalog their progress, we ask our apprentices to journal once a week. Book reviews, thoughts, struggles, lessons learned, and feedback to Sparkbox are all encouraged. 18 | 19 | ## Reviews 20 | ### Formal Reviews 21 | Roughly once a month, we hold formal reviews with Sparkbox apprentices. In these reviews, apprentices are given the opportunity to practice their presentation skills, speaking for a short time about a subject of their choice related to their recent learning. In these reviews, apprentices are given feedback on areas they can improve and areas they have already improved, and new goals are set. 22 | 23 | At the end of each formal review, we mutually have the opportunity to determine if the apprenticeship should continue, not continue, or if Sparkbox would like to extend an offer for full-time employment. 24 | 25 | ### Informal Reviews 26 | 27 | Informal reviews occur weekly. Sparkbox leadership sets aside portions of their week to give short checkpoint status meetings with apprentices, checking in on goals and the overall individual apprentice's experience. 28 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | [← Back to README](/README.md) 2 | 3 | The Sparkbox Apprenticeship is loosely separated into three phases. Completing a phase provides a clear checkpoint for review, reflection, and closure. 4 | 5 | ### Phase 1 - *Source Control and Programming Basics* 6 | Phase one explores the essential software toolset and uses them to establish proficiency regarding the foundations of software development through practical challenges. 7 | 8 | [See the Phase 1 Curriculum →][] 9 | 10 | ### Phase 2 - *Frontend Development: Markup, Style, Interaction, and Preprocessing* 11 | During Phase two, developers work with HTML and CSS to implement a product card layout. 12 | 13 | [See the Phase 2 Curriculum →][] 14 | 15 | ### Phase 3 - *MVC Frameworks, Databases, and Personal Projects* 16 | In Phase three, developers have the opportunity to put their newly acquired skills to good use building a working app via a fully agile process with project management, design, and even an internal "client." 17 | 18 | [See the Phase 3 Curriculum →][] 19 | 20 | ### *Job Preparedness* 21 | Sparkbox considers our apprenticeship the pathway to hiring inexperienced developers. While there is no guarantee, our goal for the apprenticeship is to prepare individuals for a development career at Sparkbox. 22 | For those who are not a match or would like to find a position outside Sparkbox, we will make guidance and support available to all apprentices for interviews, resumes, cover letters, portfolio design, etc. 23 | 24 | [See the Job Preparedness Curriculum →][] 25 | 26 | [See the Phase 1 Curriculum →]: phases/1-programming.md 27 | [See the Phase 2 Curriculum →]: phases/2-frontend.md 28 | [See the Phase 3 Curriculum →]: phases/3-project.md 29 | -------------------------------------------------------------------------------- /phases/1-programming.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Phase 1 - *Source Control and Programming Basics* 4 | 5 | #### **Reading:** 6 | Read these books and add a 100 - 200 word review to your weekly journal. This should be a brief summary with your biggest applicable takeaway. 7 | 8 | * [Getting Real][], 37signals 9 | * [Passionate Programmer][], Chad Fowler 10 | * [Pragmatic Programmer][], Andrew Hunt & Dave Thomas 11 | 12 | #### **Training:** 13 | * Week 0: CLI & Command Line 14 | * Week 1: Git at Sparkbox 15 | * ♫ "Shunting trucks and hauling freight" ♫ 16 | * Week 2: Functional Programming 17 | * Breaking a Problem Down by Breaking a Problem Down 18 | * Reason Your Way to Fame and Fortune 19 | * Week 3: Object Oriented Programming 20 | * "Mr. Watson, come here. I want to see you." --A. Bell 21 | * Cells: The Building Blocks of Life! 22 | * Week 4: SOLID Principles 23 | * You Can't Make All the Principles Happy All of the Time 24 | * Use the Force 25 | * Week 5: Testing 26 | * "Weeks of programming can save you hours of planning" 27 | * Test After: Show Correctness 28 | * Test Before: Show Intention 29 | * Test to Drive Design: Show Up On Time While Being Intentionally Correct 30 | * Week 6: Introduce CLI Project 31 | * Week 7: Design Patterns 32 | * You Mean There's a Name for What I Did? 33 | * Week 8: Evolving Your Design 34 | * Dammit Jim, I'm a programmer not a philosopher...oh, wait 35 | 36 | * [CodeSchool: Try Git][] 37 | * [CodeSchool: Git Real][] 38 | * [CodeSchool: Git Real 2][] 39 | * [More Git][]: more Git practice 40 | * [CodeSchool: Try Ruby][] 41 | * [Ruby koans][]: let's start learning Ruby 42 | * [CodeSchool: Ruby Bits 1][] 43 | * [CodeSchool: Ruby Bits 2][] 44 | * [CodeSchool: Testing with RSpec][] 45 | * [Triangle Kata - Ruby][] *with test suite* 46 | * [Game of Life Kata - Ruby][] *with test suite* 47 | * Game of Life - Git: push your project to Github for review 48 | * Game of Life - Review: code review your project with your technical director 49 | * [Ruby Warriors][] 50 | * Game of Life - Refactor: implement changes discussed in review 51 | 52 | #### **Additional Resources:** 53 | 54 | * [Explain Shell][] 55 | * [From Zero to Hero with Dotfiles: Pt 1][] 56 | * [From Zero to Hero with Dotfiles: Pt 2][] 57 | * [40 Terminal Tips & Tricks][] 58 | * [Git Cheat Sheet][] 59 | * [Practical Object Oriented Programming in Ruby][] (“sb-bookshelf” in Dropbox) 60 | * [Learn the Command Line the Hard Way][] 61 | * [Learn Ruby the Hard Way][] 62 | * [Why's Poignant Guide to Ruby][] 63 | * [Apprenticeship Patterns][] 64 | * Practical Vim ("sb-bookshelf" in Dropbox) 65 | * [Treehouse][] 66 | * [Learn Git Branching][]: Learn Git visually and interactively 67 | * [Principles Wiki][]: Study software design principles 68 | * [Learning JavaScript Design Patterns][] 69 | 70 | [Getting Real]: http://gettingreal.37signals.com/ 71 | [Passionate Programmer]: http://www.amazon.com/The-Passionate-Programmer-Remarkable-Development/dp/1934356344 72 | [Pragmatic Programmer]: https://www.amazon.com/Pragmatic-Programmer-Journeyman-Master/dp/020161622X 73 | 74 | [CodeSchool: Try Git]: http://www.codeschool.com/courses/try-git 75 | [CodeSchool: Git Real]: http://www.codeschool.com/courses/git-real 76 | [CodeSchool: Git Real 2]: https://www.codeschool.com/courses/git-real-2 77 | [More Git]: ../projects/proj-more-git.md 78 | [CodeSchool: Try Ruby]: http://tryruby.org/ 79 | [Ruby koans]: http://rubykoans.com/ 80 | [CodeSchool: Ruby Bits 1]: http://www.codeschool.com/courses/ruby-bits 81 | [CodeSchool: Ruby Bits 2]: http://www.codeschool.com/courses/ruby-bits-part-2 82 | [CodeSchool: Testing with RSpec]: https://www.codeschool.com/courses/testing-with-rspec 83 | [Triangle Kata - Ruby]: http://web.archive.org/web/20140119031248/http://onestepback.org/vital_testing/ 84 | [Game of Life Kata - Ruby]: https://github.com/garora/TDD-Katas#game-of-life- 85 | [Ruby Warriors]: https://www.bloc.io/ruby-warrior/#/ 86 | 87 | [Explain Shell]: http://www.explainshell.com 88 | [From Zero to Hero with Dotfiles: Pt 1]: http://code.tutsplus.com/tutorials/setting-up-a-mac-dev-machine-from-zero-to-hero-with-dotfiles--net-35449 89 | [From Zero to Hero with Dotfiles: Pt 2]: http://code.tutsplus.com/tutorials/setting-up-a-mac-dev-machine-from-zero-to-hero-with-dotfiles-part-2--cms-23145 90 | [40 Terminal Tips & Tricks]: http://computers.tutsplus.com/tutorials/40-terminal-tips-and-tricks-you-never-thought-you-needed--mac-51192 91 | [Git Cheat Sheet]: https://services.github.com/on-demand/downloads/github-git-cheat-sheet.pdf 92 | [Practical Object Oriented Programming in Ruby]: http://www.amazon.com/Practical-Object-Oriented-Design-Ruby-Addison-Wesley/dp/0321721330 93 | [Learn the Command Line the Hard Way]: http://cli.learncodethehardway.org/book/ 94 | [Learn Ruby the Hard Way]: http://ruby.learncodethehardway.org/book/ 95 | [Why's Poignant Guide to Ruby]: http://cloud.github.com/downloads/mislav/poignant-guide/whys-poignant-guide-to-ruby.pdf 96 | [Apprenticeship Patterns]: http://chimera.labs.oreilly.com/books/1234000001813/index.html 97 | [Treehouse]: http://teamtreehouse.com/ 98 | [learn git branching]: https://learngitbranching.js.org/ 99 | [principles wiki]: http://www.principles-wiki.net/ 100 | [learning javascript design patterns]: https://addyosmani.com/resources/essentialjsdesignpatterns/book/ 101 | -------------------------------------------------------------------------------- /phases/2-frontend.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Phase 2 - *Frontend Development: Markup, Style, Interaction, and Preprocessing* 4 | 5 | #### **Reading:** 6 | Read these books add a 100 - 200 word review to your weekly journal. This should be a brief summary with your biggest applicable takeaway. For articles, a few sentences is fine. 7 | 8 | * [A Dao of Web Design][], John Allsopp 9 | * [HTML5 for Web Designers][], Jeremy Keith 10 | * [CSS3 for Web Designers][], Dan Cederholm 11 | * [Responsive Web Design][], Ethan Marcotte 12 | * [Mobile First][], Luke Wroblewski 13 | * [Atomic Design][], Brad Frost 14 | * [BEM by Example][], Nathan Rambeck 15 | 16 | #### **Training: [Frontend Project][]** 17 | 18 | ##### Week 0: Prep 19 | 20 | * Set up a [CodePen][] profile. 21 | * [Treehouse: Introduction to HTML and CSS][] 22 | * [Treehouse: HTML Basics][] 23 | * [Treehouse: Practice Semantic HTML][] 24 | * [Treehouse: HTML Forms][] 25 | * [Treehouse: Practice File Paths][] 26 | 27 | ##### Week 1: HTML 28 | 29 | * [Treehouse: CSS Basics][] 30 | * [Treehouse: Practice Media Queries][] 31 | * [Treehouse: Practice CSS Selectors][] 32 | 33 | ##### Week 2: CSS 34 | 35 | * Finish reading [Responsive Web Design][] by Ethan Marcotte 36 | * [Treehouse: Responsive Layouts][] 37 | * [Treehouse: CSS Grid][] 38 | * [Treehouse: Practice Flexible CSS Grid Layout][] 39 | * [Treehouse: Practice CSS Grid Columns, Rows, and Gaps][] 40 | 41 | ##### Week 3: Layout 42 | 43 | * Finish [BEM by Example][] by Nathan Rambeck 44 | * [Treehouse: SVG Basics][] 45 | 46 | ##### Week 4: BEM + SVG 47 | 48 | * [Treehouse: Sass Basics][] 49 | * [Treehouse: CSS to Sass][] 50 | 51 | ##### Week 5: Sass 52 | 53 | * *Extra Credit: [FizzBuzz][] in CSS on [CodePen][]* 54 | 55 | #### **Additional Resources:** 56 | 57 | * [Design is a Job][], Mike Monteiro 58 | * [Javascript Koans][] 59 | * [CodeSchool: JavaScript Best Practices][] 60 | * [Advanced JS Fundamentals by Mozilla Developer Network][] 61 | * [HTTP: The Protocol Every Web Developer Must Know - Part 1][] 62 | * [HTTP: The Protocol Every Web Developer Must Know - Part 2][] 63 | * [A cartoon intro to DNS over HTTPS by Lin Clark][] 64 | 65 | [A Dao of Web Design]: http://alistapart.com/article/dao 66 | [HTML5 for Web Designers]: http://www.abookapart.com/products/html5-for-web-designers 67 | [CSS3 for Web Designers]: http://www.abookapart.com/products/css3-for-web-designers 68 | [Responsive Web Design]: http://www.abookapart.com/products/responsive-web-design 69 | [Mobile First]: http://www.abookapart.com/products/mobile-first 70 | [Atomic Design]: http://atomicdesign.bradfrost.com/table-of-contents/ 71 | [BEM by Example]: https://seesparkbox.com/foundry/bem_by_example 72 | 73 | [Frontend Project]: ../projects/proj-event-cards.md 74 | 75 | [CodePen]: https://codepen.io/ 76 | [FizzBuzz]: https://codingbat.com/doc/practice/fizzbuzz-code.html 77 | 78 | [Treehouse: Introduction to HTML and CSS]: https://teamtreehouse.com/library/introduction-to-html-and-css 79 | [Treehouse: HTML Basics]: https://teamtreehouse.com/library/html-basics-2 80 | [Treehouse: SVG Basics]: https://teamtreehouse.com/library/svg-basics 81 | [Treehouse: HTML Forms]: https://teamtreehouse.com/library/html-forms 82 | [Treehouse: Practice File Paths]: https://teamtreehouse.com/library/practice-file-paths 83 | [Treehouse: Practice Semantic HTML]: https://teamtreehouse.com/library/practice-semantic-html 84 | [Treehouse: CSS Basics]: https://teamtreehouse.com/library/css-basics 85 | [Treehouse: Practice Media Queries]: https://teamtreehouse.com/library/practice-media-queries 86 | [Treehouse: Practice CSS Selectors]: https://teamtreehouse.com/library/practice-css-selectors 87 | [Treehouse: Responsive Layouts]: https://teamtreehouse.com/library/responsive-layouts 88 | [Treehouse: CSS Grid]: https://teamtreehouse.com/library/css-grid-layout (and next week) 89 | [Treehouse: Practice Flexible CSS Grid Layout]: https://teamtreehouse.com/library/practice-flexible-css-grid-layout 90 | [Treehouse: Practice CSS Grid Columns, Rows, and Gaps]: https://teamtreehouse.com/library/practice-css-grid-columns-rows-and-gaps 91 | [Treehouse: Sass Basics]: https://teamtreehouse.com/library/sass-basics-2 92 | [Treehouse: CSS to Sass]: https://teamtreehouse.com/library/css-to-sass 93 | 94 | [Design is a Job]: http://www.abookapart.com/products/design-is-a-job 95 | [Javascript Koans]: https://github.com/mrdavidlaing/javascript-koans 96 | [CodeSchool: JavaScript Best Practices]: https://www.codeschool.com/courses/javascript-best-practices 97 | [Advanced JS Fundamentals by Mozilla Developer Network]: https://github.com/mdn/advanced-js-fundamentals-ck 98 | [HTTP: The Protocol Every Web Developer Must Know - Part 1]: https://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177 99 | [HTTP: The Protocol Every Web Developer Must Know - Part 2]: https://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155 100 | [A cartoon intro to DNS over HTTPS by Lin Clark]: https://hacks.mozilla.org/2018/05/a-cartoon-intro-to-dns-over-https/ 101 | -------------------------------------------------------------------------------- /phases/3-project.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Phase 3 - *MVC Frameworks, Databases, and Personal Projects* 4 | 5 | #### **Reading:** 6 | 7 | * [Exceptional Ruby][], Advi Grimm 8 | * [The Rails 3 Way][], Obie Fernandez 9 | 10 | #### **Training:** 11 | 12 | * Intro to Rails and MVC (Model View Controller) 13 | * [CodeSchool: Rails for Zombies 1 (Redux)][] 14 | * [CodeSchool: Rails for Zombies 2][] 15 | * [CodeSchool: Rails Testing for Zombies][] 16 | * [CodeSchool: Rails Patterns][] 17 | * Set up a rails application environment from scratch *(this will be done multiple times and potentially with a variety of requirements)*. 18 | * Intro to database models 19 | * Create a to-do app 20 | * Apprentice Project: Kick off 21 | * Apprentice Project: Work 22 | * Apprentice Project: Launch :rocket: 23 | 24 | #### **Additional Resources:** 25 | 26 | * [Agile Web Development With Rails][] 27 | * [Crafting Rails Applications][] 28 | * [Rails Recipes][] 29 | * [Rails Test Prescriptions][] 30 | * [Udacity Client-Server Communication][] 31 | 32 | [Exceptional Ruby]: http://exceptionalruby.com/ 33 | [The Rails 3 Way]: http://www.smile.amazon.com/Rails-Edition-Addison-Wesley-Professional-Series/dp/0321601661 34 | 35 | [CodeSchool: Rails for Zombies 1 (Redux)]: http://www.codeschool.com/courses/rails-for-zombies-redux 36 | [CodeSchool: Rails for Zombies 2]: http://www.codeschool.com/courses/rails-for-zombies-2 37 | [CodeSchool: Rails Testing for Zombies]: http://www.codeschool.com/courses/rails-testing-for-zombies 38 | [CodeSchool: Rails Patterns]: https://www.codeschool.com/courses/rails-4-patterns 39 | 40 | [Crafting Rails Applications]: http://pragprog.com/book/jvrails/crafting-rails-applications 41 | [Rails Recipes]: http://pragprog.com/book/fr_rr/rails-recipes 42 | [Rails Test Prescriptions]: http://pragprog.com/book/nrtest/rails-test-prescriptions 43 | [Agile Web Development With Rails]: http://pragprog.com/book/rails4/agile-web-development-with-rails-4 44 | [Udacity Client-Server Communication]: https://www.udacity.com/course/client-server-communication--ud897 45 | -------------------------------------------------------------------------------- /projects/proj-browser-testing.md: -------------------------------------------------------------------------------- 1 | ### Browser Testing 2 | 3 | At Sparkbox, we don't have [Quality Assurance](https://en.wikipedia.org/wiki/Quality_assurance#Software_development), so we usually do our own browser testing. 4 | 5 | #### Gold Level Support 6 | In these browsers, behavior & design are strong representations of design intent. A user is able to access all content and functionality as described. 7 | 8 | macOS 9 | - Safari 9+ (latest subversion) 10 | - Chrome (latest version) 11 | - Firefox (latest version) 12 | 13 | Windows 14 | - IE 11+ 15 | - Chrome (latest version) 16 | - Firefox (latest version) 17 | - Edge 16 18 | 19 | Mobile 20 | - Safari 9+ 21 | - Android 6+ 22 | - Samsung Browser (latest version) 23 | - Chrome (latest version) 24 | 25 | #### Silver Level Support 26 | In these browsers, behavior & design are acceptable, but may not be as originally intended. A user is still able to access all content and functionality as described. 27 | 28 | - IE 10 on Windows 29 | - Android 5+ 30 | - Safari 7+ 31 | 32 | #### Bronze Level Support 33 | In these browsers, behavior & design may not be great, but the content doesn't appear "broken" to the user, either. All content is accessible, and functionality is as described. Additional testing may be required during implementation. 34 | 35 | - IE 9 on Windows 36 | - Android 4.4+ 37 | - Safari 6+ 38 | -------------------------------------------------------------------------------- /projects/proj-event-cards.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Frontend Mini Project - Event Cards 4 | 5 | ## Week 1 - HTML 6 | 7 | Think of a really cool event: a concert, art show, festival, play, performance, meet-up, or anything else one may wish to attend. We want to get the word out about this awesome thing, so we are going to build some "digital flyers," or event cards. 8 | 9 | What sort of information would you want to know? How about: 10 | - Title of event or Band name 11 | - Picture of the band or location 12 | - Location of the event 13 | - When it is 14 | - Link to the website of the band, festival, or where you can buy tickets 15 | 16 | We want to build these cards with the following in mind: 17 | - A "Card" is a small piece of a website, not usually the whole page. We'll probably want to put multiple cards on the final page. 18 | - Put things in the order that makes the most sense for HTML. 19 | - Research semantic tags for each item; it is unlikely you'll be using `
` very often, but you may decide that it's the best choice some places. 20 | - Creating [accessible elements may require additional attributes](https://www.w3.org/WAI/standards-guidelines/wcag/). 21 | - Inline comments are helpful for reminding yourself why you made a decision you made. 22 | - Focus on semantically strong, accessible Markup. Styles will come later, and if you do them now, we'll probably completely ignore them anyway. 23 | 24 | Next week we will spend 5 minutes or so going over the HTML choices each of you have made. Try to do this individually (not as a group). Please do take advantage of office hours or pairing with developers! 25 | 26 | ## Week 2 - CSS 27 | 28 | This week, you've been given a single event card to style with _vanilla_ CSS. Using the HTML you've already written (and adapted where necessary), try to get as close to the design as possible by next Thursday! 29 | 30 | I really encourage you this week to make time to pair with Frontend Designers, as well as the rest of the frontend-focused team members mentioned before. Another awesome resource is [MDN](https://developer.mozilla.org/en-US/). 31 | 32 | Next week we will spend 5 minutes or so going over the CSS choices each of you have made. Try to do this individually and not as a group. 33 | 34 | ## Week 3 - Layout 35 | 36 | In addition to the individual card improvements we've asked you to do, your next task is to create a grid layout with your event cards. This layout should be [responsive](https://responsivedesign.is/), developed with a [mobile first](https://vimeo.com/38187066) frame of mind, and all content should be browser tested to the specifications in our [browser testing documentation](projects/proj-browser-testing.md). 37 | 38 | *Note*: This is a big ask. It's not fun. It won't be perfect. You don't have the full resources of a design team. Do the best you can, but don't burn out. If there is interest, we can do a 'bug bash' together, to learn about the device wall and [BrowserStack](https://www.browserstack.com/start). 39 | 40 | If you want bonus points, find an open source svg icon library you like for later use. 41 | 42 | *Note*: For this task, we can utilize Codepen's native features to link pens together. 43 | 44 | To include the HTML from another pen, add the pen url, surrounded by three brackets. 45 | ```html 46 | [[[https://]]] 47 | ``` 48 | 49 | You will also need to link to your pen as an external css resource by going to *Settings -> CSS - > Add External Stylesheets/Pens* and adding the URL of your card. 50 | 51 | ## Week 4 - BEM + IMG 52 | 53 | Your homework this week is comprised of a few smaller tasks. 54 | 55 | #### BEM 56 | From this point forward, you'll be expected to use BEM for any CSS and HTML you write. Fork your Grids and refactor all of your classes to use BEM. Then, pair with one of our BEM devs to review your *finished* BEM. 57 | 58 | #### SVG or `srcset` 59 | Spend some time playing with images or SVGs. Fork and update your event card to use either an SVG icon (Next to your address or phone number is nice, or whatever you like) OR update your images to use `srcset`. 60 | 61 | #### Personal Websites 62 | It's about the time in your apprenticeship when you should be looking to find a permanent web development role (if you are interested in that sort of thing). In your [career prep sessions](../phases/x-job-prep.md), you've hopefully developed skills to help you improve your marketability. Spend some time reworking or redoing your personal websites, cleaning up your git profiles, etc. We're here to help, so pair! Remember to take advantage of pairing time not only with developers, but also with our wonderful Project Management, Content, and Design teams. 63 | 64 | ## Week 5 - Sass 65 | 66 | Homework this week is short! Refactor your cards into Sass (SCSS). 67 | Pair with one of our Sass devs during the next week or so to go over it. (I recommend messaging them _today_). *Note*: CSS is fully functional and semantically correct SCSS! 68 | -------------------------------------------------------------------------------- /projects/proj-more-git.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Project: More Git 4 | 5 | 1. Make a .dotfiles repository and store relevant dotfiles that you'll make changes to inside of that repository (e.g. .bash_profile, .bashrc, .gitconfig, .gitignore). 6 | 2. Write a script which creates symlinks for any dotfiles that you've moved from your home directory. 7 | 4. Add customizations to your dotfiles as you see fit. 8 | 5. Push dotfiles directory to GitHub. 9 | 10 | Additional reading on [dotfiles](http://dotfiles.github.io). 11 | -------------------------------------------------------------------------------- /projects/proj-sb-howto.md: -------------------------------------------------------------------------------- 1 | [← Back to Index](../index.md) 2 | 3 | # Project: Sparkbox How-to 4 | 5 | 1. Read Sparkbox's "how_to" repo of best practices: 6 | 2. After reading, clone it to your personal account, and make an edit adding/changing content to reflect something you've heard/learned since being here that you don't see in the list 7 | 3. Submit a pull request for review --------------------------------------------------------------------------------