CrashCourse is a collection of talks and workshops designed to help you make the most of TartanHacks. Topics range from web programming and React to data science and machine learning with TensorFlow and even advertising your product!
The talks are all student-led and focused on hands-on activities. They’re designed to launch you right into the midst of development so you can make something awesome.
All Friday talks will be held in WEH 5201 (the Mac Cluster). All Saturday talks will be held in CYH 100A (Mac cluster).
|HTML & CSS Primer||Andy Gao||4:30 p.m.|
|Git||Connor Mowry||8:00 p.m.|
|Flutter||Akshath Jain||3:00 p.m.|
|Web Apps w/ Angular & TypeScript||Josh Durham||4:30 p.m.|
|Progressive Web Apps||Richard Guo||6:30 p.m.|
|React||Andy Gao||8:00 p.m.|
Many technologies make up the experience we call “The Web.” The following is an overview of the most common ones.
A web browser is a program—such as Google Chrome, Mozilla Firefox, Apple Safari, or Internet Explorer—that retrieves the source code of a website and renders it in a way that you can interact with.
A client is a program that request information from another computer. For example, your web browser acts as a client when it requests a web page from a server, and a mobile app acts as a client any time it needs to request content from online.
A server is a computer that responds to requests from a client. Servers are often responsible for storing information permanently: when you create an account on a website, that information is stored on the server.
A mobile app (or native mobile app) is installed ahead of time at the users request, unlike web apps which are downloaded on the fly. Native mobile apps tend to be granted more powers than you’d find in a typical web app, like being able to write to the file system and access system libraries. This means native apps excel where control over the user experience is paramount.
Most web development is split up into frontend and backend development, so let’s dive a little deeper into these areas.
HTML and CSS store information about a page. HTML contains the content, which could include text, images, videos, and any number of other things. Complementary to this, CSS stores information about how to display the content stored by the HTML. This includes layout, color, fonts, and other information about how our site looks. With just HTML and CSS we can create beautiful, informational web pages that display the same information for everyone who loads them.
The backend is all of the code that runs on the web server.
A backend is necessary if you want to store information long term, sign people in, or perform complex computations.
Backends can be written in any programming language, but some languages are easier to use than others. In addition, to the language, web developers often use a web framework, which is a collection of code that handles common server tasks and helps organize code.
Mobile development is quite a bit different from web development. While it’s true that mobile development shares the goal of displaying an interface that users can see and touch, they go about this in entirely different ways. Developing for mobile means you’re either program for iOS devices or Android devices, and that you’re locked into a specific ecosystem’s tooling and standards.
For many applications, these tradeoffs pay off. Mobile apps can be much faster, much more polished, and have much higher rates of engagement compared with comparable mobile web apps. For others, the ubiquity of the web draws people away from platform-specific apps. The decision is ultimately yours to make.
When creating a web application, it’s important to remember that in a good design can make or break your site’s success. Design is best described as all of the choices that go into making a website. Design is more than the way a website looks; a good design considers every aspect of a user’s experience. This includes how a user signs up, how information is laid out, and overall every action the user has to take inside your app. The goal of any good design is to be unobtrusive, intuitive, and pleasant.
We group the choices a designer makes about how a piece of software fits into a user’s life under the term User Experience, or UX. Another common term you will hear discussed in relation to UX is the UI, or User Interface. The user interface is what the user sees and actually interacts with. Wireframes, mockups and prototypes are examples of tools which facilitate the development of a good user experience.
Wireframes are like an outline to an essay. They’re non-functional, ugly, and generally use a visual style that will not end up in the app. They do help at visualizing a very rough an idea. Wireframing focuses on the broad ideas of an interface—the functionality and layout—rather than on the specific details.
Making mockups is like filling in your bulleted outline with the most important pieces of text. We say that they can be done with varying degrees of Fidelity. Low fidelity mockups serve roughly the same purpose as wireframes, while high fidelity mockups are pixel-perfect examples of what a developer should be implementing.
Prototypes are like rough drafts. With prototypes, users can actually interact with an interface, though it still may be rough and clunky. Prototypes are valuable because they can identify problems before developers take the time to implement a full design, which can save engineering resources.
After a website has been designed, and the frontend and backend implemented, it’s time for it to be deployed. Deployment is the process of taking the code a developer has written, and setting it up to run on a server where the whole world can interact with it. It is a very important step, but it can be complicated because software is often not developed in the same environment it is deployed in. Deploying and running a webapp is generally called operations, and it’s an important step in the life cycle of creating a web application.
Thank you for reading this guide, and we hope that you will join us for Crash Course on January 27th and 28th and February 3rd and 4th!
We’ve specifically designed the workshops so that they can be taken in any order, although we recommend taking the deployment workshop after you’ve completed at least one technical workshop (so you have something to deploy).
If you haven’t already, be sure to register! You certainly don’t have to register to attend, but we like knowing how many people to expect and what people will be interested in learning. We can’t wait, and we hope to see you there!
If you have any comments or questions about this guide, please write to info at scottylabs dot org.