Weekly plan
A plan for what main activities happens each week. The teacher updates this as the course goes on. Treat it as a roadmap for the course materials and use it as a basic plan on what to do each week.
Prepare
This is how you can prepare yourself for the course.
- Read up on the course details and the other documents in that section.
- Ensure you know what literature is suggested (it's free literature).
- Check out the lab environment and install what is needed.
Week 01 (w46): Get going
Get going with the course and the lab environment.
Lectures
- Course introduction, walkthrough of the course setup.
- Web technologies, about the basics of the World Wide Web with the browser, the server, the protocol and the document.
Exercise
- Ensure that you have the lab environment available.
- Setup the exercise repo.
- Install the development tools and linters.
- Work through the first hello world exercise.
Work
- Ensure that you have worked through all exercises to get going and learn some basics.
- The first assignment A1 is released at the end of the week.
- Prepare to start working with A1.
Week 02 (w47): Website with HTML & CSS
Build a website using HTML & CSS.
Lectures
Exercise
Work
- Work with A1.
Week 03 (w48): Get going with JavaScript
Get going with JavaScript by studying and reading. Then start coding small programs in the web browser.
Lectures
- JavaScript - Introduction as a background and overview of how it become to be.
- JavaScript - Programming with basic language constructs to get you going.
Exercise
- JavaScript Hello World is an exercise that let you practice the basics of using JavaScript in the web browser.
- JavaScript Roll Dice is an exercise/example where you can challenge youreself to write your own web page where you can roll a set of dice. There is a solution which you can review.
Read
- The free online "JavaScript for impatient programmers (ES2022 edition) provides an excellent guide to get going with all parts of the JavaScript language, especially when you already know a few programming languages. Glance through the table of content of the book and briefly review a few chapters of your own choice. The book can be used as a dictionary.
Work
- Submit A1.
- Start reading about and prepare for assignment A2.
Week 04 (w49): Programming JavaScript
This week you should practise what you read about JavaScript last week. It is time to start coding in the browser and use some Web APIs.
Lectures
- Document Object Model (DOM) to dig into the DOM and DOM events.
- Live coding dice game of 21 to see how the parts fits together into an application.
Exercise
- JavaScript builder this is how you should work with the A2, using a builder.
- Postman shows how to inspect and learn more on the quiz server in A2.
- Fetch API on how to write JavaScript in the browser and talk to a REST API server.
Work
- Work with A2.
Week 05 (w50): JavaScript and the environment
Lets look into detail on the JavaScript programming model with eventdriven programming where the event loop has a central part of executing messages in the queue of event.
We also check out how one of the Web APIs work, namely the Web Storage API.
Lectures
- JavaScript - The Event Loop
- JavaScript - The Event Model, about Events
- Web components and Custom elements
Exercise
Exercise: Web Storage API to learn how to save data locally in the browser, for example a highschore list.
OPTIONAL BartBoard Demonstration showing off custom elements and custom events.
Work
- Work with A2.
- Prepare to work with A3.
Week 06 (w51): Single page application
About the architecture around building SPA applications and what support you get from some of the Web APIs.
Lectures
Exercise
- Exercise: HTML Drag and Drop API to learn and practice drag & drop of HTML elements.
- Exercise: WebSocket API to learn and practice websockets.
Work
- Submit A2.
- Re-submit A1 - if you are not done.
- Start working with assignment A3.
Week 07 (w52): Work with assignments
Work
- Work with A3.
Week 08 (w01): Work with assignments
Work
- Work with A3.
Week 09 (w02): Work with assignments
Work
- Work with A3.
Week 10 (w03): Submission week
Work
- Submit A3.
- Re-submit A2 and A1 - if needed.
