Learn Dart, Flexbox and Reactfire

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve. 

In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework. 

This course is beginner-friendly, but is well-suited for experience programmers as well. 

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

dart

Get Started with Dart

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Flexbox Fundamentals

Demystifying alignment in flexbox children

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Defining dimensions on flexbox children using flex-basis

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

Using flex-shrink and flex-grow to make flexbox children resize correctly

Using the `order` property we alter the order in which flexbox children appear on the page, without making changes to the dom.

Using order to rearrange flexbox children

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

Combining the flexbox sizing properties using the flex shorthand

The Flexbox css spec allows for more adjustable layouts. The `flex-direction` property allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries.

Using flex-direction to layout content horizontally and vertically

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

Turning a flexbox into a grid using flex-wrap and align-content

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

React Native utilizes flexbox for layout, and you can apply styles inline, or via external stylesheets. We will learn about both approaches, and create some basic styles for a native application.

For getting your application setup, you might want to checkout [this lesson](https://egghead.io/lessons/react-react-native-up-and-running?course=react-native-fundamentals&from=react-applying-styles-in-react-native)

Applying Basic Styles in React Native

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

React and Firebase with ReactFire

In this lesson, you will write a basic HTTP server in the Dart programming language. We will be using the HttpServer class from Dart's inbuilt 'dart:io' library to achieve this.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org


Write a Basic HTTP Server in Dart

In this lesson, you will setup your first command-line Dart application. We will install the SDK and write our first program. This will form the basis for future lessons where we further explore the Dart ecosystem.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org



Setup your first Dart project

In this lesson, we will look at how to create variables and constants. These are containers that store data for later reference and/or retrieval.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org

Understand Variables and Constants in Dart

In this lesson, we will cover Dart's inbuilt data types. Everything in Dart is an object, and therefore there are no primitive data types. In other words, all types extend a base type named Object. Any identifier without a value is set to null by default. There is no "undefined" value.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org

Understand Built-in types in Dart

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

We will setup our first command-line Dart application. We will use the apt-get package manager on Ubuntu to install the SDK and write our first program. This will prepare you to follow along in the next lessons.

Get the gist of commands → https://gist.github.com/creativebracket/b44ee73739f249be0d5f4b8676e8eca5

Set up your first Dart project on Linux

In this lesson, we will look at the different forms of creating parameters that are optional, namely positional and named. Optional positional arguments are useful when specifying a default value for a particular parameter. Optional named parameters are useful for specifying parameter defaults and writing self-documenting functions and methods.

Topics

Instructors

Content Type

Free or Pro