DOCSLIB.ORG

Javascript and CSS for Geographers Patrick Arlt, Allison Davis & Nate Bedortha Slides: This Talk Is All Fundamentals

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text

Load more

JavaScript and CSS for Geographers Patrick Arlt, Allison Davis & Nate Bedortha Slides: http://bit.ly/2PLJft4 This talk is all fundamentals. First, Some Notes Lots of supplemental info in these slides. Designed to help you keep learning beyond this talk. Pretty much everything is a link. Slides: http://bit.ly/2PLJft4 Web Development is Hard It's ok to feel overwhelmed Good news: you're more equipped than you think! Scripted with ArcPy? Scripted with Python? Congured an app? Used Arcade? A quick note on web servers HTML, CSS, and JS all go in your web server How to set up a local web server Install Node > Terminal/Command Line/Windows Bash/Powershell npx http-server . For fast prototyping use CodePen or StackBlitz HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello!</title> <!-- <link> (CSS) goes here --> </head> <body> <!-- Content (more html) goes here --> <h1>Welcome</h1> <div>Here's some unstyled content.</div> <!-- <script> (JavaScript) goes here --> </body> </html> Try it in CodePen MDN's HTML docs and guides CSS html, body, #map { margin: 0; width: 100%; height: 100%; } Where does CSS go? Inside a .css le that is loaded with a <link> tag. <link href="my-css-file.css" rel="stylesheet" /> Inside a <style> tag. <style> /* Put CSS here*/ </style> Inside an element’s style attribute. ⚠ <p style="color:blue;">Blue text!</p> What does CSS look like? html, body, #map { margin: 0; width: 100%; height: 100%; } The "C" is for Cascading Styles cascade into the nal styles for the HTML elements that match their selectors. Browser and user styles <link rel="stylesheet"> <style> tags Style attributes <div style="..."> CSS Specicity When properties collide specicity determines which property wins. 1. Rules with !important 2. Inline styles <div style="..."> 3. <style> and <link> tags 4. Selector specicity 1. #id-attribute - <div id="..."> 2. .class-attribute - <div class="..."> 3. div - <div> Let's inspect some CSS Right click on something you want to change click "Inspect Element" Explore a Storymap Let's Build an App! Block vs Inline Block-level elements Inline elements Learn CSS Layout: the "display" property Normal Flow Block and Inline Layout in Normal Flow Units Full unit reference The Lengths of CSS Unit and Values - QuirksMode Layout Land: Introduction to Viewport Units Flexbox Flexbox Froggy Learn CSS Layout: exbox A Complete Guide to Flexbox MDN: CSS Flexible Box Layout Positioning Learn CSS Layout: position MDN: position Grid Layout Grid Garden A Complete Guide to Grid Grid by Example MDN: CSS Grid Layout Incredibly Easy Layouts with CSS Grid Bonus Demo: CSS Grid Template Areas Media Queries and Responsive Design Responsive design gallery MDN: Media Queries Media Queries for Standard Devices Learn CSS Layout: media queries Typography and Color Google Fonts Google Web Fonts Typographic Project Flat UI Colors Font Pair Adobe Color Wheel TypeScale Color Lovers JavaScript Where does JavaScript go? Inside a <script> tag. <script> /* Put JS here*/ </script> Inside a .js le. <script src="app.js"></script> In your browser's DevTools console Right click > Inspect Element > Console tab ( ) ( ) Variables, arithmetic, comparison & logic const dogName = "Bunsen"; var year = 2020; let skyBlue = true; year++; // 2021 year--; // 2019 "high" + "five"; // 'highfive' // logical 'and' true && skyBlue; // true // 'or' true || false; // true // 'not' !skyBlue; // false MDN's First Steps JavaScript guide Try it in CodePen functions function dogYears(age) { return age * 7; } dogYears(3); > 21 age => { return age * 7; }; age => age * 7; // these are the same! Arrays[] and objects{} var dogs = ["Ginsburg", "Bunsen"]; dogs[0]; // 'Ginsburg' dogs.push("Spot"); dogs.length; // 3 dogs.map(dog => dog.toUpperCase()); // ['GINSBURG', 'BUNSEN', 'SPOT'] let dog = { name: "Ginsburg", age: 4, ageInDogYears: function(age) { return age * 7; } }; dog.name; // 'Ginsburg' Try it in CodePen JavaScript Patterns JavaScript is Asynchronous JavaScript is single threaded Runs one function in its entirety Then run the next function This is the "Event Loop" "Callback functions" dene thing that happen later Event Loop and Callbacks Demo Promises function processResponse(response) { return response.json(); } function doSomethingWithUser(user) { console.log(user); // prints a bunch of user info } function anyErrors(error) { console.error("what have you done!", error); } let user = fetch("https://randomuser.me/api/") .then(processResponse) .then(doSomethingWithUser) catch(anyErrors); Promises represent values that will be set in the future. i.e. I Promise to be a useful value in the future. Demo The DOM and HTML JavaScript can interact with your HTML. The HTML on your page is represented by the DOM (Document Object Model). Select HTML elements Listen for events & user interactions Change HTML elements Demo JavaScript Modules import { something } from 'some-file.js'; The future! You will encounter this more often. Demo AMD Modules (JS API) require([ "esri/Map", "esri/views/MapView", ], function (Map, MapView) { // Map and MapView have been loaded! }); require is a fancy way of adding <script> tags to load code on demand. Demo Lets nish our app ~120 lines of CSS, ~30 lines of JS. A more complex app Chaining Promises JS API Sample Tools & Frameworks Don't jump into tools The JS API is MORE then enough for simple mapping apps Add tools when you KNOW you will benet from using them Too many tools === Lots of complexity to manage Don't touch tools until you feel limited Types of tools Modules - Formats for splitting up and sharing code Compilers - Transform code often adding extra features Bundlers - Combine modules and other assets Frameworks - Architecture and structure for large apps/teams Examples of tools Modules - JS Modules, AMD, CommonJS, CSS Modules Compilers - Babel, TypeScript, SASS, LESS Bundlers - WebPack, Parcel, Rollup Frameworks - React, Angular, Vue, Ember, Dojo, Tailwind, Bootstrap Node JS and NPM Node JS - Run JavaScript on a server or desktop. Build web servers, APIs and CLI tools. NPM - Package manager and distribution system for JS code. Analogous to Pip or Conda in Python. Learn Node JS at NodeSchool Development tools Set up your local dev environment: Do I have a web server running? Prototype with CodePen, JSBin or StackBlitz Visual Studio Code Chrome Developer Tools Firefox Developer Tools ArcGIS JS CLI Keep learning ArcGIS Developer Tutorials MDN: Learn web development CSS Tricks Beginner Guide Eloquent JavaScript You Don't Know JS JavaScript 30 NodeSchool Command Line Power User Codecademy Bash Scripting course Slides at http://bit.ly/2PLJft4.
Recommended publications
  • Document Object Model

    Document Object Model

    Document Object Model DOM DOM is a programming interface that provides a way for the values and structure of an XML document to be accessed and manipulated. Tasks that can be performed with DOM . Navigate an XML document's structure, which is a tree stored in memory. Report the information found at the nodes of the XML tree. Add, delete, or modify elements in the XML document. DOM represents each node of the XML tree as an object with properties and behavior for processing the XML. The root of the tree is a Document object. Its children represent the entire XML document except the xml declaration. On the next page we consider a small XML document with comments, a processing instruction, a CDATA section, entity references, and a DOCTYPE declaration, in addition to its element tree. It is valid with respect to a DTD, named root.dtd. <!ELEMENT root (child*)> <!ELEMENT child (name)> <!ELEMENT name (#PCDATA)> <!ATTLIST child position NMTOKEN #REQUIRED> <!ENTITY last1 "Dover"> <!ENTITY last2 "Reckonwith"> Document Object Model Copyright 2005 by Ken Slonneger 1 Example: root.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE root SYSTEM "root.dtd"> <!-- root.xml --> <?DomParse usage="java DomParse root.xml"?> <root> <child position="first"> <name>Eileen &last1;</name> </child> <child position="second"> <name><![CDATA[<<<Amanda>>>]]> &last2;</name> </child> <!-- Could be more children later. --> </root> DOM imagines that this XML information has a document root with four children: 1. A DOCTYPE declaration. 2. A comment. 3. A processing instruction, whose target is DomParse. 4. The root element of the document. The second comment is a child of the root element.
  • Bibliography of Erik Wilde

    Bibliography of Erik Wilde

    dretbiblio dretbiblio Erik Wilde's Bibliography References [1] AFIPS Fall Joint Computer Conference, San Francisco, California, December 1968. [2] Seventeenth IEEE Conference on Computer Communication Networks, Washington, D.C., 1978. [3] ACM SIGACT-SIGMOD Symposium on Principles of Database Systems, Los Angeles, Cal- ifornia, March 1982. ACM Press. [4] First Conference on Computer-Supported Cooperative Work, 1986. [5] 1987 ACM Conference on Hypertext, Chapel Hill, North Carolina, November 1987. ACM Press. [6] 18th IEEE International Symposium on Fault-Tolerant Computing, Tokyo, Japan, 1988. IEEE Computer Society Press. [7] Conference on Computer-Supported Cooperative Work, Portland, Oregon, 1988. ACM Press. [8] Conference on Office Information Systems, Palo Alto, California, March 1988. [9] 1989 ACM Conference on Hypertext, Pittsburgh, Pennsylvania, November 1989. ACM Press. [10] UNIX | The Legend Evolves. Summer 1990 UKUUG Conference, Buntingford, UK, 1990. UKUUG. [11] Fourth ACM Symposium on User Interface Software and Technology, Hilton Head, South Carolina, November 1991. [12] GLOBECOM'91 Conference, Phoenix, Arizona, 1991. IEEE Computer Society Press. [13] IEEE INFOCOM '91 Conference on Computer Communications, Bal Harbour, Florida, 1991. IEEE Computer Society Press. [14] IEEE International Conference on Communications, Denver, Colorado, June 1991. [15] International Workshop on CSCW, Berlin, Germany, April 1991. [16] Third ACM Conference on Hypertext, San Antonio, Texas, December 1991. ACM Press. [17] 11th Symposium on Reliable Distributed Systems, Houston, Texas, 1992. IEEE Computer Society Press. [18] 3rd Joint European Networking Conference, Innsbruck, Austria, May 1992. [19] Fourth ACM Conference on Hypertext, Milano, Italy, November 1992. ACM Press. [20] GLOBECOM'92 Conference, Orlando, Florida, December 1992. IEEE Computer Society Press. http://github.com/dret/biblio (August 29, 2018) 1 dretbiblio [21] IEEE INFOCOM '92 Conference on Computer Communications, Florence, Italy, 1992.
  • Exploring and Extracting Nodes from Large XML Files

    Exploring and Extracting Nodes from Large XML Files

    Exploring and Extracting Nodes from Large XML Files Guy Lapalme January 2010 Abstract This article shows how to deal simply with large XML files that cannot be read as a whole in memory and for which the usual XML exploration and extraction mechanisms cannot work or are very inefficient in processing time. We define the notion of a skeleton document that is maintained as the file is read using a pull- parser. It is used for showing the structure of the document and for selecting parts of it. 1 Introduction XML has been developed to facilitate the annotation of information to be shared between computer systems. Because it is intended to be easily generated and parsed by computer systems on all platforms, its format is based on character streams rather than internal binary ones. Being character-based, it also has the nice property of being readable and editable by humans using standard text editors. XML is based on a uniform, simple and yet powerful model of data organization: the generalized tree. Such a tree is defined as either a single element or an element having other trees as its sub-elements called children. This is the same model as the one chosen for the Lisp programming language 50 years ago. This hierarchical model is very simple and allows a simple annotation of the data. The left part of Figure 1 shows a very small XML file illustrating the basic notation: an arbitrary name between < and > symbols is given to a node of a tree. This is called a start-tag.
  • Front 01: HTML Y

    Front 01: HTML Y

    HTML Y CSS FRONT PRIMERA PARTE Guía para directivos y técnicos V.1 Front HTML y CSS Este documento forma parte de las guías de onboarding de Autentia. Si te apasiona el desarrollo de software de calidad ayúdanos a difundirlas y anímate a unirte al equipo. Este es un documento vivo y puedes encontrar la última versión, así como el resto de partes que completan este documento, en nuestra web. https://www.autentia.com/libros/ Esta obra está licenciada bajo la licencia Creative Commons Attribution ShareAlike 4.0 International (CC BY-SA 4.0) FRONT - HTML Y CSS Hoy en día el negocio está en la que se publican y organizan los red. Es en el mercado on-line contenidos, además del grado donde se producen la mayor parte de usabilidad y accesibilidad de de los intercambios comerciales los mismos, influye directamente entre clientes y proveedores. en el posicionamiento que los El primer contacto de nuestros motores de búsqueda asignan a usuarios con nuestro negocio, y las aplicaciones. en muchos casos el único, es a través de una aplicación web o móvil. No disponer de un diseño atractivo, una experiencia de usuario agradable, accesible y que se adapte de manera adecuada para ser usada en diferentes dispositivos (Responsive), es garantía de una pérdida masiva de potenciales clientes. De la misma manera, la forma en la FRONT - HTML Y CSS “No hay una segunda oportunidad para una primera impresión” Alcanzar la habilidad de realizar diseños profesionales y usables no es algo baladí y se necesita un conocimiento profundo en marketing digital, experiencia de usuario y en tecnologías front-end.
  • Chapter 10 Document Object Model and Dynamic HTML

    Chapter 10 Document Object Model and Dynamic HTML

    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
  • Ch08-Dom.Pdf

    Ch08-Dom.Pdf

    Web Programming Step by Step Chapter 8 The Document Object Model (DOM) Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. 8.1: Global DOM Objects 8.1: Global DOM Objects 8.2: DOM Element Objects 8.3: The DOM Tree The six global DOM objects Every Javascript program can refer to the following global objects: name description document current HTML page and its content history list of pages the user has visited location URL of the current HTML page navigator info about the web browser you are using screen info about the screen area occupied by the browser window the browser window The window object the entire browser window; the top-level object in DOM hierarchy technically, all global code and variables become part of the window object properties: document , history , location , name methods: alert , confirm , prompt (popup boxes) setInterval , setTimeout clearInterval , clearTimeout (timers) open , close (popping up new browser windows) blur , focus , moveBy , moveTo , print , resizeBy , resizeTo , scrollBy , scrollTo The document object the current web page and the elements inside it properties: anchors , body , cookie , domain , forms , images , links , referrer , title , URL methods: getElementById getElementsByName getElementsByTagName close , open , write , writeln complete list The location object the URL of the current web page properties: host , hostname , href , pathname , port , protocol , search methods: assign , reload , replace complete list The navigator object information about the web browser application properties: appName , appVersion , browserLanguage , cookieEnabled , platform , userAgent complete list Some web programmers examine the navigator object to see what browser is being used, and write browser-specific scripts and hacks: if (navigator.appName === "Microsoft Internet Explorer") { ..
  • CSS Containers: Making Websites Accessible to Disabled Users

    CSS Containers: Making Websites Accessible to Disabled Users

    CSS containers: making websites accessible to disabled users John R Hudson 1 May 2020∗ 1 Personal background I first became interested in page design as a student journalist at university. When I first started using a micro-computer, I was interested in how much time it could save me; when I discovered vector graphics in the mid 1980s, I realised that I could save time and produce quality output by using a computer. In the 1990s I worked with a blind student and learned how I could use my computing skills to make life easier for him. After 30 years of using my understanding to create quality printed documents and more recently PDF files, in 2010 I was inspired by a talk from David Fisher to put these principles to work in maintaining and developing websites. 2 The wider context Cascading style sheets (CSS), proposed in 1994 by Håkon Wium Lie, who worked at CERN, were first adopted by Microsoft in Internet Explorer 3 and then by Netscape and Opera. These separate the presentation of material on a website from its content and structure as defined by HTML. At the turn of the century, they went out of favour for a number of reasons and development focused on XHTML. But, a few years later, Mozilla, Apple and Opera began working on a new specification for HTML which would meet the needs of modern devices and which would rely on CSS for presentation. This was published in 2011 as a rolling release and work began on a series of rolling updates to CSS to cope with the needs of the new version of HTML and the demands of modern devices.
  • XPATH in NETCONF and YANG Table of Contents

    XPATH in NETCONF and YANG Table of Contents

    XPATH IN NETCONF AND YANG Table of Contents 1. Introduction ............................................................................................................3 2. XPath 1.0 Introduction ...................................................................................3 3. The Use of XPath in NETCONF ...............................................................4 4. The Use of XPath in YANG .........................................................................5 5. XPath and ConfD ...............................................................................................8 6. Conclusion ...............................................................................................................9 7. Additional Resourcese ..................................................................................9 2 XPath in NETCONF and YANG 1. Introduction XPath is a powerful tool used by NETCONF and YANG. This application note will help you to understand and utilize this advanced feature of NETCONF and YANG. This application note gives a brief introduction to XPath, then describes how XPath is used in NETCONF and YANG, and finishes with a discussion of XPath in ConfD. The XPath 1.0 standard was defined by the W3C in 1999. It is a language which is used to address the parts of an XML document and was originally design to be used by XML Transformations. XPath gets its name from its use of path notation for navigating through the hierarchical structure of an XML document. Since XML serves as the encoding format for NETCONF and a data model defined in YANG is represented in XML, it was natural for NETCONF and XML to utilize XPath. 2. XPath 1.0 Introduction XML Path Language, or XPath 1.0, is a W3C recommendation first introduced in 1999. It is a language that is used to address and match parts of an XML document. XPath sees the XML document as a tree containing different kinds of nodes. The types of nodes can be root, element, text, attribute, namespace, processing instruction, and comment nodes.
  • Basic DOM Scripting Objectives

    Basic DOM Scripting Objectives

    Basic DOM scripting Objectives Applied Write code that uses the properties and methods of the DOM and DOM HTML nodes. Write an event handler that accesses the event object and cancels the default action. Write code that preloads images. Write code that uses timers. Objectives (continued) Knowledge Describe these properties and methods of the DOM Node type: nodeType, nodeName, nodeValue, parentNode, childNodes, firstChild, hasChildNodes. Describe these properties and methods of the DOM Document type: documentElement, getElementsByTagName, getElementsByName, getElementById. Describe these properties and methods of the DOM Element type: tagName, hasAttribute, getAttribute, setAttribute, removeAttribute. Describe the id and title properties of the DOM HTMLElement type. Describe the href property of the DOM HTMLAnchorElement type. Objectives (continued) Describe the src property of the DOM HTMLImageElement type. Describe the disabled property and the focus and blur methods of the DOM HTMLInputElement and HTMLButtonElement types. Describe these timer methods: setTimeout, setInterval, clearTimeout, clearInterval. The XHTML for a web page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Gallery</title> <link rel="stylesheet" type="text/css" href="image_gallery.css"/> </head> <body> <div id="content"> <h1 class="center">Fishing Image Gallery</h1> <p class="center">Click one of the links below to view
  • Responsive Design

    Responsive Design

    Girls Who Code At Home Activist Toolkit Part 5 Building: Make it Responsive Activity Overview Your website is looking great with the CSS you added in the last activity! For this part of the series, we will explore how to make sure your website looks great on different screen sizes like laptop, tablet, and mobile devices. This is called responsive design. Screen size on a laptop Screen size on a mobile device Materials ➔ Computer Note: If you did not complete Part 4, you can access Parts 1, 2, and 3 here. If ➔ Trinket or the text editor of your choice you have some experience with HTML, ➔ Code you wrote during Part 4 you can remix and use the Part 4 ➔ Final Project Example Code Example Code that stops at the end of Part 4. PART 1 PART 2 PART 3 PART 4 PART 5 PLANNING PLANNING BUILDING BUILDING BUILDING Research & Wireframe Intro to Intro to Make it Feedback & Mockup HTML CSS Responsive with CSS Identify and Layout the Build the Style the research a skeleton of framework of HTML Add styling cause. your website, your site elements on that adapts then add in using HTML. your site your site to your design using CSS. different elements. screen sizes. 2 Women in Tech Spotlight: Teagan Widmer When Teagan was in grad school, she noticed that safe2pee, a website helping LGBTQ community members find safe bathrooms, shut down unexpectedly. Although she majored in theater and had no experience with coding, she decided to attend a hackathon and eventually created REFUGE Restrooms, an open-source gender-neutral bathroom locator.
  • Node.Js: Building for Scalability with Server-Side Javascript

    Node.Js: Building for Scalability with Server-Side Javascript

    #141 CONTENTS INCLUDE: n What is Node? Node.js: Building for Scalability n Where does Node fit? n Installation n Quick Start with Server-Side JavaScript n Node Ecosystem n Node API Guide and more... By Todd Eichel Visit refcardz.com Consider a food vending WHAT IS NODE? truck on a city street or at a festival. A food truck In its simplest form, Node is a set of libraries for writing high- operating like a traditional performance, scalable network programs in JavaScript. Take a synchronous web server look at this application that will respond with the text “Hello would have a worker take world!” on every HTTP request: an order from the first customer in line, and then // require the HTTP module so we can create a server object the worker would go off to var http = require(‘http’); prepare the order while the customer waits at the window. Once Get More Refcardz! Refcardz! Get More // Create an HTTP server, passing a callback function to be the order is complete, the worker would return to the window, // executed on each request. The callback function will be give it to the customer, and take the next customer’s order. // passed two objects representing the incoming HTTP // request and our response. Contrast this with a food truck operating like an asynchronous var helloServer = http.createServer(function (req, res) { web server. The workers in this truck would take an order from // send back the response headers with an HTTP status the first customer in line, issue that customer an order number, // code of 200 and an HTTP header for the content type res.writeHead(200, {‘Content-Type’: ‘text/plain’}); and have the customer stand off to the side to wait while the order is prepared.
  • Introduction to Modern CSS

    Introduction to Modern CSS

    Introduction to modern CSS Emmanuel Aina @horlah_codes Frontend Dev, BuyCoins This talk is basically about the new technologies that have been introduced into CSS, with the aim for faster development process and accessibility Modern CSS is simply how we have chosen to write CSS as a standard, utilizing the technologies being introduced and making sure they’re being used as expected for the purpose at which they are being created Technologies being introduced ● CSS Flexbox ● CSS pre- and post-processors ● CSS Grid ● Feature Queries ● CSS Variables ● CSS Animation ● CSS Functions ● New Units - e.g. vw, vh, vmin, vmax ● CSS Methodologies Let’s pick them one after the other CSS Flexbox m avu... CSS Flexbox CSS Flexbox was proposed in 2009 but did not get implemented in browser spread adoption until 2015. Flexbox was designed to define how space is distributed across a single column or row, which makes it a better candidate for defining layout compared to using floats - Peter Jang, Dean of Instruction @Actualize Using Flexbox for the first the first time Structure of our html Basic CSS without Flexbox Expected output Basic CSS with Flexbox Output Default properties: flex-direction : row; flex-wrap: nowrap; justify-content : flex-start; Understanding Flexbox The container The items Understanding Flexbox .container { display: flex; } Understanding Flexbox .container { display: flex; justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } Understanding Flexbox .container { display: flex; flex-wrap: nowrap | wrap | wrap-reverse; } Understanding Flexbox .container { display: flex; align-items: stretch | flex-start | flex-end | center | baseline;. } Understanding Flexbox .container { display: flex; align-content : flex-start | flex-end | center | space-between | space-around | stretch; } Understanding Flexbox .items { align-self: auto | flex-start | flex-end | center | baseline | stretch; } Understanding Flexbox .items { flex-grow: <number>; } CSS Grid The s..