diff --git a/readme.md b/readme.md index 74fa5994..e4bdaf0e 100644 --- a/readme.md +++ b/readme.md @@ -1,10 +1,17 @@ # Unit 1: Introduction -Welcome to Phase 0! Below you will find links to the curriculum for each week. Each week will be released on Monday and will be due on the following Sunday at 11:59pm. -### [Week 1: HTML/CSS](week_1/) -### Week 2: JavaScript (to be released) -### Week 3: Ruby (to be released) +Welcome to Phase 0! Below you will find links to the curriculum for each week. Each week will be released on Monday and will be due on the following Sunday at 11:59pm. + +### [Week 1: HTML/CSS](week_1) +### [Week 2: More HTML/CSS](week_2) +### [Week 3: JavaScript](week_3) + +## Unit Requirements +- [Peer-Pair program](https://github.com/Devbootcamp/phase_0_handbook/blob/master/peer-pairing_sessions.md) at least 4 times this unit. Read about [pairing](https://github.com/Devbootcamp/phase_0_handbook/blob/master/pairing_in_phase_0.md). +- [Submit feedback](https://socrates.devbootcamp.com/feedback/new) for all pairing sessions. (You should submit at least 3 for peer sessions and 2 for [GPS 1.1 and 1.2](https://github.com/Devbootcamp/phase_0_handbook/blob/master/guided_pairing_sessions.md)) +- [Rate Feedback](https://socrates.devbootcamp.com/feedback) at least 20 pieces of other people's feedback. + +#### How to navigate this repository +If you would like to open tabs in a new window, please either right click or hold command while you click. - diff --git a/week_1/1_Get_Started/1_git_and_github.md b/week_1/1_Get_Started/1_git_and_github.md deleted file mode 100644 index c8400464..00000000 --- a/week_1/1_Get_Started/1_git_and_github.md +++ /dev/null @@ -1,56 +0,0 @@ -[Back](README.md) - -# Git and GitHub - -## Learning Objectives -By the end of this lesson, you should be able to: - -1. Outline how to: - * Set up git on your computer - * Generate and install SSH keys on your computer - * Download the GitHub App -2. Describe GitHub -3. Compare git and GitHub -4. Explain what version control does - - -## Directions - -### 1. Setup git and GitHub - -Have you signed up for GitHub yet? If not, sign up here. Then follow these instructions to install git and set up SSH keys. - -#### A. Username - -I'm sure you've chosen an excellent and memorable username for GitHub, so don't forget it! When you see "[USERNAME]" in this guide, replace it with your username. For example, my username is "rmw". So "github.com/**[USERNAME]**" becomes "github.com/**rmw**". - - -#### B. Install the GitHub App - -Download the GitHub desktop application. - -- Mac -- Windows - -*Note: if you are using Linux, you'll need to use the command line for Git. We will have instructions for this later.* - -### 2. Learn - -#### What's this git stuff? - -Go through the following resources to learn more about git and GitHub. - -* Read: Version Control -* Slides: Intro to Git and GitHub from GirlDevelopIt. Use your arrow keys to navigate the slides. -* Read Skillcrush's Git Series: Git, Getting Started with Git -* Video: Git 3 Minute Primer - -#### Git vs. GitHub - -Confused about the difference between git and GitHub? Try one of these articles: - -* Git vs. GitHub for Dummies -* Is Git the same as GitHub? - -### 3) Reflect -Reflect on your learning by editing the `1_git_github.md` file. Go to this file for instructions. **Reflecting is not optional.** \ No newline at end of file diff --git a/week_1/1_Get_Started/2_set_up_repo.md b/week_1/1_Get_Started/2_set_up_repo.md deleted file mode 100644 index 606a1428..00000000 --- a/week_1/1_Get_Started/2_set_up_repo.md +++ /dev/null @@ -1,63 +0,0 @@ -[Back](README.md) - -# Set up a repository - -We are going to create a repository to host your very own website! You'll be using a GitHub repository and GitHub Pages to set it up. - -## Learning Objectives - -1. Explain how to create a repository on GitHub and clone the repository to your local computer -2. Describe what open source is -3. Assess the importance of using licenses - - -## Directions - - -### 1. Create a website repository - - -1. **Log into GitHub** -2. **Create a new repository**

This will take you to the new repository form.

![New repo form](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-repo-1.jpg) -3. **Fill out the new repository form.** ![New repo form](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-repo-2.jpg)

I'm gonna say it again: You *must, must, must* name your repository **[USERNAME].github.io**. -4. Click on the **"Create Repository" button** -4. **Do a celebration dance!**
:dancers: :tada: :dancer:

![You have a repo](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-repo3.jpg) - - - -### 2. Download the repository - -A git repository is "distributed", which means it exists on many computers instead of just one. Right now your repository exists on GitHub, but in order to add or edit files, you need it to exist on *your computer*. - -In git terms, this is called **cloning a repository locally**. A "local repository" is the copy on your computer. A "remote repository" is one on another server, i.e. on GitHub, or on another person's computer. - -#### Clone a repository with the GitHub App - -For Mac and Windows users, open the GitHub app you installed earlier. - -If you are working on Linux and/or want to challenge yourself further, skip to the next section. - -1. Open the GitHub App -2. On the right side bar, click on your github [USERNAME] -3. In the search bar, start searching for "github". Your "[USERNAME].github.io" repository should come up in the list. -4. Click on the "Clone to this computer" button. - -![Clone a repo](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-app-1_clone.jpg) - - -#### Cloning a repository with the command line - -This section is for Linux users or those who want to challenge themselves. Later in DBC and in your life as a professional developer, you will use git and access GitHub using the command line (aka "terminal"). - -Use this tutorial to clone your repository on the command line. - -### 3. Open Source - -You added an MIT License to your repository. Read these articles to explain why: -* Open Source -* Open Source licensing -* A short guide to Open Source - -### 4. Reflect - -Reflect on your learning in the `2_open_source.md` file in your reflection gist. diff --git a/week_1/1_Get_Started/3_web_basics.md b/week_1/1_Get_Started/3_web_basics.md deleted file mode 100644 index 97482206..00000000 --- a/week_1/1_Get_Started/3_web_basics.md +++ /dev/null @@ -1,77 +0,0 @@ -[Back](README.md) - -# Basics of the Web - -## Learning Objectives - -* Describe the following: web server, browser, HTML, CSS, domain, DNS -* Create an HTML file -* **Commit and push a file to GitHub** -* **View your live website!** - -## Directions - -### 1) Learn - -#### Web Concepts - -* Slides: Intro to Web Concepts -* Read: Web concepts -- Internet vs. Web, Web Browser, Web Server -* Read: Web site vs Web App -* Read: Domain concepts -- What's a domain, DNS, IP Address -* Read: Introduction to DNS -* Read: What's HTML? - -#### More about Git - -* Read: Recording Changes to your Git Repository - -**Optional resources** - -* Read: git commit -* Read: git log aka git history - - -### 2) Create a web page - -Now let's put that knowledge to work! We will be using Sublime Text as our text editor. Review the Perfect Workflow in Sublime Text if you need a refresher on how to write code using Sublime. - -* **Open a new file in Sublime** -* Save the file as `index.html` in the **same directory as your copy of [USERNAME].github.io**

![Sublime save](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/sublime-save.jpg) -* Add the following **HTML code** to your file:
`Hello DBC!` -* **Save the file** - -### 3) Save your page to GitHub - -If you are **NOT** using Mac or Windows and the GitHub App, [follow this tutorial](http://readwrite.com/2013/10/02/github-for-beginners-part-2#awesm=~oxToOt4ihQmVCP) and then skip to #5. - -* **Open the GitHub App**![GitHub app new change](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-app-2_save-1.jpg) -* **Type a "commit message"**

A commit message is a description of all the files and changes that are part of the "snapshot" (or commit) you are about to save. If another programmer only read the commit, they should understand what was changed (or added or deleted) and why.

![GitHub commit](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-app-2_save-2.jpg) -* **Click on the "Commit" button**
*If you get an alert about saving credentials, choose "Always Allow"* -* **View your commit**

