Learn Modern Web Development: HTML, CSS, asynchronous JavaScript and PWA
Internettet udvikler sig hele tiden i høj hastighed. Lær hvordan du opbygger moderne, hurtige, fleksible mobile og desktop webapplikationer baseret på de nyeste teknologier. Kurset opdateres løbende, for at have de seneste udviklinger med.Undervisningen foregår på engelsk.
Web Specialist, Google Developer
Besides covering the basics of HTML, CSS and JavaScript, we’ll also deep dive into each of those technologies. You’ll learn to create sites that dynamically adjust to screen sizes with use of CSS Flexbox, CSS Grid, relative font sizes and responsive images. How to have a normal website and also let it appear as a traditional application or native mobile application?
Want to write apps that are powered by Web technologies and delivered with Web infrastructure? Welcome to Progressive Web Apps. PWAs are secure and installable, can run offline and can display system notifications even when the app is not running. Accessibility and Video will be covered extensively. Finally you’ll learn how to measure and optimise performance, as well as debugging and testing. Basically this course will teach the most popular and successful web technologies in use today. Course will be updated regularly to keep up with the latests developments.
Prerequisites
Familiarity with any contemporary programming language.
Participant profile
This training is aimed at any developer with 6 month experience that want to write web and mobile web applications with HTML, JavaScript and CSS. 75% of this course is focused on technologies introduced after Microsoft’s 70-480 exam.
Content
- We’ll cover basic syntax as well as useful new additions to the language. Most notable: Variable declarations with let, var and const; Class syntax; Modules; Template strings; Arrow functions; Default parameters in functions; for..of loops; Promises and async/await asynchronous function handling; Destructuring; Rest and Spread operators for quick array and object manipulations; Maps (key-value pairs) and Sets (unique values).
- CSS Flexbox (1 dimension layout) and CSS Grid (2 dimension layout) will be covered. The Grid allows for layouts that were previously impossible or could only be achieved with JavaScript. Grid also surpasses Bootstrap in possibilities, flexibility and has a simpler markup. Flexible layouts depending on the screen capabilities are covered.
- Basics like the Document Object Model (DOM) and manipulation thereof as well as the working of the event-system are covered. We’ll dive deeper into handling both touch and mouse event to work with all types of devices, not only desktops. HTML Forms input types and validation methods are covered.
- Explaining CSS precedence. Both well known and the latests selectors, pseudo classes and pseudo elements are discussed as well as style attributes. Techniques to adjust to the screen size are responsive images as well as Web Fonts and flexible font sizes.
- Progressive Web Apps (PWA) is a set of technologies you can use to enhance a website with application behaviour:
- Installable: The website can be added to the home screen of the device.
- Web App Manifest: Defining the icon, home screen title, splash screen, background color and home page.
- Fetch: Simple and powerful API to fetch resources (successor of XMLHttpRequest).
- Offline and online behaviour: No matter if there is a network connection, the app will work using Service Workers to control requests and toring
responses to requests offline using the Cache API, Web Storage or IndexedDB.
- Notifications. Send updates from the server to the app with the Push API and use the Notification API to generate system notifications even if the app is not running.
- Safe: Only https (or localhost for development).
- Progressive: Use the above technologies if they are available, but the page (app) will work if the device’s browser is less capable.
PWA can even be published to the Microsoft Store and become Windows Apps.
- Data storage within the browser are covered with 3 techniques:
- Storage API, Local & Session storage when you don’t want to store too much data.
- IndexedDB API (version 2), is an object database with more capacity.
- Cache API for use with Progressive Web Apps.
- Answers: How to add video & audio elements? How to create subtitles and picture-in-picture video?
- Explaining techniques to keep your designs accessible for the visual impaired.
- Subjects:
- Compression and minification of images, scripts, css, etc.
- To inline or not to inline?
- Async loading of scripts.
- How to measure performance?
- Browsers offer support to test on devices with different capabilities like screen sizes and connection speeds. We’ll also cover writing JavaScript unit tests.
- Explaining how to use the developer tools in the browser:
- Setting breakpoints in code or when events happen
- Using the console
- Dynamically making changes for immediate feedback
- Debugging CSS specificity and computed styles.
Certification
This course can be used as part of your preparation for Google exam: Mobile Web SpecialistInstructor
Downloads
Har du faglige spørgsmål, så kontakt:
- Jette Ravn Merkel
- Seniorkonsulent
- +45 72202695