Web Front-End Programming
Admin Course Overview
Why COMP6080?
Copyright By PowCoder代写 加微信 powcoder
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.
The progress in web
1. HTML Static Pages Beginning of websites
HTML released 1993
The progress in web
2. Basic CSS / Javascript Now things don’t like terrible
JS released 1995, CSS released 1996
The progress in web
3. A JAX and background requests
A whole new class of websites, without the need to refresh
A JAX appeared 2000~
The progress in web
4. NodeJS & Typescript
Type checking and common codebases – the beginning of heavy JS infrastructure
NodeJS released 2009, TS released 2012
The progress in web
5. Hybrid Apps, Electron
Type checking and common codebases – the beginning of heavy JS infrastructure
Electron, Apache Cordova
The progress in web
6. Declarative Frameworks
Building of complex applications rapidly and in a scalable way. A web approach finally optimised for apps, rather than pages.
AngularJS released 2010, ReactJS released 2013, VueJS released 2014
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.
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.
We have a team of staff from UNSW who support you through your teaching. We also have a helping hand with some pre-recorded lectures from Canva.
Edwina Adisusila
Assessment Structure
There is no direct assessment associated with Lectures or Tutorials
Assignments
Due Weighting
Due weeks 4, 7, 10 80%
Exam Period 20%
Start assignment 2 early.
Teaching Methods
Avg 2 hours of pre-recorded per week (tightly broken up) Avg 2 hours live lectures (Mon 6pm-8pm) (ideally no new content, all demos)
Tutorials:
There are 6 tutorial times a week, covering 3 streams of content (available on the schedule page)
All tutorials are online
You can attend none, any, or all tutorials
We will record tutorials and snip them up later Tutorials are also your self-learning exercises
Teaching Methods
Help Sessions:
Chance to talk to tutors and get help on matters to do with tutorial exercises and assignments
Help sessions will contain 1-5 tutors who will be split between assisting students with questions, and marking labs off
Please pay attention to how many tutors are in a given help session – we do our best to predict demand and adjust but please attend help sessions being prepared to wait
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:
1. EdStem (sidebar on Webcms3) 2. Help Sessions
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 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.
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.
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
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com