Lecture 28

Final Lecture!

<Hello!></Farewell...>

Agenda

  • Administrivia
  • Final Exam Overview
  • CP Showcase
  • Beyond CSE 154/Final Thoughts

Adminstrivia

  • Last day to submit HW5 is Saturday at 11PM
  • Final Exam Review Session: Monday 4:30-6:30PM (EEB 105)
  • Today is the last day of WPL, but remember to utilize Piazza for final exam questions!
  • Make sure to review the seating chart before Tuesday
  • Keys will be posted for the practice exams today
  • TA's are helping consolidate a final exam tips guide! We'll post it tonight on the exams page :)
  • We are hoping to get some course feedback to implement in Spring Quarter. What did you find most valuable? What would have been more helpful? Please fill out this anonymous survey!

Topics Included/Not Included on the Exam

Exam Info Page

General Exam Tips

  • Breathe. You're here to learn. You've successfully completed the homework assignments, section problems, and labs, and it's just a matter of applying what you've learned to different problems!
  • Practice early and consistently so you don't cram the day before!

    With that, it's perhaps most important to get at least 7 hours of sleep the night before to be able to have a sharp mind when the time comes to solve new problems with familiar topics.

  • Work on practice exams on paper, not your computer.
  • Review your Midterm and HW assignments!

Any Other Exam-Related Questions?

What is CSE 154?

Looking back:

  • What is one of the most useful things you think you'll take away from this course?
  • What was the most challenging part of the course?