![GitHub commit](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-app-2_save-3.jpg) - - -### 4) Push your page to GitHub - -Click on the **Sync Branch** button in the upper right corner. - -![GitHub commit](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-app-3_push.jpg) - -### 5) View your site - -It's now time for the big reveal!! - -Go to **http://[USERNAME].github.io** to see your HTML page live! - -![GitHub commit](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-page1.jpg) - -You can also see the new index.html file in your GitHub repository! - -![GitHub commit](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-page2.jpg) - - -#### [AMAZING!](http://www.youtube.com/watch?v=ewfIvKbuRUg) - -### 6) Reflection - -Reflect on your learning in the `3_web_basics.md` file in your reflection gist. \ No newline at end of file diff --git a/week_1/1_Get_Started/README.md b/week_1/1_Get_Started/README.md index a9d07e6f..537e4625 100644 --- a/week_1/1_Get_Started/README.md +++ b/week_1/1_Get_Started/README.md @@ -1,36 +1,74 @@ -[Back](../) +[Back](README.md) -# Get Started +# Git and GitHub -Welcome to Phase 0 Week 1! We are starting with web basics (HTML & CSS) and introducing you to Phase 0 process. +## Learning Competencies +By the end of this lesson, you should be able to: -## Learning Objectives -Each challenge has learning objectives that describe what you should be able to do by the end of the lesson. Use these objectives to assess your understanding. You will reflect on the learning objectives and material in each challenge. +- Describe GitHub +- Compare git and GitHub +- Explain what version control is and does -## Purpose -### Why Github? +## Releases +(i.e. directions - each release is necessary for the next release, so be sure to do everything in the order specified for all challenges) -You'll be using Github every day at DBC ... and in your life as a professional developer. It's how you will know what's going each day, find challenges to work, and collaborate with your team for your Phase 3 project. +### Release 0: Sign up for GitHub -In fact, many people in the tech industry see your Github profile as your new resume. +Have you signed up for [GitHub](http://www.github.com) yet? If not, [sign up here](http://www.github.com). Then follow [these instructions](https://help.github.com/articles/set-up-git) to install git and set up SSH keys. -We want you to get comfortable with git and Github as soon as possible. We are using the desktop app to ease you into things, but later, we'll transition to the command-line interface. +#### A. Username -### Why start with the web, HTML, & CSS? +I'm sure you've chosen an excellent and memorable username for GitHub, so don't forget it! When you see "[USERNAME]" in this guide, replace it with your username. For example, my username is "rmw". So "github.com/**[USERNAME]**" becomes "github.com/**rmw**". -You decided to attend DBC to become a Web application developer, right? As you probably know, more and more software is build on the web. Even desktop software ofte syncs with the cloud. So it's important to get a feel of web development. -Moreover, the web is fun. You get to combine your knowledge of languages and see a result, but it's also confusing. As a developer you'll have to switch between languages -- HTML, CSS, Javascript, Ruby, etc -- all the time. **We want to get you comfortable with switching between different technologies** :smiley_cat: +#### B. Install the GitHub App -## Directions +Download the GitHub desktop application. -Complete the following challenges in order to get everything set up to dig into HTML & CSS this week. +- [Mac](http://mac.github.com/) +- [Windows](http://windows.github.com/) -1. [Git and Github](1_git_and_github.md) -2. [Set up your website repository](2_set_up_repo.md) -3. [Basics of the Web](3_web_basics.md) +*Note: if you are using Linux, you'll need to use the command line for Git. We will have instructions for this later.* + +### Release 1: Learn + +#### What's this git stuff? + +Go through the following resources to learn more about git and GitHub. + +* Read: [Version Control](http://skillcrush.com/2013/02/11/version-control/) +* Slides: [Intro to Git and GitHub from GirlDevelopIt](http://girldevelopit.com/assets/github/index.html#/). Use your arrow keys to navigate the slides. +* Read Skillcrush's Git Series: [Git](http://skillcrush.com/2013/02/18/git/), [Getting Started with Git](http://skillcrush.com/2013/02/20/get-started-working-with-git/) +* Video: [Git 3 Minute Primer](http://www.youtube.com/watch?v=_Jmkvv_nKTE) + +#### Git vs. GitHub + +Confused about the difference between git and GitHub? Try one of these articles: + +* [Git vs. GitHub for Dummies](http://stephaniehoh.github.io/blog/2013/10/07/git-vs-github-for-dummies/) +* [Is Git the same as GitHub?](http://www.jahya.net/blog/?2013-05-git-vs-github) + +### Release 2: Reflection +Reflecting is essential for solidifying your learning. You will be expected to complete a reflection for each challenge in Phase 0. It will help you learn how you learn, give opportunities for sharing resources, and help your instructors gauge your progress. Reflections are for you, but they will also be read by others, so make sure to write for an audience. + +**Writing reflections for each challenge is mandatory.** + +Before you can complete your reflection, you'll need to click the "Fork" button at the top right of this page. + +![Repo to Fork](../imgs/repo-to-fork.jpg) + +This will make a copy of the unit 1 curriculum repository into your personal GitHub account. This will be where you add reflections and later solutions. After you click fork, you should be taken from the Devbootcamp.com/phase_0_unit_1 repo to [USERNAME]/phase_0_unit_1 + + +![Forked Repo](../imgs/forked-repo.jpg) + +Reflect on your learning by editing the my_reflection.md file in the [1_get_started](./) folder (the folder you are in). You will be learning HTML this week, but these files have a `.md` extension. Do you know what that stands for? It stands for markdown, which is a text-to-HTML conversion tool. If you would rather write in HTML, you can do that by changing the file extension from .md to .html. + +You can complete the first 2 challenge reflections on github.com. Click on the my_reflection.md file in this folder. There should be a button to edit at the top. Click it. You'll add your reflection in markdown and write a commit message under "Commit changes". Once you type something there, you will want to click the "commit changes" button. **NOTE: It will not let you commit changes without a commit message.** + +![Editing Reflection](../imgs/adding-reflection.jpg) + +After you learn how to edit files locally and sync/push your changes (in the third challenge), you'll want to edit all files on your local `phase_0_unit_1` repository--more on that later. -#### Navigating online slide decks -A few of the resources are online slide decks from Girl Develop It. **Navigate using the arrow keys on your keyboard.** Look at the **arrow images in the bottom right** to tell you which ways you can navigate. You may be able to go *down* as well as *left*. You can also click on links in the slides. diff --git a/week_1/1_Get_Started/add_a_reflection.md b/week_1/1_Get_Started/add_a_reflection.md deleted file mode 100644 index d26212ca..00000000 --- a/week_1/1_Get_Started/add_a_reflection.md +++ /dev/null @@ -1,30 +0,0 @@ -# How to add a Reflection - -Reflecting is essential for solidifying your learning. You will be expected to complete a reflection for each challenge in Phase 0. It will help you learn how you learn, give opportunities for sharing resources, and help your instructors gauge your progress. Reflections are for you, but they will also be read by others, so make sure to write for an audience. - -**Writing reflections for each challenge is mandatory.** - -## Learning Objectives - -1. Use GitHub to fork and edit gists -2. Write reflections in markdown or HTML - -## Directions - -### 1. Fork this gist -You will complete your reflections for week 1 using one gist that contains multiple files.(One for each reflection). - -* In the top right of the page, you should have a button that says "fork." Click it. -* Now you should see the exact same file, but at the top it should say [USERNAME]/0_week_1_reflections.md. This is your reflection file, and it is located in your github account under "gists." - -### 2. Edit the reflections file - -You will be learning HTML this week, but these files have a `.md` extension. Do you know what that stands for? It stands for markdown, which is a text-to-HTML conversion tool. If you would rather write in HTML, you can do that by editing the file extension. - -At the top of the page you should see a series of buttons, including "edit" and "delete." Click the "Edit" button to modify the gist. Navigate to the file named `1_git_github.md` and answer the reflection questions there. - -**NOTE: DO NOT click the delete button unless you want to lose all of your work. If you accidentally do this, you will need to re-fork and start over.** - - -###Resources: -Daring Fireball: Markdown Syntax Documentation diff --git a/week_1/1_Get_Started/my_reflection.md b/week_1/1_Get_Started/my_reflection.md new file mode 100644 index 00000000..acc53ca6 --- /dev/null +++ b/week_1/1_Get_Started/my_reflection.md @@ -0,0 +1,15 @@ +## 1. [Git and Github](1_get_started/readme.md) Reflection + +* What struggles did you have setting up git and GitHub? What did you learn in the process? +* Write an explanation of and compare git and GitHub to a non-technical audience. +* Describe what version control is and how GitHub helps with it. +* Why do developers use version control (git)? Does that make sense to you? Why or why not? +* What doesn't make sense? What does? + + + +* I found the setup of git and github relatively easy. Didn't really run in to any sort of errors in the setup, it moreso took a bit of time to understand forking and why it would be useful. I learned that forking could be useful when using a public file (similar to this one) and that if I was ever cool enough to have a massive impact, I could send a pull request. +* Git is track changes for computer programming. Its value lies in the fact that you can save changes to code as opposed to saving over an existing file. The value is twofold; it is helpful when collaborating with others so that you can work in real time, as well as the fact that you can easily reverse potentially heartbreaking mistakes. Github exploits the value of git in that you can host these files or tracked changes on the internet. This gives you constant access to your app, as well as public or semi-private exposure so that it can easily be shared. When collaborating it is valuable for sharing and working seamlessly while individuals value an online backup. +* Version control allows you to save the changes that you (or a colleague) have made to a file. This is like a constant backup of your work and a way to see how a file has changed over time. If you know that something is failing after a certain point, you can go back and see what change was made to potentially cause that. Github very nicely highlights what has been changed and what it has been changed to. This is very valuable as without it, you could potentially have to search through thousands of lines of code. What I mentioned above with regards to sharing and a remote backup also apply here. +* As mentioned in the prior point, when using thousands of lines of code, tracking changes is extremely valuable. One typo or removed letter can break an app with many lines of code. Therefore, having a backup and a constant set of backups (if you commit) is very helpful. Having this remotely also allows you to track the changes others have made to a collaborative project. This makes perfect sense as it saves a lot of time and headache when trying to diagnose an error. +* This all makes sense and is very logical considering how complex code becomes and the nature of sharing and working with others. diff --git a/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/Quiz.md b/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/Quiz.md deleted file mode 100644 index 9f5a283e..00000000 --- a/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/Quiz.md +++ /dev/null @@ -1,27 +0,0 @@ -#### Include an inline screenshot of your codeschool's points from the profile page: - - - -##QUIZ -* Explain which tabs support the following actions and how. - * Realtime editing of HTML and CSS - * Javascript Debugging - * Performance Optimization - -* What's the quick key for your OS to spawn the Dev Tools inspector? - -* Go to http://www.postmachina.com/ and analyze and tweak this nicely designed page. - * What is the current background color for the page? (Surprisingly, it's not just black!) - * Tweak the background color to white. - * Tweak the height of the side bar that contains the logo. Shrink it down to 85px. - * Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead. - * Now take a screenshot of your new (and maybe not so improved) design. It should match this screenshot: http://postimg.org/image/5ak1jkpl5/ - * Upload your own image to the web using an image hosting service. It should match the image above. The last nav link in the image above is black because the mouse was hovering there when the screenshot was taken. Do the same, and don't take a screenshot of your whole desktop, just the browser window. (This is part of the challenge.) - -* For the postmachina website, why can't you tweak the color of the text "The most important things are not things"? Please explain. - -* Go to www.ticketswizard.com and analyze the page. - * What is the largest image on the website? - * Explain how you would find out this information, and list the URL of offending image here and how big it is. - -* Test the www.ticketswizard.com website with google's [PageSpeed Insights](http://www.ticketswizard.com/). (You can also download the chrome plugin). What is the lowest hanging fruit to optimize the website? How many kilobytes of data can be eliminated? \ No newline at end of file diff --git a/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/README.md b/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/README.md deleted file mode 100644 index b821d6b8..00000000 --- a/week_1/2_Beginning_HTML_CSS/chrome_devtools_challenge/README.md +++ /dev/null @@ -1,33 +0,0 @@ -W1, U1: Introduction to Chrome DevTools - -##Learning Objectives -* Navigate and edit a web page's HTML and CSS elements using the inspector -* Explain what the DOM is and how it relates to CSS and HTML -* Identify images and other page elements that cause slow performance - - -##Directions - -In this challenge, you'll be diving into Chrome DevTools. Inside the DevTools inspector window is an inner world of data that is communicated between the browser and server. These tools are invaluable for you as a developer and getting comfortable with them will help optimize your HTML and CSS editing, javascript debugging, and site's performance. - -We'll be focusing primarily on real-time HTML and CSS editing in this challenge and dip our toes into using the tools to identify page elements that slow down performance and page loading. - -####1) Take Code School's DevTools course - -Focus on chapters 1,2, and 5. Follow along with the video, and take the quizzes at the end of each chapter (quiz 5.2 deals with JavaScript, so it is not mandatory). You'll want to create an account with code school so you can accumulate badges and credits for the chapters you complete. There are also exercises in the gist that will explore the concepts and tools introduced in those chapters. - -Take the time to skim the other chapters. You'll be diving into JavaScript next week, and although the material covering JS (chapters 3 and 4) is a bit advanced, it provides great exposure to JavaScript in the context of the the DevTools console. - -####2) Fork the Pagespeed Insights -- Treehouse Chrome Web Tools - diff --git a/week_1/2_Beginning_HTML_CSS/readme.md b/week_1/2_Beginning_HTML_CSS/readme.md deleted file mode 100644 index 359b4883..00000000 --- a/week_1/2_Beginning_HTML_CSS/readme.md +++ /dev/null @@ -1,138 +0,0 @@ -# U1.W1: Beginning HTML & CSS - -## Learning Objectives -1. Create a simple website from the ground up using HTML and CSS -2. Modify and improve the design of a simple website using CSS -3. Use and manipulate CSS using Chrome Web Tools - - -## Directions - -Everything in this challenge is within the context of the website you set up in the get started section. - -### 1. Set up folders - -* Create a `unit1_week1` folder -* Within the unit1_week1 folder create an `images` folder -* Within the unit1_week1 folder, create a `stylesheets` folder - -From this point forward, all work will happen within the `unit1_week` folder. All images should go in the `unit1_week1/images` folder and all css files should go in the `unit1_week/stylesheets` folder. - -### 2. Intro to HTML - -#### a. Learn - -* Slides: Intro to HTML - -**Optional resources** - -* Build a simple website -* Beginners guide to HTML and CSS -* HTML tag cheatsheat - -What other resources can you find? Share them in the resources spreadsheet in your google+ community (located in the links on the right) - -#### b. Experiment -Create a new html page in your repository called `dbc1.html` - -Add the following to `dbc1.html` (Use this to introduce yourself!) - -* Doctype, head, title, and body -* Add one heading of each level (h1-h6) -* 2-3 short paragraphs -* Some italic and bold text -* Links that open in the same window, a new window and link to an e-mail address. -* Images and an image that's also a link -* Line break -* Unordered list and an ordered list - -### 2. Intro to CSS - -#### a. Learn - -* Slides: Intro to CSS - -**Optional resources** - -* CSS Basics (styling) -* Mozilla's CSS - Getting Started (sections 1-6 if you're unfamiliar with CSS, sections 3-5 if you're familiar with CSS) -* Hexidecimal color -* Classes vs IDs - - -#### b. Experiment -Create a new css file in your repository called `dbc1.css` and save it to the `stylesheets/` directory. - -* Link the `dbc1.css` file to your html file using the "external" method -* Add colors, background colors or fonts of different parts of the page -* Use ids and classes to change specific elements - - -### 3. More HTML - -#### a. Learn - -* Slides: Intro to CSS - -**Optional resources** - -* An Advanced Guide to HTML and CSS - -#### b. Experiment -Create a new html page in your repository called `dbc2.html` - -Add the following to `dbc2.html` - -* Header, content area, sidebar, and a footer using divs -* Spans -* Add padding, borders, and margins -* Center your document in the browser -* Add width and height to divs and give ids - - -### 4. More CSS - -#### a. Learn - -* Slides: More CSS - -**Optional resources** - -- Downloading CSS from a website -- Decoupling HTML from CSS - - -#### b. Experiment -Create a new css file in your repository called `dbc2.css` and save it to the `stylesheets/` directory. - -Link the `dbc2.css` file to your `dbc2.html` file - -Add the following to `dbc2.css`: - -* Psuedo-classes for links -* Positioning -* A div that contains an image and a caption, and position the caption absolutely overtop the image. -* Float side bar and content area - -Structure and Standards -http://girldevelopit.com/assets/intermediate-html-css/class1.html - - -### 5. Chrome Web Tools - -#### a. Learn - -* What's the DOM? -* DOM -* Chrome Web Tools Challenge - - -#### b. Experiment - -Play with changing the CSS of your web page using Chrome Web Tools. - -Visit any blog on [wordpress.com or create your own. Use the Chrome Web Tools to take a peek into the site. How does it differ from your html and css? - - -### 6. Reflect -Go to your reflection gist to write your reflection on `4_beginning_HTML_CSS.md`. diff --git a/week_1/2_set_up_repo/my_reflection.md b/week_1/2_set_up_repo/my_reflection.md new file mode 100644 index 00000000..dff42203 --- /dev/null +++ b/week_1/2_set_up_repo/my_reflection.md @@ -0,0 +1,17 @@ +## 2. [Open Source and Repo Setup](2_set_up_repo/readme.md) Reflection + +* Explain how to create a repository on GitHub and clone the repository to your local computer to a non-technical person +* Describe what open source means +* What do you think about Open Source? Does it make you nervous or protective? Does it feel like utopia? +* Assess the importance of using licenses +* What concepts were solidified in the challenge? Did you have any "aha" moments? What did you struggle with? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. + + + +* To create a repo on Github, you just need to click on the the + sign in the top bar and go to Create > New Repository. From there, you would provide a name for the repo as well as decide if you'd like it to be shared publicly or only allow it for your use. You'll then be prompted for a license, of which there are several choices. I recommend using the MIT License, which is the most simple and allows your software to freely be used and potentially distributed. +* Open source essentially states that your software, depending on the specific open source license used, can essentially be copied, modified, distributed, and more. The modifier must follow the rules of the license that you provide with your software, and also provide that same license in distribution. +* I think open source is great as it engages a community around your software. If you gain a following, you are incorporating the work of others, potentially globally, to increase the quality of the product. In the case that you'd like to make money or only allow others a certain level of freedom, that is possible as well. In a world where software is slowly moving away from closed source, the avenues for profit can be found elsewhere, while exploiting the value of open source. It doesn't make me nervous, by sharing your work with others it allows for greater collaboration and ultimately a better product. +* It is important to use a license as it sets the tone for your software moving forward. For example, if your repo is available publicly on GitHub and someone finds it, they need to know what kind of liberty they can have with your source code in potentially modifying and distributing it. There are many license types that accomodate specific needs and therefore it shouldn't be too complicated to decide on which to add to your project. +* I definitely have a better understanding of open source. I have always been familiar with the Mozilla Foundation, but it now all makes more sense. +* The only other resource I used, was briefly looking through http://en.wikipedia.org/wiki/Comparison_of_open_source_and_closed_source diff --git a/week_1/2_set_up_repo/readme.md b/week_1/2_set_up_repo/readme.md new file mode 100644 index 00000000..ab362a03 --- /dev/null +++ b/week_1/2_set_up_repo/readme.md @@ -0,0 +1,63 @@ +[Back](README.md) + +# Set up a repository + +We are going to create a repository to host your very own website! You'll be using a GitHub repository and [GitHub Pages](http://pages.github.com/) to set it up. + +## Learning Competencies + +- Explain how to create a repository on GitHub and clone a repository to your local computer +- Describe "open source" +- Assess the importance of using licenses + + +## Release 0: Create a website repository + +1. **Log into GitHub** +2. **Create a [new repository](https://github.com/new)**

