Conteúdo Programatico
The HTTP Protocol
You can't start developing for the web without knowing the fundamentals. This module talks about the HTTP protocol used to request resources from the server. We'll explore the details of what is used for a browser and for a server to make sure the communication is legitimate.
- Http Verbs and their Meaning
- Request and Response Headers
- Interpreting Status Codes
- Cookies
- Redirection
- Caching Resources
HTML Fundamentals
The structure of a web page is created on HTML. We'll have a look at basic elements like input fields, divs,... to make sure the content is structured in the way we want.
- Anatomy of a page
- How a page is parsed
- Some important HTML elements
- Styling and Behavior
- LAB - HTML Fundamentals
Forms
Working with forms is one of the most important aspects in HTML development. It makes it possible for the user to send data to the server
- Form Elements
- How Forms Work
- Useful Attributes and Functions
- Validation
- LAB - HTML Forms
HTML Semantics
Modern HTML includes a variety of semantic tags that make it easier for things like screen readers and search engine to understand our webpages. In this module we take a look at those elements and their benefits.
- The need for meaningful elements
- Headers, content and footers
- Articles and sections
- Navigation elements
- Meaningful figures
- Dates and time
- LAB - HTML Semantics
CSS Fundamentals
A web page only looks nice when we start styling it. HTML is great to get all of our content on the page, but when we want to change the font, the colors, the location of everything we need some way to target these properties. CSS is the language we'll use to make sure the browser renders the page in the way we want to. We'll start with some basic selectors and learn how to use them efficiently.
- Styling websites using CSS
- CSS Selectors
- Understanding Inheritance & Cascading behavior
- Choosing the right unit
- LAB - CSS Fundamentals
Principles of Web Design
Web design isn't just about knowing CSS, it's about creating good looking, easy to use applications. In this chapter, we'll take a look at some of the fundamental principles designers use to turn a good design into a great one.
- Layout and Composition
- Color
- Graphics
- Typography
- User Experience
CSS Positioning
One of the hardest parts of CSS is making sure that every element is located at the correct position. This chapter will explain the layout flow and basic options.
- Understanding the Box Model
- Flow
- Display
- Position
- LAB - CSS Positioning
CSS Positioning Advanced
When familiar with css positioning basics, we can now look at some more advanced, flexible layout types. This chapter will explain some more advanced page layout strategies.
- Float
- Flex Box
- Grid
- Page layout strategies
- LAB - CSS Positioning Advanced
Responsive web design with Bootstrap
Your web site needs to look fabulous on any device; whether it's a laptop, tablet or phone. Let bootstrap be your guide in the messy world of media queries.
- Normalizing and Resetting
- The Grid System
- Utility classes
- Customizing look and feel
- Components: navigation, popovers ...
- LAB - Responsive web design with Bootstrap
JavaScript Introduction
JavaScript is THE programming language for the web, and it's becoming more and more important in other areas as well. In this module we'll take a first look at the language and how to make our lives easier by using it efficiently.
- Why is JavaScript Important?
- What is ECMAScript?
- Performance
- Picking the right Libraries
- Developer Tools
JavaScript Language Fundamentals
In this module, we'll talk about the very basics of JavaScript. JavaScript can be a very tricky language, so we'll try to explain a couple of its quirks as well. This way, we can avoid surprises later.
- Using Variables
- Primitives and Objects
- Functions: more powerful than you'd expect
- Understanding Scope
- Error Handling
- Best Practices
- LAB - Language Fundamentals
JavaScript Collections
Collections are a big part of OO programming, they allow you to map one-to-many or many-to-many relationships, as well as let you work with sets of data. In this module, we'll take a look at the different types of collections in JavaScript, and their uses.
- Storing multiple values in Arrays
- Useful Functions and Operators
- Using Objects as Maps
- Sets, Maps and Others
- LAB - Collections
Constructors and Classes
Objects are essential in JavaScript, and in this chapter we will look at objects in depth. We will learn how objects are created and how they work internally.
- Object Orientated Approach
- Constructors
- Prototypes
- Classes
- Object Properties
- Managing 'this'
- LAB - Constructors and Classes
Dealing with Async Code in JavaScript
Asynchronous code is really handy in JavaScript, since it allows us to keep the UI responsive while running a lot of code. In this module we'll see how to make our code run asynchronously.
- Threading in JavaScript
- Using Callbacks
- Event Handling
- Working with Promises
- Async and Await
- LAB - Dealing with Async Code
Structuring JavaScript Applications and Tooling
Hey new JavaScript developer! You are using WebPack right? WebPack? Yes, and Gulp and npm, you need those. Oow and definitely use Babel. It's soo good... If your face looks like a big question mark right now, that's quite normal. Setting up a JavaScript project can be quite the challenge. It's easy to get lost in the overwhelming amount of tools and best practices. In this module we'll create some clarity about these tools and teach you how to set up a modern JavaScript project.
- Using Libraries
- Content Delivery Networks
- Getting Libraries with npm
- Modules versus the Global Object
- Using Task Runners like Gulp
- Bundling and Minification Tools like WebPack
- PolyFills and Transpilers like Babel and TypeScript
- Tools for Code Quality
- LAB - Structuring an Application
Browser Interaction with Vue JS
JavaScript can be used in all sorts of projects, but when used in a browser it's best accompanied by a library for DOM interaction. These days you split up your UI into components and use techniques like data binding to build a clean and maintainable application. In this module we'll take a look at one of those libraries: Vue JS.
- Evolution in Web Development
- MVVM and Data Binding
- Components Basics
- Using Multiple Components
REST Services
This module is about communicating with the backend. REST allows client-server communication using HTTP.
- REST
- Verbs and URLs
- XML and JSON format
- Example with node.js and Express
- LAB - REST Services
Client-side Service Consumption with Vue.js
By using AJAX we can call server-side actions from our client-side code and process the results in a quick, user-friendly manner. In this chapter you will also get an introduction to a popular data binding framework: Vue.js. We will see how we can talk to a REST API from this framework.
- Getting data using AJAX
- Fetch API
- External Libraries
- Vue.js Essentials
- Loading Data in a Vue Application
- LAB - Consuming REST Services