Let's dive right into the thick of it and build your first web app with the help of the awesome Alyssa Nicoll! In this tutorial, she'll introduce HTML & CSS basics and even touch on animations! Together you'll be using codepen.io to build your first web app in the browser of your choice!

 

=======================
Some handy timestamps:
=======================
00:00 - Intro
01:00 - Resources
03:40 - Start your first web app - codepen.io
08:20 - How to create headers, paragraphs - learning opening & closing tags in HTML
11:00 - What is a body tag and how to create one? Adding font & color
13:45 - Changing the background color - with HEX codes!
15:00 - What does the C in CSS stand for? Plus some beginner mistakes you can easily avoid!
18:36 - How to change the color of your paragraphs only?
23:50 - How to customize and personalize your HTML?
25:17 - How to choose and add a font?
29:20 - How to add a text shadow?
37:33 - Let's talk margins & spacing - adjusting your paragraphs
46:10 - How to create a simple keyframe animation? Stylize your headers!
49:44 - Adding a rotation to your animation - transforming your header
51:57 - What is a div?
52:09 - Building elements - adding a sky and sun
54:24 - How to add an svg image? 
57:00 - How to reposition you svg images?
01:00:48 - How to add individual animations to our svg images?
01:04:27 - Outro

---
You can find all the handy resources and links below!

➡️Resources/Links
• Starter app to fork in codepen: https://codepen.io/alyssamichelle/pen/dyWMyGQ
• My end result app in codepen: https://codepen.io/alyssamichelle/pen/vYLZxqY
• There is boilerplate HTML that codepen takes care of for you, but you will need to know outside of codepen, check out this article: github.com/joshbuchea/HEAD

➡️HTML Cheat Sheets (to know about other elements you can create):
o Cheat Sheet 1: https://htmlcheatsheet.com/
o Cheat Sheet 2: https://digital.com/tools/html-cheatsheet/

➡️Color/Fonts Resources:
• https://hashtagcolor.com
• https://color.hailpixel.com
• https://colorhunt.co/
• https://fonts.google.com


#CSS #HTML #WebApp

Build Your First Web Application Using HTML and CSS
5.20 GEEK