This will take you to the new repository form.

![New repo form](../imgs/github-repo-1.jpg) +3. **Fill out the new repository form.** ![New repo form](../imgs/github-repo-2.jpg)

I'm gonna say it again: You *must, must, must* name your repository **[USERNAME].github.io**. If you have trouble, double check you spelled it right. +4. Click on the **"Create Repository" button** +5. Click on **settings** on the "Features" section, add a check next to "Issues." This will allow others to give you feedback on your site! +6. **Do a celebration dance!**
:dancers: :tada: :dancer:

![You have a repo](../imgs/github-repo3.jpg) + + +## Release 1: Download the repository + +A git repository is "distributed", which means it exists on many computers instead of just one. Right now your repository exists on GitHub, but in order to add or edit files, you need it to exist on *your computer*. + +In git terms, this is called **cloning a repository locally**. A "local repository" is the copy on your computer. A "remote repository" is one on another server, i.e. on GitHub, or on another person's computer. + +#### Clone a repository with the GitHub App + +For [Mac](http://mac.github.com/) and [Windows](http://windows.github.com/) users, open the GitHub app you installed earlier. + +If you are working on Linux and/or want to challenge yourself further, skip to the next section. + +1. Open the GitHub App +2. On the right side bar, click on your github [USERNAME] +3. In the search bar, start searching for "github". Your "[USERNAME].github.io" repository should come up in the list. +4. Click on the "Clone to this computer" button. + +![Clone a repo](../imgs/github-app-1_clone.jpg) + + +#### Cloning a repository with the command line + +This section is for Linux users or those who want to challenge themselves. Later in DBC and in your life as a professional developer, you will use git and access GitHub using the command line (aka "terminal"). + +Use [this tutorial](../git_clone.md) to clone your repository on the command line. + +## Release 2: Open Source + +You added an MIT License to your repository. Read these articles to explain why: + +* [Open Source](http://skillcrush.com/2012/08/29/open-source-software/) +* [Open Source licensing](http://www.slideshare.net/CodeMontage/writespeakcode-open-source-licenses) +* [A short guide to Open Source](http://www.smashingmagazine.com/2010/03/24/a-short-guide-to-open-source-and-similar-licenses/) + + +## Release 3: Reflect + +Reflect on your learning by editing the my_reflection.md file in the [2_set_up_repo](./) folder (the folder you are in). Please answer to the questions in the file. + +You can complete the first 2 challenge reflections on github.com. Click on the my_reflection.md file in this folder. There should be a button to edit at the top. Click it. You'll add your reflection in markdown and write a commit message under "Commit changes". Once you type something there, you will want to click the "commit changes" button. **NOTE: It will not let you commit changes without a commit message.** diff --git a/week_1/3_Intermediate_HTML_CSS/readme.md b/week_1/3_Intermediate_HTML_CSS/readme.md deleted file mode 100644 index fbf27ba8..00000000 --- a/week_1/3_Intermediate_HTML_CSS/readme.md +++ /dev/null @@ -1,68 +0,0 @@ -# U1.W1: Intermediate HTML & CSS - -## Learning Objectives -1. Identify and use web standardsm, semantic mark up, and HTML5 -2. Describe responsive design -3. Determine whether responsive design is good or bad practice - - -## Purpose - -We think of the web and websites as mostly static. They look the way they look. But it's really more complicated than that. Browsers and operating systems make things look different. Then, smart phones arrived and made everything crazy. Web designers and developers spend a lot of time thinking about how to make web pages usable in all the possible formats (phones, tablets, web) while keeping them maintainable (i.e. not taking a billion years to make small changes). The WC3 makes changes to HTML and CSS every bunch of years, so they think about how the language itself makes things easier or harder. You should start thinking about these things too. - - -## Directions - -Everything in this challenge is within the context of the `unit1_week` folder in your website repository. - - -### 1. Web Standards & HTML5 - -#### a. Research - -Do some research into standard practices of web design, reset css, and HTML5. Use the links below *and* look for resources on the web. If you find good ones, add them to your resources spreadsheet in the Google+ community! - -* Slides: Structure standards and HTML5 -* Read: HTML5 and the document outlining algorithm - - -#### b. Apply -Download the practice files. Unzip the folder into your `unit1_week1` folder. - -* Add reset.css to your index.html file. What happens? -* Update the header links to jump to sections -* Make links change color on hover -* Change the font (@fontface) for elements on the site. -* Change some elements to semantic HTML5 elements (i.e. header, section, etc) - -#### c. Reflect - -Answer the questions in your 5_web_standards.md file in your reflection gist. - -### 2. Responsive Web Design - -#### a. Research - -Look into responsive web design. What is it? Why is it used? - -* Slides: Introduction to Responsive Web Design and Compatability -* Read: Beginners guide to responsive web design -* Make: Treehouse: Build a Responsive Website -* Slides: Web Accessibility -* Read: Change your browsers user agent - - -#### b. Apply - -Using either a new html page in the `unit1_week1` folder or practice files unzipped into the `unit1_week1` folder, try to make your page more responsive. - -How does it look when -* on your phone -* on a tablet -* on really wide screen -* resized really small -* the user agent is changed in your browser - -#### c. Reflect -Reflect on your learning by answering the questions in the `6_responsive_web_design.md` file in your reflection gist. - diff --git a/week_1/3_web_basics/my_reflection.md b/week_1/3_web_basics/my_reflection.md new file mode 100644 index 00000000..be7b9517 --- /dev/null +++ b/week_1/3_web_basics/my_reflection.md @@ -0,0 +1,15 @@ +## 3. [Web Basics](3_web_basics/readme.md) Reflection + +* What 2 new things did you learn about the web? +* What are some important things to remember when setting up your HTML site? +* How did you feel when you saw your web page live? +* Did you have an "aha" moments or were any concepts solidified? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. + + + +* I learned the difference between the web and the internet itself. While I did know that the internet has existed far longer for the web, I always referred to the two interchangeably. +* You need an index page so that viewers can see something! But more importantly, following the steps of creating the page and backing up to Git and pushing to GitHub so that you can view it live. +* It felt really cool to see the page live. I didn't realize that I would be able to view it via a direct link as opposed to some crazy link through GitHub. Really cool! +* I think there was an aha moment when I actually used the GitHub app to publish and then use my browser to view it. +* No other resources diff --git a/week_1/3_web_basics/readme.md b/week_1/3_web_basics/readme.md new file mode 100644 index 00000000..fab2c002 --- /dev/null +++ b/week_1/3_web_basics/readme.md @@ -0,0 +1,81 @@ +[Back](README.md) + +# Basics of the Web + +## Learning Competencies + +- Describe the following: web server, browser, HTML, CSS, domain, DNS +- Create an HTML file +- Commit and push a file to GitHub + +## Release 0: Learn + +#### Web Concepts + +* Slides: [Intro to Web Concepts](http://girldevelopit.com/assets/web-concepts/index.html#/) +* Read: Web concepts -- [Internet vs. Web](http://skillcrush.com/2012/08/19/the-internet-vs-the-web/), [Web Browser](http://skillcrush.com/2012/10/01/web-browsers/), [Web Server](http://skillcrush.com/2012/07/03/web-server-2/) +* Read: [Web site vs Web App](http://skillcrush.com/2013/03/28/websites-vs-web-applications/) +* Read: Domain concepts -- [What's a domain](http://skillcrush.com/2012/11/01/domain-2/), [DNS](http://skillcrush.com/2012/04/24/dns/), [IP Address](http://skillcrush.com/2012/07/03/ip-address-2/) +* Read: [Introduction to DNS](http://coding.smashingmagazine.com/2011/05/25/introduction-to-dns-explaining-the-dreaded-dns-delay/) +* Read: [What's HTML?](http://skillcrush.com/2012/04/02/html/) + +#### More about Git + +* Read: [Recording Changes to your Git Repository](http://git-scm.com/book/en/Git-Basics-Recording-Changes-to-the-Repository) + +**Optional resources** + +* Read: [git commit](https://www.atlassian.com/git/tutorial/git-basics#!commit) +* Read: [git log aka git history](https://www.atlassian.com/git/tutorial/git-basics#!log) + + +## Release 1: Create a web page + +Now let's put that knowledge to work! We will be using [Sublime Text](http://www.sublimetext.com/) as our [text editor](http://skillcrush.com/2012/09/10/text-editor/). Review the [Perfect Workflow in Sublime Text](http://code.tutsplus.com/articles/perfect-workflow-in-sublime-text-free-course--net-27293) if you need a refresher on how to write code using Sublime. + +* **Open a new file in Sublime** +* Save the file as `index.html` in the **same directory as your copy of [USERNAME].github.io**

![Sublime save](../imgs/sublime-save.jpg) +* Add the following **HTML code** to your file:
`Hello DBC!` +* **Save the file** + +## Release 2: Save your page to GitHub + +If you are **NOT** using Mac or Windows and the GitHub App, [follow this tutorial](http://readwrite.com/2013/10/02/github-for-beginners-part-2#awesm=~oxToOt4ihQmVCP) and then skip to release 4. + +* **Open the GitHub App**![GitHub app new change](../imgs/github-app-2_save-1.jpg) +* **Type a "commit message"**

A commit message is a description of all the files and changes that are part of the "snapshot" (or commit) you are about to save. If another programmer only read the commit, they should understand what was changed (or added or deleted) and why.

![GitHub commit](../imgs/github-app-2_save-2.jpg) +* **Click on the "Commit" button**
*If you get an alert about saving credentials, choose "Always Allow"* +* **View your commit**

![GitHub commit](../imgs/github-app-2_save-3.jpg) + + +## Release 3: Push your page to GitHub + +Click on the **Sync Branch** button in the upper right corner. + +![GitHub commit](../imgs/github-app-3_push.jpg) + +## Release 4: View your site + +It's now time for the big reveal!! + +Go to **http://[USERNAME].github.io** to see your HTML page live! + +![GitHub commit](../imgs/github-page1.jpg) + +You can also see the new index.html file in your GitHub repository! + +![GitHub commit](../imgs/github-page2.jpg) + + +#### [AMAZING!](http://www.youtube.com/watch?v=ewfIvKbuRUg) + +## Release 5: Reflection + +Now you will want to practice what you've learned in this challenge (and don't worry, you'll get to go through this reflection workflow for the rest of phase 0). + +In the GitHub app (or via your terminal), go to your [USERNAME]/phase_0_unit_1 repository (that you forked in challenge 1). Clone it to your computer. Then, open the terminal and navigate to that repository. Open the repository in Sublime. You can do this by either adding sublime shortcuts to your command line or opening sublime and opening the repository from there. + +Navigate to the 3_web_basics/my_reflection.md file. Answer the questions there. Save your file, commit your changes, and sync the repo. You should be able to see your reflection on your forked repo on github.com. + +You should edit all code, reflections, etc. from your local text editor. It's bad practice to make changes from github.com. (So forget we told you to do that in the past two challenges)! + diff --git a/week_1/4_Your_Own_Website/readme.md b/week_1/4_Your_Own_Website/readme.md deleted file mode 100644 index 2c6a63c4..00000000 --- a/week_1/4_Your_Own_Website/readme.md +++ /dev/null @@ -1,63 +0,0 @@ -# U1.W1: Your website - - -## Learning Objectives -1. Wireframe a website -2. Apply your knowledge by personalizing your website -3. Illustrate your understanding of web design and user experience in your website -4. Describe and practice process of building a website - - -## Purpose -Regardless of whether design is interesting to you or not, web design matters to end users of the website and business management. It's important to know about so you can work more effectively with other teams in the organization. This process should also help you learn to separate different parts of a site (design vs. content, html vs. css, user interface vs. user experience) and learn the process of developing websites. - - -## Directions - - We're going to make your [USERNAME].github.io website truly yours. This challenge is a chance for you to customize and make the site reflect you. You will work on the `index.html` page through this challenge. - -### 1. Delve into Design - -Delve into a few of the following resources. Try to look at at least one in each section. You don't need to go crazy if you don't have the time or interest. Get an overview then get creative and put it into practice. You can also read more later. - -**Overview** -* Slides: Straight up Design -* Awesome List of links: Design resources for developers -* Read: Design is about solving problems -* Read: 6 Phases of the Web Design and Development Process -* Great List of tutorials: 10 tutorials for beginning web designers - -**Design Thinking** -* Read: Design Thinking -* Read: Design Thinking: What is that? -* Read: Design Thinking Visually - -**User Experience** -* Read: What is User Experience Design? -* Read: User Experience -* Read: User Experience Design - - -**Food for thought** -* Read: Design for performance - -### 2. Wireframing - -#### Learn - -* Read: A Beginners Guide to Wireframing -* Read: Beyond Wireframing: Real Life UX Design Process - -#### Apply - -* Create a plan for your new web page. Add, commit, and push a file with the details to Github. -* Create a wireframe of your website. You can use pen and paper or a wireframing tool. -* Take a screenshot, photo, or save the file. Add, commit, and push the file to Github. - -### 3. Code it up - -Use the plan and wireframe as a guide to make the [USERNAME].github.io `index.html` reflect you and your current skills. Get creative. Have fun. But be conscious of time. This will be a work in progress. - -###4. Reflection -Go write your reflection and answer the questions! - diff --git a/week_1/4_beginning_HTML_CSS/my_reflection.md b/week_1/4_beginning_HTML_CSS/my_reflection.md new file mode 100644 index 00000000..31d3a543 --- /dev/null +++ b/week_1/4_beginning_HTML_CSS/my_reflection.md @@ -0,0 +1,12 @@ +## 4.[Beginning HTML and CSS](4_beginning_HTML_CSS/readme.mc) Reflection + +* What makes sense to your about HTML? What doesn't? +* What seems good and bad about HTML? +* Did you have an "aha" moments or were any concepts solidified? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. + + +* I think HTML is pretty logical. I found some of the codes to be a little odd and hard to remember but I do like that you need to remember to close each code. Links were the most challenging as they seem to be the least logical. +* It allows for a ton of control which is really nice, but if you have a big site it could take ages to build and design all of it out. +* The site actually working (or failing to work at times) allowed me to validate my work which was really nice. +* I used a bit of google to try and remembers some of the tags. diff --git a/week_1/4_beginning_HTML_CSS/readme.md b/week_1/4_beginning_HTML_CSS/readme.md new file mode 100644 index 00000000..0b9b7b78 --- /dev/null +++ b/week_1/4_beginning_HTML_CSS/readme.md @@ -0,0 +1,73 @@ +# U1.W1: Beginning HTML & CSS + +## Learning Competencies +- Create a simple web page from the ground up using basic HTML tags +- Manipulate HTML elements using CSS + + +## Releases + +Everything in this challenge is within the context of the [website](../1_Get_Started/2_set_up_repo.md) you set up in the [get started](../1_Get_Started/) section. + +## Release 0: Set up folders + +* Create a `unit1_projects` folder +* Within the unit1_projects folder create an `images` folder +* Within the unit1_projects folder, create a `stylesheets` folder + + +From this point forward, all work will happen within the `unit1_projects` folder. All images should go in the `unit1_projects/images` folder and all css files should go in the `unit1_projects/stylesheets` folder. + +## Release 1. Intro to HTML + +#### a. Learn + +* Slides: [Intro to HTML](http://girldevelopit.com/assets/html-css/class1.html) + +**Optional resources** + +* [Build a simple website](http://teamtreehouse.com/library/build-a-simple-website) +* [Beginners guide to HTML and CSS](http://learn.shayhowe.com/html-css/) +* [HTML tag cheatsheat](http://skillcrush.com/wp-content/uploads/2012/06/HTML-Cheatsheet-Skillcrush.pdf) + +What other resources can you find? Share them in the resources spreadsheet in your google+ community (located in the links on the right) + +#### b. Experiment +Create a new html page in your repository called `dbc1.html` + +Add the following to `dbc1.html` (Use this to introduce yourself!) + +* Doctype, head, title, and body +* Add one heading of each level (h1-h6) +* 2-3 short paragraphs +* Some italic and bold text +* Links that open in the same window, a new window and link to an e-mail address. +* Images and an image that's also a link +* Line break +* Unordered list and an ordered list + +## Release 3: Intro to CSS + +#### a. Learn + +* Slides: [Intro to CSS](http://girldevelopit.com/assets/html-css/class2.html) + +**Optional resources** + +* [CSS Basics (styling) ](http://www.cssbasics.com/introduction-to-css/) +* [Mozilla's CSS - Getting Started](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started) (sections 1-6 if you're unfamiliar with CSS, sections 3-5 if you're familiar with CSS) +* [Hexidecimal color](http://skillcrush.com/2012/05/07/hexadecimal/) +* [Classes vs IDs](http://skillcrush.com/2013/01/28/understanding-css-classes-vs-ids/) +* [The Difference between IDs and Classes](http://css-tricks.com/the-difference-between-id-and-class/) + + +#### b. Experiment +Create a new css file in your repository called `dbc1.css` and save it to the `stylesheets/` directory. + +* Link the `dbc1.css` file to your html file using the "external" method +* Add colors, background colors or fonts of different parts of the page +* Use ids and classes to change specific elements + + +## Release 4: Reflect +On your local `phase_0_unit_1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub. diff --git a/week_1/5_HTML_CSS_solo_challenge/my_reflection.md b/week_1/5_HTML_CSS_solo_challenge/my_reflection.md new file mode 100644 index 00000000..e29fc00b --- /dev/null +++ b/week_1/5_HTML_CSS_solo_challenge/my_reflection.md @@ -0,0 +1,17 @@ +## 5. [HTML/CSS Solo Challenge](5_HTML_CSS_solo_challenge/readme.md) Reflection + +* What questions did you ask during this challnge? What resources did you find to help you answer them? +* What concepts are you having trouble with, or did you just figure something out? If so, what? +* Did you learn any new skills or tricks? +* How confident are you with each of the Learning Competencies for this challenge? +* Which parts of the challenge did you enjoy? +* Which parts of the challenge did you find tedious? + + + +* I mostly asked questions on CSS and linking as well as the different between using #'s div's and classes. Re-reading helped a lot as did, some W3C documentation. It is much more clear now. +* Definitely CSS again, I found it to be more complex than HTML but have hashed out my issues. +* Yes! I feel way more confident and don't feel that I need to rely on the resources. +* As above, I feel way more omfortable now and working through it on my own was great. +* I enjoyed the freedom to use my creativity as opposed to having very specific instructions. +* I didn't really find any of it tedious. diff --git a/week_1/5_HTML_CSS_solo_challenge/readme.md b/week_1/5_HTML_CSS_solo_challenge/readme.md new file mode 100644 index 00000000..556e1bfd --- /dev/null +++ b/week_1/5_HTML_CSS_solo_challenge/readme.md @@ -0,0 +1,85 @@ +# U1.W1: More HTML & CSS + +**THIS IS YOUR SOLO CHALLENGE FOR WEEK 1.** Please reference the [Phase 0 Handbook](https://github.com/Devbootcamp/phase_0_handbook/) for more details as to what this entails. + +## Learning Competencies +- Position HTML elements using CSS padding, borders, and + margins. +- Use HTML tags to present information on a website + + + +## Release 0: More HTML + +Everything in this challenge is within the context of the `unit1_projects` folder in your website repository. + +Think about something you want to teach people about. You will be building a webpage about that topic, so everything in this challenge should be used to teach others about that. You can go above and beyond, adding pictures, fonts, etc. At least create a page that meets the HTML and CSS requirements described in releases 0 and 1. + +#### a. Learn + +* Slides: [More HTML](http://girldevelopit.com/assets/html-css/class3.html) + +**Optional resources** + +* [An Advanced Guide to HTML and CSS](http://learn.shayhowe.com/) + +#### b. Experiment +Create a new html page in your repository called `dbc2.html` + +Add at least the following to `dbc2.html` + +* Header, content area, sidebar, and a footer using divs +* Spans + + +## Release 1: More CSS + +#### a. Learn + +* Slides: [More +CSS](http://girldevelopit.com/assets/html-css/class4.html) + +**Optional resources** + +- [Downloading CSS from a website](http://www.cssbasics.com/download-css-styles-from-a-website/) +- [Decoupling HTML from CSS](http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/) + + +#### b. Experiment +Create a new css file in your repository called `dbc2.css` and save it to the `stylesheets/` directory. + +Link the `dbc2.css` file to your `dbc2.html` file + +Add the following to `dbc2.css`: + +* Format your header, content, sidebar, and footer +* Add padding, borders, and margins +* Center your content area in the browser +* Add width and height to divs and give them ids +* Psuedo-classes for links +* Positioning +* A div that contains an image and a caption, and position the caption absolutely overtop the image. +* Float side bar and content area + + +## Release 2: Reflect +On your local `phase_0_unit_1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub. + +
+ +## Optimize your learning (Optional) +Want to dig a bit deeper into CSS? Curious about the `:hover` you added +to the CSS for links? + +#### Psuedo selectors + +##### a. Learn + +* [Psuedo selectors](http://css-tricks.com/pseudo-class-selectors/) +* [CSS3 Pseudo selectors](http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/) + +##### b. Experiment +Add an unordered list (`ul`) to your `dbc2.html` file and add at least 3 +elements to the list (`li`). Add different styles to the first and last elements +in the list only. + diff --git a/week_1/6_Get_to_know_your_group/readme.md b/week_1/6_Get_to_know_your_group/readme.md deleted file mode 100644 index 41c1a92c..00000000 --- a/week_1/6_Get_to_know_your_group/readme.md +++ /dev/null @@ -1,51 +0,0 @@ -# U1.W1: Get to know your group - - -## Learning Objectives -1. Get to know your accountability group so you feel comfortable asking them questions and going to them for help. -2. Reflect on reflections. Did you learn from someone's reflection? Is there something you learned that you didn't even realize before reading someone else's reflection? -3. Think about time management, productivity, and how you will get work done during this remote period. - -## Purpose - -Despite popular belief, most software engineers work in teams and there is a strong developer community (on the web and locally) for many technologies, including HTML, CSS, JavaScript, and Ruby. It's important to get used to sharing with each other. - - -## Directions - -### 1. Learn - -Research time management, productivity, and mindfulness. You can try some of the articles below or find your own. Try to read a bit outside your comfort zone though. Can you apply any of this to your situation? - -* The Power of Meditation -* How Mindfulness can improve productivity, focus, and work life balance -* Habits & Growth Mindset - -* Intro to Learn Ruby The Hard Way -* Pomodoro Technique - focus on one thing for 25 minutes then take a 5 minute break - -* Make it big by starting small -* Create a Habit -* Tiny Habits -* Fogg Method - -* Counterintuitive productivity -* Tricks for Getting into the Zone -* Flow - - -### 2. Email + Reflection - -Once you've know who is in your accountability group, send everyone in your group and email **and** copy it into your reflection with your: - -* name -* location -* favorite websites -* learning style -* answer to: What is your biggest time management challenge with during Phase 0? How will you combat that? What techniques will you try? - -Once you've completed the week's work, send them: -* link to your reflection file -* link to your [USERNAME].github.io site - -Once you receive someone's reflection, take a look at it and write a comment. Make sure to take a look at your reflection gist to see other people's comments! diff --git a/week_1/6_technical_blog/my_reflection.md b/week_1/6_technical_blog/my_reflection.md new file mode 100644 index 00000000..a673952c --- /dev/null +++ b/week_1/6_technical_blog/my_reflection.md @@ -0,0 +1,7 @@ +## 8. [Comparing Favorite Websites](8_technical_blog/readme.md) Reflection + +Blog url: + +Reflect on the process of researching and writing a blog post. It doesn't have to be long. Did you enjoy this? Did you get comments or views? Did you find the blog helpful to your learning? Did you find it cumbersome? Which parts did you feel best about and which did you feel less certain about? + +* I really enjoyed working on this as I was able to think about and analyze websites I visit on a daily basis. Getting a grasp of the layout is simply while analyzing design and ease of use is a bit harder to analyze. This was very helpful in that sense. diff --git a/week_1/5_Comparing_Websites/readme.md b/week_1/6_technical_blog/readme.md similarity index 56% rename from week_1/5_Comparing_Websites/readme.md rename to week_1/6_technical_blog/readme.md index 76113d3d..14f27b26 100644 --- a/week_1/5_Comparing_Websites/readme.md +++ b/week_1/6_technical_blog/readme.md @@ -1,20 +1,21 @@ # U1.W1: Your Favorite Websites -## Learning Objectives -1. Evaluate a website in terms of design and user experience -2. Compare websites to discuss what they are doing well and what they can improve on -3. Read a website's HTML and CSS -4. Determine whether a website is following best practices +## Learning Competencies +- Evaluate a website in terms of design and user experience +- Compare websites to one another to discuss the pros and cons of their approaches -## Purpose +## Summary In the same way that professors and graduate students are required to contribute through publications, developers are expected to make contributions to their field through blog posts, stackoverflow and other site answers, and giving talks. In Phase 0, you will start your contributions through blogging about cultural and technical topics that correspond to the week's topics. -##Directions +## Release 0: -1. Identify three of your favorite websites. +Identify three of your favorite websites. -2. Ask yourself: + +## Release 1: Consider the Design + +Ask yourself: * Why is this one of your favorite sites? * What area of the site is your eye drawn to when looking at the homepage? Stand back further, what area is your eye drawn to now? Is that area the most important area of the site? * How would you describe the website visually? List 5 adjectives. (i.e. "pretty", "elegant", "simple", "dark", "cluttered", "basic" etc) @@ -25,11 +26,15 @@ In the same way that professors and graduate students are required to contribute * How do you feel after being on the site for a while? (i.e. "bored", "happy", "anxious or hyper", "like I wasted a lot of time" etc) * Does the site sell anything? If so, have you purchased any of it? Why or why not? -3. Create a new html page in the `unit1_week1` folder and write a blog post analyzing the 3 sites in terms of user experience and design. Add a link to the `index.html` file for your new blog post! +## Release 2: Blog it! + +First, create a new HTML file in your [USERNAME].github.io website. Using the HTML skills you learned this week, create a blog template. What makes up a good blog form? Apply some CSS to make it pretty. + +Copy the code from your blog template to a new HTML file called `week1_technical_blog.html` in the `unit1_projects` folder. + +Write a blog post analyzing the 3 sites in terms of user experience and design. Add a link to the `index.html` file for your new blog post! Don't forget to sync/push your changes to make them live on your github.io site! -4. Reflect on the process of writing a blog post on `8_favorite_websites.md` in your reflection gist. +## Release 3: Reflect +On your local `phase_0_unit_1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub. -**Bonus** -* Get more technical. Take a look at the websites' HTML and CSS by opening the devloper tools. Does the HTML and CSS look clean? Does it follow good practices? Are you able to change the look of the site using the tools? How easy was it? -* Submit your post to HackerNews or a sub-[reddit]. What were the comments like? \ No newline at end of file diff --git a/week_1/7_cultural_blog.md b/week_1/7_cultural_blog.md new file mode 100644 index 00000000..26b174bb --- /dev/null +++ b/week_1/7_cultural_blog.md @@ -0,0 +1,25 @@ +[Week 1 Home](./) + +# U1.W1: Cultural Blog: Chefs in the Kitchen + +## Learning Competencies +- Consider DBC's culture and approach to learning +- Predict how you will react to DBC's approach + +## Release 0: Copy your Blog Template +First, create a new HTML file for your this post in your [USERNAME].github.io website. Create a new HTML file and use the date to name it `week1_cultural.html`. Copy the Code from your `blog_template`. + +## Release 1: Kitchen vs. Table +Watch [Shereef's Fireside Chat](http://vimeo.com/85001014) + +## Release 2: Write your Blog! +Based on the video, what's your take on the DBC experience? What is your impression of DBC? How do you see yourself engaging with this type of culture? +Have your expectations of DBC changed? If so, how? Are you excited to participate in this kind of learning environment? Does it make you nervous? + +Talk about what came up for you and anything you want in addition to the questions above. + + +## Release 3: Submission +Link to your blog on the index of your github.io site and sync/push your changes. + +Share your blog on the google+ community under "Blog Posts!" Read others blogs. What did you like about them? \ No newline at end of file diff --git a/week_1/8_wireframing/my_reflection.md b/week_1/8_wireframing/my_reflection.md new file mode 100644 index 00000000..5abe16dd --- /dev/null +++ b/week_1/8_wireframing/my_reflection.md @@ -0,0 +1,18 @@ +## 6. [Wireframing](6_wireframing/readme.md) Reflection + +* * What did you learn about design and user experience? +* Do you like design and user experience? Was it fun working on your site, the plan, and/or the wireframe? (If you hated it, that's OK too) + +* What questions did you ask during this challnge? What resources did you find to help you answer them? +* What concepts are you having trouble with, or did you just figure something out? If so, what? +* Did you learn any new skills or tricks? +* How confident are you with each of the Learning Competencies for this challenge? +* Which parts of the challenge did you enjoy? +* Which parts of the challenge did you find tedious? + + + +* I think a lot of what I learned from this exercise was with regards to changing my thought process when visiting a site. Thinking how they worked to design a site for a great user experience but also thinking about how specific content should be displayed. +* I did really enjoy this and it made me appreciate how important UX really is. I know have a completely different view after changing my perspective. +* I wiki'd about to find out a bit more about user experience. +* Drawing out the actual wireframe was really fun as it allowed me to get creative with my view of the site creator's hopes. diff --git a/week_1/8_wireframing/readme.md b/week_1/8_wireframing/readme.md new file mode 100644 index 00000000..faa20dc5 --- /dev/null +++ b/week_1/8_wireframing/readme.md @@ -0,0 +1,57 @@ +# U1.W1: Wireframing + +## Learning Competencies +- Explain wireframing +- Identify the benefits of wireframing +- Wireframe an existing website + + +## Summary + +Regardless of whether design is interesting to you or not, web design +matters to end users of the website and business management. It's +important to know about so you can work more effectively with other +teams in the organization. One of the first steps in creating a web page +is often to wireframe it. This process should also help you learn to separate different parts of a site (design vs. content, html vs. css, user interface vs. user experience) and learn the process of developing websites. + + +## Release 0: Intro to Design Thinking + +While designers may be "creative" or "artistic", they are also, like +software engineers, problem solvers. They just solve problems visually +instead of with code. For some of you, this may come really naturally; +for others it may not. Either is OK. + + +**Design Thinking** +* Read: [Design Thinking](http://en.wikipedia.org/wiki/Design_thinking) +* Read: [Design Thinking: What is that?](http://www.fastcompany.com/919258/design-thinking-what) +* Read: [Design Thinking Visually](http://visual.ly/what-design-thinking) + + +## Release 1: Intro to Wireframing + +#### Learn + +* Read: [A Beginners Guide to Wireframing](http://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-wireframing--webdesign-7399) +* Read: [Beyond Wireframing: Real Life UX Design Process](http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/) + +## Release 2: Apply it +For each of the websites you choose for your [comparing +websites technical blog](../8_technical_blog/) post, try to backwards engineer +their web design process. You can choose one individual page for each +site. + +Create an html page `wireframe_sites.html` in your `unit1_projects` folder. +Add the following for *each site*: + +* In a `

