전체 글 126

Section 16: Beyond The Frontend: Onwards To The Backend!

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..

Section 15: Third-Party Packages: Don't Do All The Work On Your Own

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..

Section 14: Milestone Project: Tic Tac Toe - Using Our JavaScript ( & HTML & CSS) Knowledge

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..

Section 13: JavaScript: Control Structures - Controlling Code Execution

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..

Section 12: JavaScript: Working with the DOM - Manipulating the running website

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..

Section 11: JavaScript: The Basics - Adding Interactivity To Websites

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..

Section 10: Web Forms - Allowing Users To Enter Data

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..

Section 09: Designing Beautiful Websites - Some Helpful Tricks

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..

Section 08: Understanding Responsive Design (One Website - Different Devices)

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..

Section 07: Understanding Layouts & Positioning

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..