COMP6080
Web Front-End Programming
Week 1
Outline
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.
Why COMP6080?
Web is exploding.
- 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)
How did we get to this point?
The progress in web
1. HTML Static Pages
HTML released 1993
Beginning of websites
2. Basic CSS / Javascript
JS released 1995, CSS released 1996
Now things don't like terrible
The progress in web
3. AJAX and background requests
AJAX appeared 2000~
A whole new class of websites, without the need to refresh
The progress in web
4. NodeJS & Typescript
NodeJS released 2009, TS released 2012
Type checking and common codebases - the beginning of heavy JS infrastructure
The progress in web
5. Hybrid Apps, Electron
Electron, Apache Cordova
Type checking and common codebases - the beginning of heavy JS infrastructure
The progress in web
6. Declarative Frameworks
AngularJS released 2010, ReactJS released 2013, VueJS released 2014
Building of complex applications rapidly and in a scalable way. A web approach finally optimised for apps, rather than pages.
The progress in web
In the vast majority of cases, your native desktop applications, native mobile applications, and web-apps or websites, can be built on a web-based, javascript based stack.
The progress in web
Course Overview
This is a new course, and we appreciate your understanding as we figure things out together.
- Assumed Knowledge
- Learning Outcomes
- Teaching approach
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
- Fundamentals of Javascript to design, construct, test, debug code
- Understanding HTML, CSS, DOM, to construct web pages
- Modern Javascript & CSS frameworks, to build componentised apps
- Understanding of asynchronous programming in the context of JS
- Basic knowledge of front-end security
- Awareness of UI/UX design, including accessibility
Approach to teaching front-end
A number of topics won't be included in the course. You can read more about those specific topics in our FAQ.
Teaching front-end comes with it's challenges, including:
- Rapidly developing tool sets
- The need to understand modern tools & fundamental knowledge
- The breadth of the tech stack on which web is built
The Team
We have a team of staff from UNSW, Canva, and Google assisting with the course.
The Team
UNSW Team
- Hayden Smith
- Anto Lepejian
- Clarence Feng
- Emily Luxa
- Kaiqi Liang
- Marina Reshetnikova
- Mariya Shmalko
- Melanie So
- Ravija Maheshwari
- Simon Haddad
- Soorria Saruva
- Lavanya Sood
- Jamie Domingo
- Yasmin Akhtar
Zain Afzal
The Team
The Team
Assessment Structure
There is no direct assessment associated with Lectures or Tutorials
| Item | Due | Weighting |
|---|---|---|
| Assignments | Due weeks 4, 7, 10 | 75% |
| Exam | Exam Period | 25% |
Start assignment 2 early.
Teaching Methods
Lectures:
- Avg 2 hours of pre-recorded per week (tightly broken up)
- Avg 2 hours live lectures (Mon & Wed 6pm-8pm) (often to reinforce)
Tutorials:
- Chance to further elaborate on content from lectures and discuss topics
- 1 hour per week with your tutor
Teaching Methods
Exercises / Help Sessions:
- Chance to talk to tutors and get help on matters to do with tutorials, exercises, and assignments
- Each week we provide you with a copy of exercises to complete. At the end of each week we will release solutions.
- Chance to practice skills discussed in lectures and tutes in breadth
- Help sessions will contain 1-3 tutors who will be split between assisting students with questions, and marking labs off
Assignments:
- A chance to practice skills in depth
- Ass1: Static HTML/CSS + Intro to DOM
- Ass2: Building an app with HTML/CSS/VanillaJS
- Ass3: Building and testing an app with ReactJS
Getting Help
If you need help with something, go here:
- EdStem (sidebar on Webcms3)
- Help Sessions
- 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 Webcms3.
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 the style guides page.
Feedback
Throughout term, you can leave anonymous feedback by clicking on the link in the Webcms3 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
Assignment 1
Let's take a look at assignment 1 together
Your own personal copy of this repository has been deployed to your gitlab space.
Feedback
COMP6080 21T3 - Live - 1.1 - Outline
By haydensmith
