livlog

The goals 💪🏻What is "a Backend"? ✌🏻How The Web Works (Again!) 👍🏻Introducing Backend Programming Languages All the code we wrote thus far influenced what is displayed by the browser and how the loaded website behaves in the browser For some websites need server-side capabilities as well! e.g. store data in a database, store uploaded files, load data, send back different HTML content based on data..

The goals 💪🏻What & Why? ✌🏻CSS Third Party Package Example(s) 👍🏻JavaScript Third Party Package Example(s) What are "Third-Party Packages"? We can write all the CSS / JS code on our own! But often, we have certain features, styles or tasks that are very common to a lot of projects Default Styling Image Carousel Parallax Effect "Third-Party Packages" provide "ready to use" code which you can add in..

The goals 💪🏻Practice and apply what we learned ✌🏻Handling form submission with Javascript & creating objects with the "new" keyword 👍🏻Managing data with JavaScript, HTML and the "data-" attributes Page / Project Features Configure player names Form with input field in modal overlay; also validate user input and show validation feedback (Re-)Start Game "Start Game" button should clear current gam..

The goals 💪🏻Conditional Code Execution ✌🏻Repeated Code Execution 👍🏻Examples! What Are Control Structures? Special JavaScript Syntax / Features that allow you to control... If-statement: under which conditions code is executed Loops: ...how often some code is executed Understanding Boolean Values ("Booleans") true vs false Comparison Operators & Logical Operators Loops Math.random() It returns nu..

The goals 💪🏻Working with "the DOM" & Events ✌🏻Control Structures 👍🏻Examples! Window & Document Built-in Variables & Functions Global "window" object - Holds information and functionality related to the active browser window / tab e.g. current location, utility functions like alert() The "document" object (window.document) - Holds information and functionality to the loaded website content e.g. u..

The goals 💪🏻What & Why? ✌🏻Core JavaScript Syntax 👍🏻Examples! What is JavaScript? A programming language that can be executed by browsers. The only programming language browsers can execute! HTML: Define structure and semantics CSS: Style the elements and page content JavaScript: Change the page dynamically (without loading a different HTML file), do "behind the scenes" calculations and work & mu..

The goals 💪🏻What & Why? ✌🏻Exploring Different HTML Form Elements 👍🏻Building an Example Form What are "Web Forms?" Many websites are not just about presenting (showing) content => Instead, user input is often requested as well e.g. Contact form, Checkout form, Login form, Comment form, etc.... There are special HTML elements for getting and handling user input Key form elements The "type" attribu..

The goals 💪🏻Project Example: Tips & Tricks to Create Beautiful Websites ✌🏻CSS Custom Properties, Transitions & SVG Basics 3 Things to Remember Add different features step-by-step Think about the core information that should be transferred Less is more - Don't overstyle your website CSS tips fonts We shouldn't choose too many fonts for one website and also not many size options. color Use similar..

The goals 💪🏻Responsive Design - What & Why? ✌🏻Working with Media Queries 👍🏻 Creating a Side Drawer Now we are quite used to how to design the website and for the design what we would need. So before starting we can start with structuring HTML. Why do we use article? The tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distrib..

The goals 💪🏻Working with (Background) Images ✌🏻Understanding Flexbox & Grid 👍🏻 Diving Deeper Into Units Basic sections of a document Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured: header: Usually a big s..