` tag, answer: What problem is the web page solving? What visual challenges are +there? +* Create a wireframe of the page. You can use pen and paper or a wireframing tool. +* Take a screenshot, photo, or save the file. Then upload the file to an +image sharing site. +* Add the image to your html page. + +## Release 3: Reflection +On your local `phase_0_unit_1` repo, edit the [my_reflection.md](my_reflection.md) file associated with this challenge. Commit your changes and save them to GitHub. + diff --git a/week_1/9_get_to_know_your_group/my_reflection.md b/week_1/9_get_to_know_your_group/my_reflection.md new file mode 100644 index 00000000..a69374fa --- /dev/null +++ b/week_1/9_get_to_know_your_group/my_reflection.md @@ -0,0 +1,25 @@ +## 7. [Getting to know your group](7_get_to_know_your_group/readme.md) + +Copy the email you sent to your group in this file. + + + +Take a moment to reflect on reading other people's responses regarding their fears about DBC. How did that make you feel? Did you feel better, worse, or something else all together? How has your experience this week influenced your feelings? All feelings are welcome and ok. Just take a moment to think about it and write it down. + + + +Hey everyone, + +I am Eric and I live in Williamsburg, Brooklyn, which is really fun. My favorite websites are twitter.com, youtube.com, and medium.com. My thinking style was a tie between Abstract Sequential and Concrete Random. My Vark style is Kinesthetic. + +I like to eat a lot. I also like to run a lot. Some say I have a problem. + +My main blog is at eshem.github.io and my repo is at https://github.com/eshem/phase_0_unit_1, I am still working on making it look a lot better. My wireframes are at eshem.github.io/wireframe_sites.html. + +Looking forward to meeting you guys soon. + +Best, + +Eric + +* I mostly enjoyed viewing other people's sites. I noticed that many have the same fears about DBC, which is fair and comforting. diff --git a/week_1/9_get_to_know_your_group/readme.md b/week_1/9_get_to_know_your_group/readme.md new file mode 100644 index 00000000..27e756a4 --- /dev/null +++ b/week_1/9_get_to_know_your_group/readme.md @@ -0,0 +1,33 @@ +# U1.W1: Get to know your group + + +## Learning Competencies +- Introduce yourself to your accountability group +- Describe what you learned from someone else's reflections +- Consider strategies for time management and productivity +- Design a plan for getting work done during Phase 0 + +## Summary + +Despite popular belief, most software engineers work in teams and there is a strong developer community (on the web and locally) for many technologies, including HTML, CSS, JavaScript, and Ruby. It's important to get used to sharing with each other. + + +## Release 0: Intro Email + +Once you know who is in your accountability group, send everyone in your group and email **and** edit the [my_reflection.md](my_reflection.md) file associated with this challenge in your local `phase_0_unit_1` repo,. Commit your changes and save them to GitHub. + +* Name +* Location +* Favorite websites +* Gregorc Thinking Style (Abstract Random, Abstract Sequential, Concrete Random, Concrete Sequential) +* Learning style (Visual, Aural, Kinesthetic, Multimodal) + +## Release 1: Share your work +**DOUBLE CHECK THAT YOU HAVE ISSUES ENABLED AS A FEATURE ON BOTH OF YOUR REPOSITORIES** + +Once you've completed the week's work, send them: +* link to your forked `phase_0_unit_1` repository +* link to your [USERNAME].github.io site +* link to your wireframe html page + +Once you receive someone's repository link, take a moment to review your accountability member's reflections in their various challenges. Then leave feedback for them using the instructions on ["How to Create an Issue"](https://github.com/Devbootcamp/phase_0_handbook/blob/master/coding_references/review.md). diff --git a/week_1/1_Get_Started/git_clone.md b/week_1/git_clone.md similarity index 94% rename from week_1/1_Get_Started/git_clone.md rename to week_1/git_clone.md index 235ae4cf..e17eb71b 100644 --- a/week_1/1_Get_Started/git_clone.md +++ b/week_1/git_clone.md @@ -10,7 +10,7 @@ The SSH ("Secure Shell") url is what you will use to clone your repository with You can find it at the bottom of the left sidebar on your repository page on Github. -![Clone a repo](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/1_Get_Started/imgs/github-command.jpg) +![Clone a repo](https://raw.github.com/Devbootcamp/phase_0_unit_1/master/week_1/imgs/github-command.jpg) ### Clone it! diff --git a/week_1/imgs/adding-reflection.jpg b/week_1/imgs/adding-reflection.jpg new file mode 100644 index 00000000..c9242b6e Binary files /dev/null and b/week_1/imgs/adding-reflection.jpg differ diff --git a/week_1/imgs/forked-repo.jpg b/week_1/imgs/forked-repo.jpg new file mode 100644 index 00000000..46981432 Binary files /dev/null and b/week_1/imgs/forked-repo.jpg differ diff --git a/week_1/1_Get_Started/imgs/github-app-1_clone.jpg b/week_1/imgs/github-app-1_clone.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-app-1_clone.jpg rename to week_1/imgs/github-app-1_clone.jpg diff --git a/week_1/1_Get_Started/imgs/github-app-2_save-1.jpg b/week_1/imgs/github-app-2_save-1.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-app-2_save-1.jpg rename to week_1/imgs/github-app-2_save-1.jpg diff --git a/week_1/1_Get_Started/imgs/github-app-2_save-2.jpg b/week_1/imgs/github-app-2_save-2.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-app-2_save-2.jpg rename to week_1/imgs/github-app-2_save-2.jpg diff --git a/week_1/1_Get_Started/imgs/github-app-2_save-3.jpg b/week_1/imgs/github-app-2_save-3.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-app-2_save-3.jpg rename to week_1/imgs/github-app-2_save-3.jpg diff --git a/week_1/1_Get_Started/imgs/github-app-3_push.jpg b/week_1/imgs/github-app-3_push.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-app-3_push.jpg rename to week_1/imgs/github-app-3_push.jpg diff --git a/week_1/1_Get_Started/imgs/github-command.jpg b/week_1/imgs/github-command.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-command.jpg rename to week_1/imgs/github-command.jpg diff --git a/week_1/1_Get_Started/imgs/github-page1.jpg b/week_1/imgs/github-page1.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-page1.jpg rename to week_1/imgs/github-page1.jpg diff --git a/week_1/1_Get_Started/imgs/github-page2.jpg b/week_1/imgs/github-page2.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-page2.jpg rename to week_1/imgs/github-page2.jpg diff --git a/week_1/1_Get_Started/imgs/github-repo-0.jpg b/week_1/imgs/github-repo-0.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-repo-0.jpg rename to week_1/imgs/github-repo-0.jpg diff --git a/week_1/1_Get_Started/imgs/github-repo-1.jpg b/week_1/imgs/github-repo-1.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-repo-1.jpg rename to week_1/imgs/github-repo-1.jpg diff --git a/week_1/1_Get_Started/imgs/github-repo-2.jpg b/week_1/imgs/github-repo-2.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-repo-2.jpg rename to week_1/imgs/github-repo-2.jpg diff --git a/week_1/1_Get_Started/imgs/github-repo3.jpg b/week_1/imgs/github-repo3.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/github-repo3.jpg rename to week_1/imgs/github-repo3.jpg diff --git a/week_1/imgs/repo-to-fork.jpg b/week_1/imgs/repo-to-fork.jpg new file mode 100644 index 00000000..cc2f485a Binary files /dev/null and b/week_1/imgs/repo-to-fork.jpg differ diff --git a/week_1/1_Get_Started/imgs/sublime-save.jpg b/week_1/imgs/sublime-save.jpg similarity index 100% rename from week_1/1_Get_Started/imgs/sublime-save.jpg rename to week_1/imgs/sublime-save.jpg diff --git a/week_1/readme.md b/week_1/readme.md index 9b943a71..da62bf99 100644 --- a/week_1/readme.md +++ b/week_1/readme.md @@ -1,32 +1,41 @@ # Week 1: Introduction to HTML and CSS -Welcome to Phase 0! We hope you are excited to further your knowledge and begin integrating into the developer and DBC community. Please make sure you've read through the *Phase 0 Handbook* **before** getting started with the weekly challenges. +Welcome to Phase 0! We hope you are excited to further your knowledge and begin integrating into the developer and DBC community. Please make sure you've read through the [Phase 0 Handbook](https://github.com/devbootcamp/phase_0_handbook) **before** getting started with the weekly challenges. Once you feel comfortable with the expecations for Phase 0, you can get started with the week's challenges. You should go through each directory (folder) listed below and complete the challenges and exercises in each. -#### 1. Get Started -#### 2. Beginning HTML & CSS -#### 3. Intermediate HTML & CSS -#### 4. Your website -#### 5. Comparing websites -#### 6. Get to know your group - +### How to navigate this repository +If you would like to open tabs in a new window, please either right click or hold command while you click. -**Submitting your work** -You need to submit your work through a google form (to be released) by Sunday at 11:59pm. Expect to submit your links for each of the following: - +#### 1. [Get Started](1_Get_Started) +#### 2. [Set Up Repo](2_set_up_repo) +#### 3. [Web Basics](3_web_basics) +#### 4. [Beginning HTML & CSS](4_beginning_HTML_CSS) +#### 5. [More HTML & CSS SOLO CHALLENGE](5_HTML_CSS_solo_challenge) +#### 6. [Technical Blog](6_technical_blog) +#### 7. [Cultural Blog](7_cultural_blog.md) +#### 8. [Wireframing](8_wireframing) +#### 9. [Get to know your group](9_get_to_know_your_group) -* Your new website -* Each html page created in `unit1_week1` folder -* Your reflection file -* Website plan document -* Website wireframe -* Blog post -* Links to comments you wrote on your groups reflection +## Submitting your work +You need to submit your work through on [apply.devbootcamp.com](http://apply.devbootcamp.com) by Sunday at 11:59pm. When you log in, look at your profile page. There should be a "Unit 1 Week 1 Form." There is also an extension request form. If you do not finish your work by the designated time, please complete the extension request. When you finish, you are expected to submit your work on the week submission form. -You should also copy and paste your response to each of the following -* Copy of text you wrote to your group -* Copy of your response to email questions (You'll get these this week) +Expect to submit your links for each of the following: +* Your new website ([USERNAME].github.io) +* Each html page created in `unit1_projects` folder +* Your forked `phase_0_unit_1` repository link +* Your technical and cultural blog posts (on your github.io ste) +* Your response to "getting to know your group" + +NOTE: You will have two separate repositories in Github for Unit 1: Your Github.io site and your phase_0_unit_1 repository. Most of your work will be on the [USERNAME].github.io repo, but the reflections will be submitted + +## Fetching changes from DBC's master repo +Sometimes we will make changes to the original (Devbootcamp) repository to clarify instructions or add new curriculum. You will need to "fetch" these changes from the master branch when we announce changes on the google+ community. Follow [these](https://github.com/Devbootcamp/phase_0_handbook/blob/master/fetching_changes.md) directions to do this. If you are using a windows or linux, you will need to use the command line instructions. + + +## Remember your Unit Goals! +- Give feedback for each person you paired with. *You need to submit at least 5 pieces of feedback in this unit* +- Rate at least 7 pieces of [Meta Feedback](https://socrates.devbootcamp.com/feedback) on Socrates. *You need to rate 20 pieces of feedback per unit* +- Make sure you've signed up for GPS 1.1 and 1.2 (These must be done in a session with guide. They may not be done any other way, so make sure you sign up early!) - \ No newline at end of file diff --git a/week_2/1_Chrome_Dev_Tools/dev_tools_quiz.md b/week_2/1_Chrome_Dev_Tools/dev_tools_quiz.md new file mode 100644 index 00000000..c03b712b --- /dev/null +++ b/week_2/1_Chrome_Dev_Tools/dev_tools_quiz.md @@ -0,0 +1,35 @@ +#### Include an inline screenshot of your codeschool's points from the profile page: + + + +##QUIZ +* Explain which tabs support the following actions and how. + * Realtime editing of HTML and CSS + Elements - allowing you to look at specific elements or entire pages of code and edit and save them back to re-run. Freely edit and add/remove CSS or HTML. + * Javascript Debugging + * Sources and profiles - allowing you to set a record, run scripts, and see what specifically is failing. It also allows you to run before/after tests and compare results which allows you to easily see where you're going wrong without searching through the code. + * Performance Optimization + * Timeline and network - timeline allows you to see how long it takes to load different items which allows you to see where you should put certain things in your code (chronologically). Network shows you latency and allows you to sort by size to see where things might be causing lag. PageSpeed is of course really helpful as an add-on as well, and is an optimizer. + +* What's the quick key for your OS to spawn the Dev Tools inspector? +* cmd + option + I + +* Go to http://www.postmachina.com/ and analyze and tweak this nicely designed page. + * What is the current background color for the page? (Surprisingly, it's not just black!) + * #0b0f11 + * Tweak the background color to white. + * Tweak the height of the side bar that contains the logo. Shrink it down to 85px. + * Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead. + * Now take a screenshot of your new (and maybe not so improved) design. It should match this screenshot: http://postimg.org/image/5ak1jkpl5/ + * Upload your own image to the imgs directory in the `1_Chrome_Dev_Tools` directory. It should match the image above. The last nav link in the image above is black because the mouse was hovering there when the screenshot was taken. Do the same, and don't take a screenshot of your whole desktop, just the browser window. (This is part of the challenge.) + +* For the postmachina website, why can't you tweak the color of the text "The most important things are not things"? Please explain. + +* Go to www.ticketswizard.com and analyze the page. + * What is the largest image on the website? + the largest image is http://www.ticketswizard.com/Images/Catalog/92624182-c482-4a35-8da2-4fbf2f502e94_Large_Large.png + * Explain how you would find out this information, and list the URL of offending image here and how big it is. + * if you inspect the page and go to the developer tools > network tab > record > reload page and sort by size. The link for the 316k image is shown above. + +* Test the www.ticketswizard.com website with google's [PageSpeed Insights](http://www.ticketswizard.com/). (You can also download the chrome plugin). What is the easiest thing to change to optimize the website? How many kilobytes of data can be eliminated? + Optimizing images would be easiest and save most space. 'Optimize the following images to reduce their size by 885.9KiB (39% reduction).' diff --git a/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 10.47.54 PM.png b/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 10.47.54 PM.png new file mode 100644 index 00000000..aaab2c88 Binary files /dev/null and b/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 10.47.54 PM.png differ diff --git a/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 6.31.35 PM.png b/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 6.31.35 PM.png new file mode 100644 index 00000000..449bc45b Binary files /dev/null and b/week_2/1_Chrome_Dev_Tools/imgs/Screen Shot 2014-05-25 at 6.31.35 PM.png differ diff --git a/week_2/1_Chrome_Dev_Tools/imgs/readme.md b/week_2/1_Chrome_Dev_Tools/imgs/readme.md new file mode 100644 index 00000000..258c6581 --- /dev/null +++ b/week_2/1_Chrome_Dev_Tools/imgs/readme.md @@ -0,0 +1 @@ +## Add your images to this directory! \ No newline at end of file diff --git a/week_2/1_Chrome_Dev_Tools/my_reflection.md b/week_2/1_Chrome_Dev_Tools/my_reflection.md new file mode 100644 index 00000000..77f234ca --- /dev/null +++ b/week_2/1_Chrome_Dev_Tools/my_reflection.md @@ -0,0 +1,12 @@ +# U1.W2: Chrome Dev Tools Challenge Reflection + +* Describe the Document Object Model? What about it makes sense to you? What doesn't? What seems good and bad about it? +* How did using Chrome Web Tools to look at your site and a wordpress.com site compare? +* Did you find Chrome Web Tools fun, helpful, or a pain to work with? +* Did you have an "aha" moments or were any concepts solidified? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. +* + +* DOM allows you to make real time changes to webpages via your browser. It is also very useful in debugging and increasing optimization, which would be far more complicated without DOM. It makes sense as one should have a way to dynamically update pages and debug in real time. I didn't realize you could do this for sites that were not yours, which is really cool. +* Wordpress was far more complicated probably due to all of the scripts. There were a bunch of meta tags as well. However, I don't think that it really disables the use of web tools. +* Editing inreal time was really nice and an aha moment, as I have been thinking about something that would allow you to do that. diff --git a/week_2/1_Chrome_Dev_Tools/readme.md b/week_2/1_Chrome_Dev_Tools/readme.md new file mode 100644 index 00000000..2a8be695 --- /dev/null +++ b/week_2/1_Chrome_Dev_Tools/readme.md @@ -0,0 +1,46 @@ +[Week 2 Home](../) + +# U1.W2: Chrome Dev Tools + +## Learning Competencies +- Navigate and edit a web page's HTML and CSS elements using the inspector +- Explain what the DOM is and how it relates to CSS and HTML +- Identify images and other page elements that cause slow performance +- Use Chrome Devtools to manipulate elements on the DOM + + +## Summary +Before starting this challenge, you will want to do a bit of research on the DOM. Read the following Resources before beginning. +- [What's the DOM?](https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction) +- [DOM](http://skillcrush.com/2012/10/17/dom-document-object-model/) + +In this challenge, you'll be diving into Chrome DevTools. Inside the DevTools inspector window is an inner world of data that is communicated between the browser and server. These tools are invaluable for you as a developer and getting comfortable with them will help optimize your HTML and CSS editing, javascript debugging, and site's performance. + +We'll be focusing primarily on real-time HTML and CSS editing in this challenge and dip our toes into using the tools to identify page elements that slow down performance and page loading. + +## Release 0: Take [Code School's DevTools course](http://discover-devtools.codeschool.com/) + +Focus on chapters 1,2, and 5. Follow along with the video, and take the quizzes at the end of each chapter (quiz 5.2 deals with JavaScript, so it is not mandatory). You'll want to create an account with code school so you can accumulate badges and credits for the chapters you complete. There are also questions in the quiz that will explore the concepts and tools introduced in those chapters. + +Take the time to skim the other chapters. You'll be diving into JavaScript next week, and although the material covering JS (chapters 3 and 4) is a bit advanced, it provides great exposure to JavaScript in the context of the the DevTools console. + + +## Release 1: Complete the [Dev Tools Quiz](dev_tools_quiz.md) +Take a screenshot of your code school points (They appear on the right of your Code School profile page), add the file to your imgs directory in the `1_Chrome_Dev_Tools` directory, and include the image in the [dev_tools_quiz.md](dev_tools_quiz.md) file. + + +## Release 2: Experiment + +Play with changing the CSS of your github.io website using Chrome Web Tools. + +Then, visit any blog on [wordpress.com](http://www.wordpress.com) or create your own. Use the Chrome Web Tools to take a peek into the site. How does it differ from your github.io site's html and css? + + +## Release 3: Reflect +Go to your [Reflection file](my_reflection.md) to write your reflection - include answers to the questions in the file in addition to the [reflection guidelines](https://github.com/Devbootcamp/phase_0_handbook/blob/master/coding_references/reflection_guidelines.md). + +## Release 4: Sync and Submit! + +###Resources +- [Pagespeed Insights](https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en) +- [Treehouse Chrome Web Tools](http://blog.teamtreehouse.com/learn-to-use-the-chrome-devtools-on-treehouse) \ No newline at end of file diff --git a/week_2/2_Intermediate_HTML_CSS/my_reflection.md b/week_2/2_Intermediate_HTML_CSS/my_reflection.md new file mode 100644 index 00000000..a902684f --- /dev/null +++ b/week_2/2_Intermediate_HTML_CSS/my_reflection.md @@ -0,0 +1,16 @@ +# U1.W2: Intermediate HTML and CSS Reflection + +* What do you think about web standards? Are they good or bad? +* Does the standard structure make sense to you? Why or why not? +* Do you like the new HTML5 elements, such as `

