Full Stack Web Development Intensive, Summer 2016

Transcription

1 Required Textbook Purchase This Recent Edition City Tech: City University of New York Full Stack Web Development Intensive, Summer 2016 There are two main objectives to this course. The first is learning how to build websites / web applications and the assets that compose them. The second is to understand the concepts behind computers, networks and full stack development. Lecture Topics Computer Principles Bash HTML CSS JavaScript / jquery Wireframing Responsive Design PHP mysql Class Sessions Mondays and Wednesdays 6:00pm to 9:00pm Class begins on April 4th. Last day of class July 20th Computer Lab Saturdays 10am to 1pm Grading The best result is the knowledge and experience that you will gain during this course, you will also receive a grade based on the following rubric. Assignments 40% Midterm Project 25% Final Project 35%

2 Required Textbook Purchase This Recent Edition City Tech: City University of New York Learning PHP, MySQL, Javascript, CSS and HTML5: A Step-by-step Guide to Creating Dynamic Websites. ISBN: Software Sublime Text 3 Git (Mac) or GitBash (Win) MAMP (Mac) or XAMPP (Win) Google Chrome Firefox Mozilla Github or Bitbucket Account Trello Account A Gmail Account with Google Drive Draw.io connected to your Google Drive Date Topics Assignments 4/4 Introductions Learning Programming Computer Principles Hardware, Software, Network The Internet World Wide Web Introduction to Bash Bash Commands 4/6 Bash pt. 2 Managing File Permissions Creating a Website project folder Version Control and Git Creating a HTML page using VIM HTML Syntax and Boilerplating HW1: Project Setup Create a Project folder using BASH and name it yourlastname_root. The project folder should have the following contents: 1. A css folder 2. An images folder 3. A js folder 4. A portfolio subdirectory 5. An index.html with the boiler plate 6. A Coming soon message 7. Initiate GIT and Make one Commit

3 4/11 HW1 Due Date HTML pt. 2 Content HTML elements Structural HTML elements DOCTYPE HTML Attributes HTML Comments 4/13 HTML pt. 3 HTML Comments HTML Forms HTML Entities HTML5 tags HTML Workshop Using iframes 4/18 HW2 Due Date CSS CSS Setup CSS Syntax CSS Selectors CSS Background CSS Fonts CSS Comments 4/20 CSS Pseudo Classes CSS Color Color Generators CSS Shadow Generators CSS Animations Introduction to Typography Concepts Introduction to UI Concepts CSS Workshop Styling a <nav> Creating buttons HW2: HTML Layout the HTML for a 3 page website that should include the following: 1. A homepage 2. A bio page 3. A contact page 4. Extra Credit: A gallery page 5. Should include Absolute and Relative paths for images or hyperlinks and the user of various HTML elements. 6. Properly styled nav 7. You should have various GIT commits 8. Save this Assignment in /portfolio/project1 HW3: CSS Style the Personal Site. Clone the project1 project and name this clone project2 and save it in /portfolio/project2 Using the UI and Typography concepts learned in class, style your site. Your project should include the following: 1. The use of font style rules 2. The use of background style rules 3. The use of Pseudo classes 4. An External CSS 5. The use of at least 3 in-line CSS

4 Full Screen Backgrounds Custom Fonts 4/25 HW3 Due Date Introduction to Wireframing Prototyping using CSS Layouts CSS Layout Float and Clear CSS Positioning Centering Block Elements Centering Content 4/27 CSS Layout cont. Responsive Design Concepts Using Media Queries Wireframing and Prototyping Workshop Design a Web app to submit user text content that is responsive for Mobile and Desktop. 6. The use of at least one embedded CSS 7. You should have various GIT commits HW4:Wireframing and Prototyping Create a Wireframe for a website or web application that takes in text entered by the user. The application should have at least the following UI components: A text field A button A display area A graphic Sketch your idea on paper for mobile and for desktop and take a photograph and save it in /portfolio/project3 Using the CSS Layout Concepts learned in class, create a prototype of your wireframes using HTML and CSS, you can go as far as you can in terms of styling, but prioritize the layout styling. The project should include the following: One web page that is responsive. Proper CSS layout principles Media queries that handle mobile and desktop viewports One desktop view

5 One mobile view A photograph or image of your wireframes You should have various GIT commits Save it in /portfolio/project3 5/2 HW4 Due Date Javascript Setup Syntax Comments Data types and Variables Arrays Loops Conditions Functions 5/4 Javascript Cont. Events and Event Listeners Timers Date() Javascript Workshop Creating a Digital Clock Workshop Form validation Browser Detection Calculator HW5: Javascript Add Interactivity Clone the project3 project and name this clone project4 and save it in /portfolio/project4 Create a function that gets called when the user clicks on a button. This function should get the value of a text field. If the text field is empty, send a message to a display window with an error message, if the text field has a value entered, send the value entered into the display window. Add the script using external linkage. In addition Solve Javascript exercises from the Javascript Exercises sheet Due on 5/16 Save these exercises under /portfolio/jsexercises

