Styling forms and inputs | Chris Dixon.io

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Full Stack Web Developer Academy For Beginners

Welcome and let's get started!

Welcome to the course! (3:40)
Understanding HTML (6:29)
What you will need for this course (1:16)

Beginning HTML

Structuring a web page (5:56)
HTML Headings (6:52)
Setting up a web project (3:09)
Div and span (5:23)
Adding paragraphs and text (3:31)
Text emphasis, importance and formatting (6:25)
HTML lists (4:52)
Time to practice: Create the project lists (5:58)
Working with images (5:52)
Links (10:20)
Time to practice: Linking to pages (3:40)
What are semantic elements (4:21)
Adding semantic elements to our project (5:25)
Time to practice: Adding more products (1:28)
Solution: Adding more products (5:11)
HTML comments (3:52)
HTML entities and symbols (6:01)
Time to practice: Product detail page (3:22)

Forms, Tables & iFrames

HTML Tables (9:53)
HTML Forms (7:55)
Form labels, name and id (5:01)
Checkboxes and radio buttons (9:03)
Select input (7:08)
Datalist & submit (10:41)
Other useful form elements (7:30)
IFrames (6:25)
Adding Google maps (6:26)

Beginning CSS

Understanding CSS (2:37)
Inline styles and adding color (6:25)
Internal stylesheets (5:12)
External stylesheets (4:08)
Fonts (6:53)
Classes and id's (5:35)
Margin and padding (6:26)
Block, inline and inline-block (9:17)
The box model (5:21)
List styling (5:00)
Styling links and psuedo classes (8:09)
Float and clear (12:36)
The position property (7:20)
Styling forms and inputs (5:12)
Time to practice: final project styling (1:19)
Solution: final project styling (6:10)
Specificity and the cascade (11:16)

Responsive Design

What is responsive design? (3:25)
The viewport meta tag (4:42)
Scalable units (7:47)
Fluid layout (4:43)
Understanding media queries (8:51)
Mobile first styling (5:03)
Styling for medium devices (4:26)
Styling for large devices (6:47)
Picture and srcset (7:23)
Time to practice: Add responsiveness to project (1:01)
Tech-Store completed project download

CSS: Flexbox & Grid

What is the flexbox? (3:26)
Flex-direction (4:42)
Flex wrap and justify content (5:16)
Align items (5:21)
Align content (4:26)
Controlling child items- order (2:57)
Controlling child items: grow and shrink (6:15)
Controlling child items: alignment (2:37)
Time to practice: Integrate Flexbox into the Tech Store (1:01)
What is the CSS Grid? (0:56)
First look at the CSS Grid (7:16)
New Lecture
Grid gaps (2:28)
Track repeating and the fr unit (3:42)
Min and max track sizes (2:06)
Grid line numbers (7:06)
Grid line names (5:53)
Grid template areas (7:11)
Nesting grids (2:32)
Alignment (5:47)
Time to practice: Song Finder layout (6:55)
Song Finder project download (up to this section)

Bootstrap 4

What is Bootstrap? (3:32)
What we will be building (2:29)
Creating a Bootstrap project (7:01)
The Bootstrap grid (8:27)
Adding images and text (11:35)
Bootstrap navbars (9:54)
Bootstrap carousels (6:33)
Adding controls to the carousel (4:34)
Bootstrap modals (8:32)
Bootstrap forms (13:52)
Bootsrap utilities (12:12)
Gourmet Burgers completed project download

Javascript: Basics and Control Flow

Download Javascript starter files
Variables, strings and numbers (9:32)
Javascript arithmetic and operators (7:52)
Alert, prompt and confirm (9:28)
If/else statements and comparison (8:48)
Nesting if else statements (3:44)
Else if and logical operators (5:06)
The ternary operator (5:09)
The switch statement (5:27)
Time to practice-the dragon slayer game (10:59)

Javascript: DOM Manipulation, functions and events

DOM Manipulation (16:11)
Adding and removing elements with Javascript (11:19)
Time to practice: adding elements with Javascript (1:03)
Javascript functions (4:44)
Function arguments (4:46)
Scope and hoisting (10:23)
Arrow functions (3:37)
Javascript events (10:09)
The event object (4:28)
External Javascript (2:45)
Time to practice: pixel to em converter (1:37)
Solution: pixel to em converter (7:20)

Javascript: Loops, Arrays and objects

Javascript arrays (3:35)
Array methods (7:30)
Looping through arrays: forEach (7:04)
Looping through arrays: map (3:31)
Time to practice: Arrays (1:36)
Solution- Arrays (3:23)
For loop (10:23)
While loop (4:13)
Objects (8:23)
Looping through objects (4:35)
Object constructor function (9:18)

Javascript: Shape Matcher Game and RegEx

Const and let (11:13)
Generating a random shape (4:27)
Repeating with setInterval (4:36)
Template literals (8:31)
Comparing objects and scoring (9:24)
Introduction to regular expressions (9:53)
RegEx find and replace project (9:25)

API'S, fetching data and promises

HTTP, request and response (9:32)
What is an API? (7:43)
Fetching data and query strings (9:59)
Async code and promises (8:33)
Map through results (12:04)
Creating our search query (6:37)
Improving our search (4:49)
Audio previews, capture and bubbling (8:38)
Javascript completed starter files download (all sections)

Setting up Node and Express

What we will be building (5:42)
What is Node & NPM? (3:50)
Static v dynamic web server (4:04)
Express.js and express generator (8:53)
Express project structure (10:25)
Using nodemon (6:13)
Serving static files (2:16)

Routing and templating

Introduction to pug (9:14)
Template inheritance (3:10)
Time to practice: Creating the header (1:02)
Solution: Creating the header (12:10)
Mixins (11:09)
Basic routing (5:46)
Route parameters (4:40)
MVC Pattern (2:14)
Using controllers (5:36)
Using middleware (7:43)

Mongo and Mongoose

Important Update: mLab now part of Mongo (5:31)
Getting started with Mongo (11:25)
Mongoose models (7:36)
Creating our hotel upload form (16:15)
Pushing to the database (11:40)
Querying the database (16:54)
Distinct values (14:38)
The aggregation pipeline (14:23)
The edit and remove form (18:03)
Updating records (18:52)
Deleting records (9:21)

Styling and pushing on with our app

Hotel detail view (6:42)
Locals and conditional rendering (13:43)
Hotels by country (8:50)
Styling the header- small screen (10:41)
Styling the content- small screen (7:26)
Large screen styling (13:38)
Countries mixin (4:13)
Promise.all and array destructuring (7:32)
Environment variables (7:39)
Handling file uploads (12:30)
Saving images to the cloud (7:34)
Retrieving images from the cloud (5:21)
Hotel search form part 1 (12:59)
Hotel search form part 2 (8:01)
Search results template (13:55)
Hotel detail search form (7:30)

User Accounts and Authentication

Creating the user model (5:55)
Sign up form (10:52)
Validating user input (17:20)
Passing errors to the template and sanitization (5:52)
Registering new users (13:19)
Password encryption (6:17)
Logging in (12:56)
Logging out (3:38)
Working with sessions (14:14)
Providing user feedback with flash messages (16:23)
User conditional rendering (9:54)

Making bookings and the user dashboard

The order model (4:20)
Booking confirmation page (16:54)
Placing orders (9:33)
User account area (15:07)
Displaying all orders (6:59)
Final CSS (8:18)
Let's Travel completed project download

Publishing to a live server

Preparing for production (9:27)
Pushing our app to Heroku (16:32)

Thank You

Thank you and congratulations! (1:47)
Keep on learning

Teach online with

Styling forms and inputs

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock