- Cloud9 Setup
- Directory Structure & Organization
- Practice
- Intro to Display: Inline vs. Block level elements
- Final Project Intro
- Slack me your email
- You will recieve a registration email from c9.io shortly
- Follow the link in that email to Cloud9
- Follow the steps to register for your free account
- What is a directory? (It's just a folder!)
- What's the Root Directory, in regards to our project?
- Proper project structure
- Files & Folders Every Project Should Have
- Navigating your Cloud9 environment
- Display property
- Block
- Inline
- Inline-Block
- None
- Now let's practice the Display Property
- For the next 30-40 minutes:
- In Cloud9, create a header with a brand/logo on left (you can use an image or a text-based element)
- Navigation on right(nav tag with ul and li)
- When you're done, send me a Direct Message (DM) on Slack to let me know
- Hint: You'll need to use both the float and display properties to make this work
Build a website with:
- 3 Pages: Home, Contact, About (or comparable content)
- Header with Brand and Working Navigation
- Footer with Social Media Links from Font Awesome
- Contact Form
- Images that are Anchor tags
- Get Creative!
- Using codepen:
- Create a new pen with 6 divs
- Give those divs height, width, and different background colors
- Use the float and clear properties to line 3 of the divs up hortizontally
- and the remaining three should be below those first three, next to each other
- Final Result should look like this:
(use whatever colors you want)
- Send me a direct message on Slack with a link to your finished pen.
