Posted on Sep 15th, 2020
Today’s topics
- Using arrays
- Iteration: using loops with arrays
- Transforming arrays with map, reduce, and filter
Project
JavaScript Problem Set 2
Link to the assignment invitation
🔖 Resources
Notes & Video from Class
Posted on Sep 14th, 2020
Posted on Sep 11th, 2020
Today’s topics
- CSS backgrounds
- CSS layout with flexbox
Project
Continue working on your dog adoption website assignment, which is due Monday morning.
Links and resources
Another option for CSS layout is called “grid”, also built into CSS. With flexbox you choose to line up your boxes either vertically or horizontally, but with grid you can specify both horizontal and vertical arrangement in the same box.
Jen Simmons is a former Mozilla developer and educator with a great series on YouTube to teach you css layout best practices using grid and flexbox.
Before we had flexbox or grid built into CSS, we relied on floats for layout. You should not be using floats to lay out your pages, but you may still see them in other people’s code. Because of that, you may want to familiarize yourself at some point.
Code & Video from class
Posted on Sep 10th, 2020
Today’s topics
- Styling HTML with CSS
- CSS syntax: selectors, properties, values; shorthand properties
- Working with color, text and font properties, and backgrounds
- The box model, margin, and padding
- Units of measurement
Project
Build a Dog Adoption website
Link to the assignment invitation
This assignment is due on Monday, Sept 14, at 9:30 am.
Links and resources
CSS Selectors & Properties
Box Model
Code & Videos from class
Posted on Sep 9th, 2020
Today’s topics
- Learn about HTML tags and elements
- Create a page with HTML
Intro to GitHub Classroom
We are using a tool called GitHub classroom to generate a repository (repo) on GitHub for each student to work in.
Each day we will share an assignment invitation here on this page. Clicking on the link will take you to a page where you will see as message that looks something like this:
You’ll see your github username as part of the repo name instead of amygori. When you accept the assignment, GitHub will create your homework repo and, when it is done, give you a link to it (from now on, this is the link you will use to see your project on GitHub, NOT the assignment invitation link). Go to that newly created repo and click on the green button to “Clone or download” your repo. This will copy the repo’s url to your clipboard.
In your terminal, navigate to the folder where you intend to keep your projects. When you are in the directory you want to be in, type git clone <url-for-your-repo>, but in place of , paste in the url you copied from GitHub. You'll see output indicating the repo is being cloned. When it's done, you can `cd` into it and type `git status` to see that you are in a git repo. Open this repo in VS Code (an easy way to do this is to type `code .` when you are in the assignment repo) and do your work here. Add and commit in the terminal as you work.
Using VS Code
VS Code (or Visual Studio Code) is a text editor made by Microsoft. It is free and open source, and it’s used by many professional developers these days.
If you haven’t installed it yet, see the Setting Up Your Computer instructions for how to do that.
See Getting Started with VS Code for an overview and a video intro to using this tool.
Project: Build a Small Business Website with HTML
Link to the assignment invitation
Quick video showing how to clone your assignment repo
🔖 Resources
HTML References
About HTML and the web
Code & Videos from class
How-to deal with GitHub for Assignments
