Why COMP6080?

Web is exploding. Everyone wants web-based front-end developers.

• 28% of github code pushes are javascript
• In 2018, 1 in 4 job postings were for a javascript based framework (source: Hacker News Hiring Trends)

Within 10 weeks I want to make you all confident in building your own simple web apps, to build them quickly, and to build it to look how you want it to look and behave.

But first let's answer two questions:

1. What is a front-end developer?

2. Why is web exploding?

What is a front-end developer?

Someone who writes code that is executed client-side, typically part of a end-user facing product.

In most cases, they write code for web browsers. This is a course about helping you make web browsers do things.

They largely use HTML to structure pages, CSS to style them, and Javascript to make them dynamic.

They build things for people to use.

Assumed Knowledge

• Basics of GIT (checkout git-basics)
• Basics of HTTP & Web Browsers
• High level understanding of scripting languages

This course has no other assumed knowledge. Experienced web developers will likely find this course slow.

Learning Outcomes

Summarised

1. Fundamentals of Javascript to design, construct, test, debug code
2. Understanding HTML, CSS, DOM, to construct web pages
3. Modern Javascript & CSS frameworks, to build componentised apps
4. Understanding of asynchronous programming in the context of JS
5. Basic knowledge of front-end security
6. Awareness of UI/UX design, including accessibility

Approach to teaching

Firstly, this is a challenging level 6 course. It will be hard to perform in the HD bracket without hard work or natural intellect.

Secondly, learning front-end development will be a bit different from other languages you've learned:

• Front-end is a 'breadth' topic, which is unlike many other languages
• A lot less time is spent solving algorithmic or computational problems, and a lot more time is spent just trying to fine tune your visuals or find the right method/library/approach to get the expected behaviour
• You will still feel like you have a lot to learn by the end of the course

Course Site

Our course site is a custom content management system called Eckles. Eckles was written by Hayden in January 2022.

It is a ReactJS application with a lightweight NodeJS server. The source code is public for all all students, and we encourage you to contribute.

Why was this built?

1. COMP6080 is trying to pioneer a new style of learning in CSE, and all previous software was not considered appropriate for this style
2. We want to give you a real example to reference throughout the course and something we can all have fun with together.

Assessment Structure

There is no direct assessment associated with Lectures or Tutorials

Start assignment 2 early.

Getting Help

If you need help with something, go here:

1. EdStem (sidebar on Webcms3)
2. Help Sessions
3. cs6080@cse.unsw.edu.au

Getting Setup

Running your code:

• In this course you'll need to use: NodeJS, NPM, Web Browser, HTML, CSS, ReactJS, and more.
• All of these tools can be easily run on your local machine (recommended) for OSX, Linux, or Windows.
• If you aren't comfortable with local installs, you can complete the course using gitlab (we have installed all relevant programs there).

Gitlab

• gitlab is the online tool we're using to manage our git repositories.
• We will provide a demo of it's usage.
• There are git resources on Eckles.

Resources

• Web is a very well-resourced set of tools on the internet. Self-guided research will generally be adequate.
• The biggest issue will be finding the appropriate resources.
• Lectures may include resources on slides, and we also have a course-wide resources page here.

Style Guide

Information about style guides for particular languages can be found on various parts of our resources pages.

Feedback

Throughout term, you can leave anonymous feedback by clicking on the link in the Eckles sidebar "Feedback"

Getting Along

• Understand the expectations around student conduct.
• Create an inclusive learning environment.
• Let's all treat each other with respect and understanding.

A taste: "Making web browsers do things"

• Most things we do in this course are various combinations of:
  • HTML: Page structure
  • CSS: Page aesthetics
  • Javascript: Page dynamics
• Other topics we discuss are not about technology, but rather how to use it effectively:
  • Accessibility, product design, UI/UX, testing
• Let's do a short demo to explore what is coming up in the first weeks

Feedback