1 An Overview Course in Website Development
Spring Semester 2020
This is a course on web development for computer science students who are familiar with at least one programming language and have had a course on data structures and algorithms. It does not assume any familiarity with web technologies.
There are a huge number of topics that a web developer may encounter and use in the real world and many opinions on what a developer should know in any given year. See for example web developer roadmap 2019.
This course will strive to meet two goals: (1) focus on website development concepts and fundamentals and (2) keep up with current best practices related to those concepts and fundamentals. To accomplish this there are a number of items that will be out of our scope: (1) legacy browser support, (2) survey of backend technologies.
For example there are many approaches that have been developed for web page layout. We will only look at the current standardized techniques based on CSS Flexbox and CSS Grid since they are much better and easier to use than previous approaches that work with legacy browsers. Layout is difficult enough to get right!
The topics that we will cover include:
Cascading Style Sheets (CSS) fundamentals and media queries, flex-box and grid.
TCP/IP Networking basics, DNS, URLs, and HTTP
Web servers and server frameworks. To enhance understanding we will use a “micro-framework”. The representative server side framework we’ll use is based on Node.js + Express.js.
Modern web applications and GUIs. We’ll get hands on with the React front end framework and a bit of its ecosystem.
A representative subset of modern web development tools: Git/GitHub, Node.js, NPM, and a modern code editor.
2 Books and Such
What about a textbook? There is no required textbook instead you will have assigned readings from various web sites. These include:
Mozilla Developer Network will be our main source for learning materials and we will follow the following learning tracks:
Smashing Magazine: Another great resource for web developers.
W3Schools is another useful resource.
4 Development Tools and Such
Web Browsers: You need an up to date version of either Chrome or Firefox. I use both.
Version Control. Every programmer should be using version control for all but the smallest projects. We also need a way to privately share many files between student and teacher/grader. For this we will use GitHub classroom. We’ll learn enough about git to aid you in dealing with your assignments and personal projects on your local machine and with a remote repository. Use is required for most homework assignments.
Debugging and development tools: These come with Chrome and Firefox and they are amazing compared to anything we had in the past.
Code editors. There are a number of good free editors. I use several. Most provide some “linting”, “auto-completion”, and other things that ease a programmers burden. You can use any editor your like. I’d recommend looking at:
Notepad++. Windows only. It comes up very fast and has a small footprint.
We’ll use (and you’ll need) node.js for the following tasks:
Package management for 3rd party libraries and development tools via its companion program npm
For running our templates, Markdown processor, and static site generation code.
Running our backend web server and application.
In summary to do the assignments in this class you will need a computer running node.js (with npm), git, a free GitHub account, and a text editor. I will announce the recommended versions of these systems at the start of the course. We will be adding modules to the node.js environment as the course progresses. Note that your development environment is your responsibility!!!. I cannot configure your computer for you.
5 Tentative Schedule Spring 2020
|01/20||1||No Monday class, Git, GitHub, Markdown, Intro|
|01/27||2||HTML, CSS, Git, JS 1|
|02/03||3||JS 2, CSS 1, HTML 2 (images, entities)|
|02/10||4||JS 2 (Arrays), JS Objects, JS DOM, CSS box model, Cascade & Inheritance, CSS Positioning|
|02/17||5||JS DOM Events, CSS Layout/Float, CSS Flexbox, Node.js and NPM|
|02/24||6||CSS Grid, JSON, JS Modules, Templates, Async JS I|
|03/02||7||Static Sites, Midterm #1 (3/4, 3/5)|
|03/09||8||Static Sites/Metalsmith, Networking I (Eth, IP, TCP, DNS)|
|03/23||10||Web Servers, HTML Forms, Security, Authentication|
|04/06||12||HTTP Cookies, Sessions, Midterm #2|
|04/13||13||Document Database, React Intro, JSX|
|04/20||14||React Components 1, JS Functions, JS This,|
|04/27||15||JS classes, React class components, React interactivity|
|05/04||16||Fetch/Ajax, JSON APIs|
|05/11||17||Final Exam week|