Learn Android, Egghead and Nightmare

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Tips and Tricks

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

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

flutter

In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

Style a Flutter Text and Container Widget

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

Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

Using Themes in Flutter to Share Colors and Font Styles

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Diagnose a Slow Page Using Developer Tools

In this lesson we’ll learn how to render both local & network images in a Flutter application using the Image class.


Load an Image in a Flutter App with the Image Class

In this lesson we’ll learn about the main layout widgets you'll need when building your user interface in Flutter. We’ll take a look at Container, Center, Row, Column, Stack, & GridView widgets learn how they work.

Building Layouts in Flutter with Layout Widgets

In this lesson we’ll learn how Navigation in Flutter works by navigating to a new page when clicking on a button using the push & pop methods. We'll also look at how to pass properties to a new screen dynamically.

Getting Started with Navigation in Flutter

In this lesson, we'll learn how to specify a configuration object containing all of the routes for our application & navigate between them in a Flutter application.

Navigation with Named Routes in Flutter

ListView is the most commonly used scrolling widget in a Flutter application. In this video, we'll learn how to create dynamic lists using Flutter's ListView widget to render both lists of Strings & lists of Maps

Building Dynamic Lists in Flutter with ListViews

In this lesson we’ll learn how to fetch & then display data from an API over the network in a Flutter application using the http package.

Fetching & Displaying Data from an API in Flutter using the http Package

codesandbox.io provides one of the fastest ways to start a new React project. In this lesson, we will take a first look at codesandbox, its interface, and the default React project it creates.

Use Codesandbox to Start a New React Application

By re-assigning a couple mouse buttons, you can drastically improve the speed you can edit your lessons in Screenflow. This lesson shows how to customize using the Logitech software, but the concept should work for any mouse customization software as well.

Faster Edits in Screenflow with Mouse Customizations

Sometimes you have an idea that you want to quickly record, but the idea of setting up a project just to get it recorded gets in your way. I'm going to walk your through scripting away the main setup pain points so that you can focus on creating content.

Automate egghead Lesson Setup with ZSH Shell Functions

When making your font sizes large, your code will often get to long to fit on the screen. This lesson shows you how to use "word wrap" or "prettier print width" to adjust your code to fit within the editor.

Reformat Code to Fit the Screen

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

In this lesson, we will learn how to use custom ENV variables to customize the PS1 Bash/Zsh command prompt in the VS Code terminal, without affecting our custom terminal themes in other applications. We will see how this can be useful for keeping the terminal clean for screen recordings.

I'm using Zsh in this video, but this works in Bash with `~/.bashrc` as well.

Customize the PS1 Bash/Zsh Command Prompt in VS Code with Environment Variables

Lessons often have common starting points. If you're going to make lessons in bulk, it helps to create templates so you don't waste time setting them up over and over.

Create a Lesson Template

Once your lesson template is ready, it's time to create some github repos to share your code. The easiest way to do this is with Github's CLI tool called "hub".

Topics

Instructors

Content Type