`, `footer`, and `nav`? Why or why not? +* Why is reset.css necessary? +* What browsers have you used? Did you ever notice that sites looked different in different browsers? Do you think it's good or bad that they do? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. +* + +* I really like the new web standards, its always funny being new with something as the old style just seems so illogical. I think they make things a lot easier, which is proven by the div-aster example used in the GDI slides. +* It makes sense and is pretty logical, so I am a fan. It allows you to label things accordingly without the requirement of a ton of divs which is nice. +* Similar to above, I think it makes sense. +* reset.css is necessary as there are so many different browsers with different default settings, and adjusting your code accordingly would simply take too much time. By having this, you're essentially creating a blank slate to apply your style to. +* I have used chrome, firefox, ie, and safari. Very rarely do I see a difference these days but I do remember sometimes seeing one with old IE at work. It would be nice if they all appeared the same. +* I used a little W3 schools for hover and for @font. diff --git a/week_2/2_Intermediate_HTML_CSS/readme.md b/week_2/2_Intermediate_HTML_CSS/readme.md new file mode 100644 index 00000000..be61e493 --- /dev/null +++ b/week_2/2_Intermediate_HTML_CSS/readme.md @@ -0,0 +1,56 @@ +[Week 2 Home](../) + +# U1.W2: Intermediate HTML & CSS + +## Learning Competencies +- Identify and use web standards, semantic mark up, and HTML5 + + +## Summary + +We think of the web and websites as mostly static. They look the way they look. But it's really more complicated than that. Web designers and developers spend a lot of time thinking about how to make web pages usable in all the possible formats (phones, tablets, web) while keeping them maintainable (i.e. not taking a billion years to make small changes). The WC3 makes changes to HTML and CSS every bunch of years, so they think about how the language itself makes things easier or harder. You should start thinking about these things too. + +**Everything in this challenge is within the context of the `unit1_projects` folder in your [USERNAME].github.io repository.** + + +## Release 0: Research + +Do some research into standard practices of web design, reset css, and HTML5. Use the links below *and* look for resources on the web. If you find good ones, share them with your cohort in the Google+ community! + +* Slides: [Structure standards and HTML5](http://girldevelopit.com/assets/intermediate-html-css/class1.html#/17) +* Read: [HTML5 and the document outlining algorithm](http://web.archive.org/web/20120627103207/http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/) + + +## Release 1: Apply +Download the [practice files](http://girldevelopit.com/assets/intermediate-html-css/class1.zip). Unzip the folder into your `unit1_projects` folder. + +- Add reset.css to your index.html file. What happens? +- Update the header links to jump to sections +- Make links change color on hover +- Change the font (@fontface) for elements on the site. +- Change some elements to semantic HTML5 elements (i.e. header, section, etc) + +## Release 2: Reflect +Answer the questions in your [my_reflection.md](my_reflection.md) file. + +## Release 3: Commit and sync/push your changes! +Make sure you can see all of your changes on your github.io site! + + +## Optimize Your Learning (Optional) +#### Psuedo elements +##### a. Learn + +- [:before and :after psuedo +elements](https://web.archive.org/web/20140315100620/http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/) +- [Amazing things psuedo elements can +do](http://css-tricks.com/pseudo-element-roundup/) +- [Icon Fonts are Awesome](https://css-tricks.com/examples/IconFont/) +- [Why and How to use Icon +Fonts](http://www.vanseodesign.com/web-design/icon-fonts/) + +##### b. Experiment +Head to [FontAwesome](http://fontawesome.io/) and look around the +documentation. Then add the font awesome css to your `dbc2.html` file +and play with using the icons! + diff --git a/week_2/3_Responsive_Web_Design/my_reflection.md b/week_2/3_Responsive_Web_Design/my_reflection.md new file mode 100644 index 00000000..00c0bf87 --- /dev/null +++ b/week_2/3_Responsive_Web_Design/my_reflection.md @@ -0,0 +1,12 @@ +# U1.W2: Responsive Design Reflection + +* What is responsive web design? Do you like it? Do you think it's a good practice? Why or why not? +* How do you think smartphones and tablets have changed web design? How do you think new technology will change web design in the future? +* How do you think visually impaired people use the web? Can they? Should we design and development for them? +* What ideas and concepts have resonated with you when learning about the web and design? What seems stupid or doesn't make sense? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. + +* I think responsive web design is brilliant. It seems really illogical to maintain sites for different deivces (as there are so many these days) as well as the fact that people like to resize sites as the wish, without ruining the integrity of the page. +* Smaller devices have forced pretty much all sites to move to this method, as a 'mobile' site doesn't cut it anymore. People are using tablets as their main devices and you therefore want to ensure they have the expeience of a full website. I think sites will only get more responsive as time goes on. +* I would imagine there are browser settings along with auditory tools to help with this. We should develop to ensure they can have an equally as enjoyable browsing experience. +* Mobile sites, ie targeted sites that are stripped out don't really seem like a wise decision anymore. Most browsing devices are advanced enough to have a bit of an upgrade on these sites. diff --git a/week_2/3_Responsive_Web_Design/readme.md b/week_2/3_Responsive_Web_Design/readme.md new file mode 100644 index 00000000..92a688d2 --- /dev/null +++ b/week_2/3_Responsive_Web_Design/readme.md @@ -0,0 +1,58 @@ +[Week 2 Home](../) + +# U1.W2: Responsive Web Design + +## Learning Competencies +- Describe responsive design +- Determine whether responsive design is good or bad practice + + +## Summary + +We think of the web and websites as mostly static. They look the way +they look. But it's really more complicated than that. Browsers and +operating systems make things look different. Then, smart phones arrived +and made everything crazy. Web designers and developers spend a lot of +time thinking about how to make web pages usable in all the possible +formats (phones, tablets, web) while keeping them maintainable (i.e. not +taking a billion years to make small changes). Responsive design is one +of the ways developers have created to make sites usable, maintable, and +adaptable to new devices and browsers. + +**Everything in this challenge is within the context of the `unit1_projects` folder in your website repository.** + +## Release 0: Research + +Look into responsive web design. What is it? Why is it used? +*You do not need to go through all these resources. We'd recommend either going through the first two (slide intro, read beginners) OR the Treehouse tutorial.* + +- Slides: [Introduction to Responsive Web Design and Compatability](http://girldevelopit.com/assets/intermediate-html-css/class4.html) +- Read: [Beginners guide to responsive web design](http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design) +OR +- Make: [Treehouse: Build a Responsive Website](http://teamtreehouse.com/library/build-a-responsive-website) + +Additional required resources: +- Slides: [Web Accessibility](http://girldevelopit.com/assets/web-accessibility/index.html) +- Read: [Change your browsers user agent](http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/) + + +## Release 1: Apply + +Using either a new html page in the `unit1_projects` folder or [practice files](http://girldevelopit.com/assets/intermediate-html-css/class4.zip) unzipped into the `unit1_projects` folder, try to make your page more responsive. + +How does it look when +- on your phone +- on a tablet +- on really wide screen +- resized really small +- the user agent is changed in your browser + +You can try using [QuirkTools](http://quirktools.com/screenfly) to see a site in multiple browsers. + +## Release 2: Reflect +Reflect on your learning by answering the questions in the [reflection](my_reflection.md) file. + +## Release 3: Commit and sync/push your changes! +Make sure you can see all of your changes on your github.io site! + + diff --git a/week_2/4_Your_Own_Website_Solo_Challenge/my_reflection.md b/week_2/4_Your_Own_Website_Solo_Challenge/my_reflection.md new file mode 100644 index 00000000..21113ed8 --- /dev/null +++ b/week_2/4_Your_Own_Website_Solo_Challenge/my_reflection.md @@ -0,0 +1,17 @@ +# U1.W2: Design, User Experience, and creating your website Reflection + +My Website url: + +Discuss the following: +* What did you learn about design and user experience? +* Do you like design and user experience? Was it fun working on your site, the plan, and/or the wireframe? (If you hated it, that's OK too) +* What was your process? What worked and didn't work? +* What would you like to add or change about the site next? +* Was it difficult to apply the material you learned? Did you find anything in your research you thought was super cool? +* Did you find any resources on your own that helped you better understand a topic? If so, please list it. + +* I learned a lot about UX especially in terms of how big of an impact planning experience is on user retention and ease of use. I now see why UX is such a large topic. Design and UX are very closely intertwined, while being an expert in 1 doesn't necessarily make you an expert in the other. Good developers need to have skills in both to plan nice, easy to use apps. +* I like UX, while design isn't exactly my favorite. I don't mind it, but thinking through how someone uses a site is more exciting to me than planning how it actually looks. +* I looked at some sites I liked and planned my wireframe from there. This allowed me to get some inspiration and then develop my own idea. +* The site still looks pretty bad in terms of CSS, so I'd like to potentially add some margin, border, and padding to make it look a bit better. +* I didn't find it very difficult, however I did use a lot of W3 to remind myself of certain things in terms of CSS. diff --git a/week_2/4_Your_Own_Website_Solo_Challenge/readme.md b/week_2/4_Your_Own_Website_Solo_Challenge/readme.md new file mode 100644 index 00000000..3826a626 --- /dev/null +++ b/week_2/4_Your_Own_Website_Solo_Challenge/readme.md @@ -0,0 +1,78 @@ +[Week 2 Home](../) + +# U1.W2: Your website (Solo Challenge) + + +## Learning Competencies +- Illustrate your understanding of web design and user experience in your website +- Describe and practice process of building a website + + +## Summary + +**THIS IS YOUR SOLO CHALLENGE FOR WEEK 2.** Please reference the [Phase 0 Handbook](https://github.com/Devbootcamp/phase_0_handbook/) for more details as to what this entails. + +Regardless of whether design is interesting to you or not, web design matters to end users of the website and business management. It's important to know about so you can work more effectively with other teams in the organization. This process should also help you learn to separate different parts of a site (design vs. content, html vs. css, user interface vs. user experience) and learn the process of developing websites. + + +## Release 0: Delve into Design + +We're going to make your [USERNAME].github.io website truly yours. This challenge is a chance for you to customize and make the site reflect you. You will work on the `index.html` page through this challenge. + +You've already read about Design Thinking and Wireframing. Let's go a bit deeper. + +Delve into a few of the following resources. Try to look at at least +one in each section. *You don't need to go crazy* if you don't have the time or interest. Get an overview then get creative and put it into practice. You can also read more later. + +**Overview** +- Slides: [Straight up Design](https://speakerdeck.com/jenmyers/straight-up-design) +- Awesome List of links: [Design resources for developers](https://gist.github.com/jenmyers/7354863) +- Read: [Design is about solving problems](http://www.smashingmagazine.com/2011/08/24/design-solving-problems/) +- Read: [6 Phases of the Web Design and Development Process](http://www.idesignstudios.com/blog/web-design/phases-web-design-development-process/#.UxuuUuddUtU) +- Great List of tutorials: [10 tutorials for beginning web designers](http://code.tutsplus.com/articles/10-hand-picked-tutorials-for-beginning-web-designers--net-9341) + +**User Experience** +- Read: [What is User Experience Design?](http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/) +- Read: [User Experience](http://en.wikipedia.org/wiki/User_experience) +- Read: [User Experience Design](https://github.com/Devbootcamp/phase_0_unit_1/edit/master/week_1/creative_challenge/readme.md) + + +**Food for thought** +- Read: [Design for performance](https://speakerdeck.com/lara/design-for-performance) + +## Release 1: Review Wireframing + +#### Refreshers +You should have already read the below, but here are the links if you +want to review. + +- Read: [A Beginners Guide to Wireframing](http://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-wireframing--webdesign-7399) +- Read: [Beyond Wireframing: Real Life UX Design Process](http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/) + +## Release 2: Wireframe your Site +Create a `my_wireframe.html` file in your `unit1_projects` folder (This folder is in your [USERNAME]github.io repository NOT the `phase_0_unit_1` repository). + +- Create a plan for your new web page and put the plan into your html +file. Add, commit, and push a file with the details to Github. +- Create a wireframe of your website. You can use pen and paper or a wireframing tool. +- Take a screenshot, photo, or save the file. Upload the file to an +image sharing service. +- Add the image to your html file. Commit and push the file to Github. + +## Release 3: Code it up + +Use the plan and wireframe as a guide to make the [USERNAME].github.io +`index.html` and corresponding css files reflect your current skills. Make sure you commit +and push all your html changes to Github. + +*Remember: you can open an html file in a browser to see changes as you +go* + +Get creative. Have fun. But be conscious of time. This will be a work in progress. + +## Release 4: Reflect +Go write your [reflection](my_reflection.md) and answer the questions! + +## Release 5: Commit and sync/push your changes! +Make sure you can see all of your changes on your github.io site! + diff --git a/week_2/5_Think_about_time/my_reflection.md b/week_2/5_Think_about_time/my_reflection.md new file mode 100644 index 00000000..d2034f05 --- /dev/null +++ b/week_2/5_Think_about_time/my_reflection.md @@ -0,0 +1,12 @@ +# U1.W2: Thinking About Time Reflection + +* What is your biggest time management challenge with during Phase 0? +* How will you combat that? +* What techniques will you try? +* What is your overall plan for Phase 0? +* + +* I think the biggest challenge for me is balancing prep with my current job. While I am very dedicated to my prep work, its a balance of finding the time after work and getting used to having another actiivity to worry about and focus. After starting at a computer all day, its a challenge to do the prep work. +* I combat it by seeing the value in the prep work and actually enjoying what I am working on it, which is not always the case in my other obligations. +* I am going to try the pomodoro technique as I believe it has a good balance of being hyperfocused and having a break. This allows you to revitalize and take action again. I really do think this is going to help. +* My overall plan is to dedicate at least an hour a day to the work, along with a few days of several hours. This keeps me engaged with my prep and also ensures that I don't leave it all until the last minute. I think this will help me in getting used to doing homework again, helpful for the prep and the upcoming course. diff --git a/week_2/5_Think_about_time/readme.md b/week_2/5_Think_about_time/readme.md new file mode 100644 index 00000000..56345fcc --- /dev/null +++ b/week_2/5_Think_about_time/readme.md @@ -0,0 +1,41 @@ +[Week 2 Home](../) + +# U1.W2: Thinking about Time + + +## Learning Competencies +- Research time management, productivity +- Design a plan for getting work done during Phase 0 +- Explain "Time Boxing" and describe how to use it + +## Summary +Remote learning is challenging, especially if you prefer to learn with others. In this challenge you will do some research on time management, productivity, and mindfulness so you can design a plan for learning during Phase 0. + +Try some of the articles below or find your own. Try to read a bit outside your comfort zone though. Can you apply any of this to your situation? + +## Release 0: Research +Research Time Management, Productivity, and Mindfulness using a selection of the following (or other) resources. + +- [The Power of Meditation](http://blog.bufferapp.com/how-meditation-affects-your-brain) +- [How Mindfulness can improve productivity, focus, and work life balance](http://www.productivityninja.co.uk/getting-things-done-and-the-mindful-productivity-ninja/) +- [Habits & Growth Mindset](http://blog.bufferapp.com/the-habits-of-successful-people-they-have-a-growth-mindset) + +- [Intro to Learn Ruby The Hard Way](http://ruby.learncodethehardway.org/book/intro.html) +- [Pomodoro Technique - focus on one thing for 25 minutes then take a 5 minute break](http://pomodorotechnique.com/) + +- [Make it big by starting small](http://blog.bufferapp.com/make-it-big-by-starting-small) +- [Create a Habit](http://www.youtube.com/watch?v=C8XG02das-A) +- [Tiny Habits](http://www.youtube.com/watch?v=AdKUJxjn-R8) +- [Fogg Method](http://www.foggmethod.com/) + +- [Counter-intuitive productivity](http://paidtoexist.com/counterintuitive-productivity/) +- [Tricks for Getting into the Zone](http://www.themuse.com/advice/the-best-tricks-for-getting-in-the-zone-at-work) +- [Flow](http://en.wikipedia.org/wiki/Flow_(psychology)) + + +## Release 2: Reflect + Email +Answer the questions in your [reflection file](my_reflection.md) + +## Release 3: Email your Accountability Group +Send an email to your accountability group with your reflection. + diff --git a/week_2/6_technical_blog.md b/week_2/6_technical_blog.md new file mode 100644 index 00000000..eda91017 --- /dev/null +++ b/week_2/6_technical_blog.md @@ -0,0 +1,39 @@ +[Week 2 Home](./) + +# U1.W2: Technical Blog + +## Learning Competencies +- Compare CSS concepts to determine the differences +- Explain how and when to use CSS concepts + + +## Summary: +Writing blogs on technical subjects is something that will help you solidify your learning and start getting integrated in the community. + +## Release 0: Create your blog file +In your [USERNAME].github.io site, create a new HTML file and use the date to name it `week2_technical.html`. Copy the code from your `blog_template.html`. + +## Release 1: Select a Topic +Research one of the following topics: + +- What is the difference between Margin, Border, and Padding? +- What are the best practices associated with using classes vs. ids? +- What are the differences between relative, absolute, and fixed positioning? +- What does it mean to display inline vs inline blocks? + +## Release 2: Blog! +Write a blog post that teaches others how and when to use each thing. There is no length requirement, but it should show off the knowledge you gained this week. You should show examples of code and screen shots to help teach others! + +**HINT:** Intend your blog for a non-technical audience. Imagine explaining to a non-technical friend, for instance. Try to take a person step-by-step through understanding one of the topics above. + + +## Release 3: Publish +Link to your blog on the index of your site and sync/push your changes. + +Make sure the index of your site is maintained, nice, and professional. This is your face in the online community, so make it nice! + +## Release 4: Share! + +Share your blog on the google+ community under "Blog Posts!" Read others and see if you agree or disagree. Start a discussion on this topic. Consider sharing your blog post on Reddit as well. + + diff --git a/week_2/7_cultural_assignment.md b/week_2/7_cultural_assignment.md new file mode 100644 index 00000000..2606421a --- /dev/null +++ b/week_2/7_cultural_assignment.md @@ -0,0 +1,23 @@ +[Week 2 Home](./) + +# U1.W2: Cultural Assignment + +## Learning Competencies +- Practice sharing vulnerability with the people in your cohort +- Identify your biggest fear +- Describe what you would tell your friend if they shared a fear with you. + +## Release 0: Consider the question: +**What scares you the most about being at DBC?** + +## Release 1: Email your cohort +Write an email to your cohort using your local cohort mailing list (available on your cohort page in Socrates under the name) that answers this question. Use the subject "Cultural Assignment" if you are the first person. Everyone should reply to the original thread. +If you are the second or later, be sure to **REPLY ALL** with your response. Be sure to do this by **Wednesday**. + +## Release 2: Reply to your cohort-mates +Starting **Thursday**, take a look at your cohort-mates responses and choose one to respond to. Pretend your best friend is saying that to you. How would you respond? Make sure to direct your response to that person. Reply all to the original thread with your response. + +## Release 3: Read your cohort-mates' responses! + +## Release 4: Submit +You'll be asked to submit your responses on the weekly submission form. diff --git a/week_2/8_gps1_1/gps1.1.css b/week_2/8_gps1_1/gps1.1.css new file mode 100644 index 00000000..67709be3 --- /dev/null +++ b/week_2/8_gps1_1/gps1.1.css @@ -0,0 +1,19 @@ +