1 An Overview Course in Web Development
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. The university where course is being taught is currently on the quarter system (10 weeks), but will be transitioning to semesters (16 weeks) next year. The general topics to be covered are:
- HTML5 and its Document Object Model (DOM)
- Cascading Style Sheets (CSS) level 2 and select level 3 modules. We’ll include media queries and flex-box.
- HTTP(S), Websockets, Cookies, JSON Web Tokens
- Web server 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 learn about model-view-controller and related client side frameworks. We’ll get hands on with with the React framework and its ecosystem (react-router, redux, etc..)
- A representative subset of modern web development tools: Git, Node.js, npm, Webpack, ESLint, and Babel (transpiler).
2 Books and Such
In another version of this class the book Murach’s Java Servlets and JSP, 3rd Edition was used. This edition was also written in 2014 emphasizes Java, Tomcat, Java Server Pages, JDBC, Java Servlets, and MySQL. Although Java is a fine language used in a number of contexts all the other technologies listed here are specific to Java and represent mostly a single company’s approach to web development.
We will not be taking either approaches in this class since I feel the first approach would get us lost in too many languages rather than the essentials of programming for the web. Plus the fact that each additional language/runtime environment represents an installation and configuration challenge for the student. The second approach is too specific to Java and a particular web development ecosystem.
3 Development Tools and Such
Web Browsers: You need an up to date version of either Chrome or Firefox. I use both.
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:
Version Control. Everyone needs version control! We’ll learn enough about git to aid you in dealing with your personal projects on your local machine and to form a foundation for when you participate in multi-developer projects. Use is required.
- We’ll use (and you’ll need) node.js for the following tasks:
In summary to do the assignments in this class you will need a computer running node.js (with npm), git and a text editor. I will anounce 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.
4 Tentative Schedule
|4/17||4||CSS Floats, Networking, HTTP, Git, Node.js, Quiz #1|
|4/24||5||CSS Positioning, Web Servers, HTML Forms,|
|5/01||6||More Server, Templates, Markdown, JSON, Document Database|
|5/15||8||Frameworks, React, Promises, Fetch/AJAX, Quiz #2|
|5/22||9||More React, Component Libraries, SVG,|
|5/29||10||CSS Grid, CSS Flexbox, Animations|