6 5/9 HW5 Due Date Javascript Libraries and CDNs jquery Boilerplating Using the various UI methods Event Listeners jquery Sequences 5/11 jquery Cont. HW6: jquery Add UI/UX/IxD components to project2, and project4. Design the homepage to your site and include jquery UI/UX/IxD components. /portfolio/index.html In addition Solve Javascript exercises from the Javascript Exercises sheet Due on 5/16 Using the jquery UI library Drag and Drop Accordions Date Pickers jquery Workshop Lightswitch Animations 5/16 HW5 Javascript Exercises Due Date HW7: Cause Website HW6 Due Date Design a Website for a Cause you care about Bootstrap Grid System We need to create CSS Components wireframes and then use JS Components Bootstrap to prototype the pages. You may use Bootstrap templates for this assignment. You should have various GIT commits for this project. Save this project under /portfolio/project5

7 5/18 Bootstrap Cont. Using Bootstrap Templates Modifying Bootstrap Templates Adding jquery to Bootstrap site Workshop Cause Website 5/23 HW7 Due Date PHP Variables Arrays Loops Conditionals Functions PHP functions phpinfo() 5/25 PHP PHP Objects jquery and PHP Fetching incoming information via GET Fetching incoming information via POST HW8: PHP Clone the project2 project and name this clone project6 and save it in /portfolio/project6 Create a php file that captures incoming data from the contact form from this personal website and displays it on the screen. Clone the project4 project and name this clone project7 and save it in /portfolio/project7 Create a php file that captures incoming data from the text field and displays it on the screen.

8 5/30 HW8: Due Date PHP and mysql Introduction to Database Design Relational Tables SQL Language HW9: mysql Design a Database with three relational tables. User: userid username Password datecreated User_session: sessionid userid session datecreated User_meta: metaid userid fieldkey fieldvalue Create a user Registration and User Login Page using HTML/CSS or Bootstrap. 6/1 PHP and mysql Connecting to mysql Executing SQL from PHP json PHP and mysql Workshop Creating a User Registration, User Login system and user Profile System Using a UserManager.php Class When the user registers, the system should grab the data and store it in the database user table. It should create a session and log the session on the user_session table. The information provided in profile should be sent to user_meta table. Extra Credit: Create a database table contact for project6 and store the data captured Create a database table tweet for project7 and store the date captured.

9 6/6 HW9: Due Date Software Design Principles Design Document Landscape Audit Flowcharting Bringing it all together plus more Github for Collaboration Web App Come up with an idea for a web site or web application, the app should be small enough to complete in three weeks. This can be individual or team project. Perform a landscape audit, produce wireframes and flowcharts. Prepare a one sheeter design document and make sure to set up scope with instructor. 6/8 Web App One Sheeter, flowcharts, wireframes and scope (sprint) Due Date Agile Methodologies: SCRUM and Sprints Web App Work on feedback and iterate if necessary. Once you have a green light from instructor, start by creating a backlog with stories. Break down the stories into subtasks. Arrange subtasks into a sprint using Trello. Start developing your sprint items. Don t forget to initiate a Git repo.

10 6/13 SCRUM : Stand up Sprint Updates SEO Adding a Favorite Icon Web App Project Prepare the Sprint for the week. Keep Developing. 6/15 SCRUM : Stand up Sprint Updates Using Google Analytics Keep Developing. You should be finalizing this week. 6/20 SCRUM : Stand up Sprint Updates Connecting to APIs 6/22 Web App Due Date One-on-One meetings Keep Developing. You should be finalizing this week. FINAL PROJECT Come up with an idea for a web site or web application, the app should be small enough to complete in three weeks. Individual Projects only. Perform a landscape audit, produce wireframes and flowcharts. Prepare a one sheeter design document and make sure to set up scope with instructor. 6/27 SCRUM : Stand up Sprint Updates One-on-One meetings 6/29 SCRUM : Stand up Sprint Updates 7/4 No Class 7/6 SCRUM : Stand up Sprint Updates Work on feedback and iterate if necessary. Once you have a green light from instructor, start by creating a backlog with stories. Break down the stories into subtask using Trello.

11 Arrange subtasks into a sprint. Start developing your sprint items. Don t forget to initiate a Git repo. Keep Developing. 7/11 SCRUM : Stand up Sprint Updates User Testing and QA 7/13 SCRUM : Stand up Sprint Updates User Testing and QA Keep Developing. You should be finalizing this week USER TEST REPORTING Collect user test data and improve your app features 7/18 SCRUM : Stand up Sprint Updates User Testing and QA 7/20 Final project presentations Presentations Prepare a 30 to 45 second elevator pitch for your application. You should be able to explain what it does, what problem it is solving and who are the primary users. Then prepare for a 5 minute walk through presentation. Please allocate 3 to 5 minutes for Q and A. Please make sure to have all items ready for submission, including: One sheeter Landscape Audit Flowcharts Wireframes MVP / Prototype Source code All assignments should be submitted by Friday, July 22nd.