-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add project showcase page for BE and FE program progressions
- Loading branch information
Showing
10 changed files
with
209 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| .project-showcase { | ||
| padding: 32px 0px; | ||
| margin: auto; | ||
| max-width: 1400px; | ||
| } | ||
|
|
||
| .project-controls { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin-top: 1em; | ||
|
|
||
| h2 { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| .module-card { | ||
| background-color: white; | ||
| padding: 1.25rem 2rem 1.5rem; | ||
| margin-bottom: 2rem; | ||
| display: inline-block; | ||
| box-shadow: 0 0 2px 1px rgba(0,0,0,0.2); | ||
| display: flex; | ||
| flex-direction: column; | ||
| p { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
|
|
||
| .fe-project-card { | ||
| border-top: .5rem solid #f9ae06; | ||
| } | ||
|
|
||
| .be-project-card { | ||
| border-top: .5rem solid #ef3852; | ||
| } | ||
|
|
||
| .project { | ||
| display: flex; | ||
| flex-direction: row; | ||
| p { | ||
| width: 57.5%; | ||
| margin-right: 1em; | ||
| } | ||
| iframe { | ||
| height: 280px; | ||
| } | ||
| } | ||
|
|
||
| #show-be-projects-btn { | ||
|
|
||
| } | ||
|
|
||
| #show-be-projects-btn, | ||
| #show-fe-projects-btn { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .be-project-section { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,3 +18,4 @@ | |
| @import 'navigation'; | ||
| @import 'curriculum-nav'; | ||
| @import 'lesson'; | ||
| @import 'project-showcase'; | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| --- | ||
| layout: lesson | ||
| --- | ||
|
|
||
| <div class="project-showcase"> | ||
| <h1>What Students Learn and Build at Turing</h1> | ||
| <section> | ||
| <p>This is a resource for prospective students to build an understanding of the differences between Front-End and Back-End Engineering, get information needed to make an informed decision about which program is the best fit for you and explore the Turing curriculum and get a little more insight into the life of a Turing student. | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section class="fe-project-section project-section"> | ||
| <div class="project-controls"> | ||
| <h2>Front-End Progression</h2> | ||
| <button id="show-be-projects-btn" class="btn-dark">Show Back-End Progression</button> | ||
| </div> | ||
| <div> | ||
| <p>Front-End Engineering focuses on building the part of applications that users see and interact with. Our curriculum covers object-oriented programming, modern frameworks, cross-browser compatibility, and touches | ||
| on basic UX and design principles. The program is approximately 7 months long, broken up into four 6-week modules.</p> | ||
|
|
||
| <section class="module-card fe-project-card"> | ||
| <h3>Module 1</h3> | ||
| <p>Module 1 focuses on building a foundation for Front-End Engineering and some of the tools and processes necessary for | ||
| development. The bulk of students' time will be spent learning and implementing JavaScript fundamentals, including object-oriented programming. Students will also recreate design comps with HTML and CSS.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> By the end of the module, students are able to build an application like this Tic-Tac-Toe game that can be played by a user in a web browser. A seemingly simple game, a good amount of logic and software design are both required.</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/QE17zFLT8K4" frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="module-card fe-project-card"> | ||
| <h3>Module 2</h3> | ||
| <p>Module 2 focuses on JavaScript, popular patterns for writing and organizing front-end code, and | ||
| learning new tools and workflows to help improve the development process for more complex web applications.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> By the end of the module, students are able to build an application like this hotel management tool for hotel customers and staff to manage room bookings and calculate customer | ||
| bills. In building this project, students apply concepts around designing and organizing code, and making network | ||
| requests to send and receive data.</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/szR8lKarBpI" frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="module-card fe-project-card"> | ||
| <h3>Module 3</h3> | ||
| <p>Module 3 focuses on front-end frameworks and libraries for building complex, scalable, fully-tested applications, as | ||
| learning new tools and workflows to help improve the development process for more complex web applications.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> In Module 3, students are able to choose the topic and content of the project as long as they implement certain technologies. This sample project uses React and Redux, a network request to the Wordnik API, and was fully tested. While the features in this project may appear to be less robust than the Module 2 project, it uses more sophisticated technologies. This project was built by one student in about 5 days.</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/h2kL1GpOW6c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
| </section> | ||
|
|
||
| <section class="be-project-section project-section"> | ||
| <div class="project-controls"> | ||
| <h2>Back-End Progression</h2> | ||
| <button id="show-fe-projects-btn" class="btn-dark">Show Front-End Progression</button> | ||
| </div> | ||
| <div> | ||
| <p>Back-End Engineering focuses on most of the work that happens behind-the-scenes to make an application function. Our curriculum | ||
| covers object-oriented programming, data structures, and building database-backed web applications. The program is approximately 7 months long, broken up into four 6-week modules.</p> | ||
|
|
||
| <section class="module-card be-project-card"> | ||
| <h3>Module 1</h3> | ||
| <p>Module 1 focuses on using the Ruby language and object-oriented programming (OOP) to build software. Students develop skills | ||
| to write automated tests, pseudocode, write implementation code and refactor code to meet Ruby conventions.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> By the end of Module 1, Back-End students are able to build a program like this command line Battleship game. Behind the | ||
| interface is a lot of work with logic, decisions about how to structure data and error checking. Projects of this nature | ||
| build a strong foundation with object-oriented programming (OOP) and software design principles.</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/uOY7z_r3JF0" frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="module-card be-project-card"> | ||
| <h3>Module 2</h3> | ||
| <p>Module 2 is when Back-End students expand upon fundamental Ruby skills by building database-backed web applications in Rails. They also explore best practices in agile project management and collaboration.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> </p> | ||
| <iframe width="560" height="315" src="" frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="module-card be-project-card"> | ||
| <h3>Module 3</h3> | ||
| <p>Module 3 pushes students look beyond the basics of building Rails web applications with the intent of taking a business need | ||
| and turning it into working software. Students integrate third party APIs, | ||
| produce APIs, build Rails applications that consume and process data, and improve the | ||
| performance of their app through caching, background workers and some front-end JavaScript.</p> | ||
| <div class="project"> | ||
| <p><strong>Student Project:</strong> In Module 3, students are able to choose the topic and content of the project as long as they implement certain | ||
| technologies. This sample project was built by a team of 4 students over several weeks. It is built with the Rails framework and gets data from ProPublica and a News API. It also integrates with Twitter.</p> | ||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/8KRmOYamz3c" frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| </div> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| </section> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters