client-server

client-server.md

Course: Intro-to-Pro-Fullstack | intro-to-pro-fullstack

Unit: Fullstack | fullstack

Lesson 1: Fullstack | fullstack

===

Exercise 1: The Fullstack Path | fullstack-path

Most modern day web applications involve two main components, the client-side and the server-side of an application. The client side is the part that the user interfaces with through a web browser, while the server side is the part that assembles information to be viewed.

Fullstack web development is the of both the client side and server side of web applications.

Instructions:

1. In this series of courses, we'll learn the fundamentals of fullstack development.

Let's get started by -- doing X

user adds simple line of code (hello word), application automatically loads in browser

===

Exercise 2: Frontend | frontend

Front-end web

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly.

i. explain what frontend web development is ii. explain briefly what skills this encompasses

Instructions:

​

1. user animates (hello world text from previous) page, application automatically runs in browser

​

​

Exercise 3: Backend | backend

Backend web development ​ i. explain what backend web development is ii. explain to users what skills they will learn

Instructions:

1. user starts the server using rails s, application automatically loads in browser
2. this time it has an authentication system, sign in, and sign out feature.

=== ​

Exercise 4: courses | courses

​ i. explain what a course is ii. explain how courses will help them learn

Instructions:

1. user modifies some text
2. page reloads showcasing users changes

decision for content/product from here forward: how interactive and detailed should we make this part? do we want to include any sort of UI tour for courses, projects, advisors, quizzes, final projects etc?

​

Exercise 5: projects | projects

​

​i. explain what projects are ii. explain how projects will help them learn

Instructions:

1. user modifies some text
2. page reloads showcasing user's changes

=== ​

Exercise 6: advisors | advisors

​ i. explain what/who advisors are ii. explain how advisors will help them learn

Instructions:

​

1. user clicks on the advisor feature
2. codecademy LE autofills text, and this shows an advisor response on a project

===

Exercise 7: quizzes | quizzes

i. explain quizzes ii. explain how quizzes help users learn

Instructions:

​

1. user has a simple quiz question, ie. 'What is fullstack web development?'
2. user selects answer and recieves feedback

=== ​

Exercise 8: final-projects | final-projects

​

1. explain final projects
2. explain how final projects help users learn
3. full page web browser loads final projects, with clear visual

Instructions:

​

1. user clicks on a final project to see what users have built (i.e. a full rails app)

=== ​

Exercise 9: ready-to-learn | ready-to-learn

1. narrative text motivating users to start
2. visual showcasing fullstack path and all content types

Instructions:

​

1. user presses next to continue, and this takes them to the html/css course

===

Quick Summary of Topics Covered:

1. fullstack: welcome users, explain fullstack
2. frontend: explain frontend
3. backend: explain backend
4. courses: explain courses, showcase simple course experience
5. projects: explain project, showcase simple project experience
6. advisors: explain advisors, showcase simple advisor experience
7. quizzes: explain quizzes, showcase simple quiz experience
8. final-projects: explain final-projects, showcase final projects in browser
9. ready-to-learn: simple summary slide, with visual connecting all parts of the fullstack experience (think about the angularjs slide)

​ ​