CSE 154 Modules: What you've Learned

  1. Webpage structure and appearance with HTML5 and CSS.
  2. Client-side interactivity with JS DOM and events.
  3. Using web services (API's) as a client with JS.
  4. Writing JSON-based web services with PHP.
  5. Storing and retreiving information in a database with MySQL and server-side programs.

Also...

How to follow a code quality guide and discuss design decision trade-offs

How to publish your own website

How to use Git version control (very important for programming projects!)

How to learn a public API with various endpoints and response types

How to learn and debug different lanaguages

How to write and document public APIs with PHP

Basic motivation of accessibility, usability, and security on the web

You can add all of this to your resume! (conservatively)

CP Showcase!

Let's take a look at some of the work you've done this quarter...

Beyond CSE 154...

Q: What are some ideas to continue web programming/CS beyond this course?

A:

  • Related courses (CSE, Info, HCDE, etc.)
  • Publish/continue your creative project work and portfolio from this quarter! (remember you have free webspace as UW students!)
  • Hackathons
  • Internships/side work
  • TAing!
      CSE TA applications for Spring Quarter will open February-ish. But email Lauren/Melissa if you are interested in learning more!

Course Ideas After CSE 154

CSE 143 (Java II)

CSE 160/INFO 180 (Python/Data Science)

CSE 344/ CSE 414/ INFO 330(Majors/Non-majors Databases)

CSE 484 (Computer Security with module on web security)

INFO 200 (focus on web design/prototyping/UX)

INFO 201 (non-majors, R and data visualization)

INFO 340 (deeper into client-side development and frameworks like SASS, Bootstrap, jQuery, and React)

HCDE 210 (Explorations in HCDE; methods and applications of human-centered design)

Research in any of these (and related) departments!

Student Websites

Q: What are some ideas to use my creative project/portfolio work after finals?

In HW1, you published your work on your student website - consider updating it to have a landing page of your work/resume

You can add to your webspace anything written the languages we've learned this quarter, including projects in HTML/CSS, JS, PHP, SQL, etc.

Online Portfoli/Resume Tips

You all have enough experience in the different languages we've covered to add these to your resume

You all have enough experience to apply for web programming internships or project "contracts"

As a web developer, you now have a lot of tools in your toolset to support your resume

Things to Consider When Applying for a Web Development Role

What area do you feel more comfortable with? Do you see yourself working ~8 hours a day writing/debugging front-end code? Back-end code? Both?

Remember to list your skills such that you'd be confident talking about them to a potential employer during an interview

Skills to Continue Developing

Some particularly helpful skills/experience to have today include:

  • Using public APIs in creative/useful ways
  • Writing/documenting your own API
  • Proficiency in SQL
  • Client-side and server-side input validation (shows you're user-focused and can think ahead about edge cases)
  • Any web tools that demonstrate an interest in solving problems using what you know (e.g. a calculator for a specific domain of problems, a website that allows users to play/solve puzzles, a todo-list application for users where they can log with a username and password)
  • Various JS libraries/frameworks (Node.js, React, Backbone.js, Rx.js, etc.)

Adding to Your Portfolio - Project Ideas

You already have some cool work you can publish with your Creative Projects!

If you wrote a personal web page for one of your creative projects, you can iterate on that

If you enjoy the process of designing and customizing your own website, you can expand on what you've learned in this class and explore new HTML5, CSS3, and JavaScript features you could add to your website

If you're not as confident about web design, you can start with open-source HTML/CSS templates/components like Bootstrap (make sure to change it enough to make it your own style).

Side Project Ideas

Write a Chrome extension!

  • These are tricky to learn at first, but are well worth the time - once you learn them, you can find ideas to automate everything you do on the internet

Explore more public APIs and use one in a creative way (or use multiple together) similar to CP3.

Write a web page or application for a holiday gift for family/friends

More ideas in slides below...

Side Project Ideas (Continued)

If you like/are studying...

... Pokemon

  • Write your own Pokemon API (Pokemon stats, information between different games, move descriptions, etc.)
  • Write a webpage that lets a user take care of their own Pokemon, Tamagatchi-style (cookies and sessions would be helpful here!)

... Biology

  • Write a web application that teaches biology concepts through CSS/JS animations (example, example)
  • Write a web page with a text area input and processes DNA/RNA/Amino Acid sequences (and or converts between each)
  • Write an API that sends facts about animals/plants/other biology domains in JSON format

Side Project Ideas (Continued)

... Chemistry

  • Write an interactive periodic table web page (e.g. clicking a chemical symbol pops up a module with more information)
  • Write an application that balances chemical equations
  • Write an application that calculates molecular weights of different compounds

... Linguistics

  • Write a web page that translates English input into some other language/variation using your own code or a public API (example (YodaSpeak) API
  • If you've taken CSE 143 and/or have experience with writing grammars, write a webpage that randomly generates sentences in that grammar
  • Write a web app that replaces common grammar errors in a text area input (JS) or file (PHP)
  • Implement this and this and this.

Side Project Ideas (Continued)

... Data

  • Use a public API to process some cool data set and display it on your page using a data visualization library (e.g. d3.js)
  • Write your own API for clients who want to do the above

... Art

  • Build a portfolio of your artwork/photography/film, etc. (I'd recommend looking at other art portfolios online - there are some really amazing ones
  • For musicians, write a portfolio of any music you've written
  • Write a program that automates things for artists/musicians or provides helpful tools (e.g. music score analysis)

Side Project Ideas (Continued)

If you like/are studying...

... Teaching/TAing

  • Write a section website with weekly recaps
  • Visualize different topics using CSS/JS (e.g. for CSE 14X TA's, a little linked list or stack animation)

... Math

  • Write a calculator webpage for different domains in math (e.g. calculus, algebra, linear algebra)
  • Write a page that solves your math homework for you using JS

... Video Games

  • Try to find a public API for your favorite video game/console and use the data in a way that is helpful/interesting to you
  • Write your own online board/card/video game in JS and publish on your student space so your friends can play. For cards, this API may be helpful.

Side Project Ideas (Continued)

If you like/are studying...

... Sports

  • Write a website that keeps track of your favorite sport/sports team stats

... Cooking

  • Build an online recipe website, letting users create accounts and view/add their favorite recipes
  • Use a recipe/food-related API to filter foods that meet dietary restrictions
  • Write a program that calculates calories of different foods and serving sizes
  • Randomly generate recipe ideas given a collection of ingredients

Q: Where to Start Learn New Web Programming Technologies?

Being able to learn new libraries/frameworks quickly is key and comes with practice :) It will not be worth your time to learn them all.

Follow a couple of blogs/feeds and stay up to day with 1-2 articles a week, just so that you have a sense of where things are and what recent things have happened

HackerNews is a good source of programming-related news and tools... and I wrote a Chrome Extension for that :)

Example Web Programming Libraries/Frameworks to Explore

  • jQuery - One of the most commonly-used JavaScript libraries with helpful DOM/AJAX/UI functions (fairly easy to learn with 154 knowledge, and will make your life a lot easier)
  • TypeScript - Provides types in JS (much easier to handle common JS errors)
  • Node.js - A server-side version for JavaScript (you can use Node.js instead of PHP, with pros/cons for both)
  • Python Flask - Another server-side solution for web apps
  • d3.js - Data visualization library for JavaScript (moderately-easy to learn)
  • Rx.js - Reactive programming in JS (moderately-easy to learn)
  • React - A popular component-based JS library (moderate difficulty to learn, mostly due to setting it up on your computer)
  • Backbone.js with Marionette.js* - A JS MVC framework (lets you easily create single-page web apps)

Additional Resources for Writing a Personal Website

Adding a password to your website

Boostrap Components

"Essential Components of a Great Personal Website" - geared towards college students

10 Tips for the Perfect Portfolio Website - some good tips and resources

Cool interactive resume developed with JavaScript and CSS

Another interactive resume

AWWWards

  • Just a lot of cool "best-of-the-best" portfolios, websites, and web applications to get inspiration from

Portfolios In Conclusion...

You've all learned a ton of new languages and technologies

From here on, you'll be able to "speak the language of web development" among friends, co-workers, employers, professors, etc.

Chances are, you'll know material they don't

Don't be overwhelmed about the world of the web today - there's a lot, but patience, practice, and focusing on a particular domain will be most helpful to improve as a web developer

Final Slide...

Thank you for a fantastic quarter! We've really enjoyed working with you all.

Have a great Winter Break!

good luck pikachu