Lesson 2
This Lesson’s Focus: Learning HTML & CSS
- html elements (lists, headings, p, a, form inputs)
- css font styles (family, size, weight, transform, color)
- box model (margin, border, padding, content)
- widths, heights
- borders
At CoderGirl
- Discuss and Share Assignments from Lesson 1
- Work Day - start taking the courses in Lesson 2
- Lesson 2 Prep Work (below, Setting Up Git for your Online Profile)
Prep Work
Setting Up GitHub for your Online Profile
1) After creating a GitHub account, you are going to “fork” your first “repository”…
Note: “repository” and forking” are a Git term… repository is then collection of files that make up a project and forking means to copy of a version of a project, so you can edit it and make it your own without affecting the original project.
For example, image you wanted to use the same layout of a friend’s resume in google docs, you could duplicate or copy the document and put it in your google drive. That way when you edit the document to put in your own information, you won’t ruin your friend’s resume.
… complete the Getting Started Section - Forking this Repository found here: Profile Project
2) Now that you created your own repository on GitHub, you are going to create a local copy on your computer to do work on. This is called cloning a repository.
Note: clone is another git term… the repository stored on GitHub is known as a “remote” repository, which basically means it is the master/public copy stored on GitHub. The local copy is the one on your computer to which you can play around and make edits. Then when you have a good change you can move that change up to the remote repository on GitHub.
For example, if you are working on a google document with a group. you might copy the document to your computer to work on individually and when you had all your changes ready for the group to look at, you would add them to the document on google drive. The remote repository on Github is like group document on Google Drive in this case.
… complete the Getting Started Section - Cloning the Repository on Your Computer found here: Profile Project
Course Work
Assignment: Take HTML/CSS online course
Do: KhanAcademy - Intro to HTML/CSS: Making webpages
Complete the following sections of the KhanAcademy class:
- Intro to HTML
- Intro to CSS
- More HTML tags
- CSS text properties
- CSS layout
- More CSS selectors
Assignment: Update Your Online Portfolio
Do: Make It Your Own - Follow these steps to update the online portfolio project that we cloned to your computer during the CoderGirl MeetUp.
1) Open Atom (the text editor you should have downloaded). Click File > Open and then navigate to your project folder.
2) Update All Text, including your name, tagline and a little description of yourself.
3) Replace the Thumbnail Picture, with a picture of yourself.
4) Change the colors of the site to match your preferences.
That’s it for now! You will be coming back to this project to keep practicing what you have been learning.
Assignment: Extra Practice With The Box Model
Read: W3Schools Box Model Explanation
Do: CodePen Box Model Challenge
1) Create a CodePen account: CodePen
2) Fork this Project, by clicking the Fork button: Box Model Challenge
3) Follow the instructions in the CSS file to complete the challenge
4) When finished, compare it to the solution: Box Model Challenge Completed