Hey Gang,
This Thursday, Docusign is having an open house. This would be a great opportunity to meet hiring managers at a great company. Your instructors Danny and Aaron currently work there. Actually, they will be teaching Thursday and going to the open house after. Hope it works out for you guys to go!
On a logistics note, the code in our Seahawks repository is updated. It is our commitment to have this updated during or immediately after class so you can review what we did in class, even if you aren't there. We will start by downloading the zip (lower right) at the beginning of every class to ensure that everyone is on the same page.
Thanks for sticking with the class, I know students and instructors alike are very busy during the semester. I hope everyone is finding it beneficial.
Regards,
Derek
Monday, June 16, 2014
Monday, May 19, 2014
JSON and JQuery
Hey Gang,
Our updated project source code is located here. Some of the recent changes have been adding normalize.css, data.js and JQuery to our project.
If you remember from a theory Monday class, normalize.css makes cross browser compatibility much easier. Take our word for it, it will save us many headaches down the road.
Data.js is the data that we are going to use for the inventory of our website. It is actually just a JSON blob assigned to the variable 'inventory'. We will be able to use this blob of data for keeping track of the inventory on our website. We might create a shopping cart JSON blob later. Try out JSON Lint to create some JSON if you don't have practice. This data format maps DIRECTLY to Javascript objects and is a big part of object oriented javascript, a pretty hot job skill of late.
JQuery is going to make our javascript worlds cleaner, easier to understand overall a whole lot cooler. Mondays class will dig into JQuery a little further.
Hope to see you all in class!
Our updated project source code is located here. Some of the recent changes have been adding normalize.css, data.js and JQuery to our project.
If you remember from a theory Monday class, normalize.css makes cross browser compatibility much easier. Take our word for it, it will save us many headaches down the road.
Data.js is the data that we are going to use for the inventory of our website. It is actually just a JSON blob assigned to the variable 'inventory'. We will be able to use this blob of data for keeping track of the inventory on our website. We might create a shopping cart JSON blob later. Try out JSON Lint to create some JSON if you don't have practice. This data format maps DIRECTLY to Javascript objects and is a big part of object oriented javascript, a pretty hot job skill of late.
JQuery is going to make our javascript worlds cleaner, easier to understand overall a whole lot cooler. Mondays class will dig into JQuery a little further.
Hope to see you all in class!
Friday, April 18, 2014
Thursday Fun
Thanks to everyone who made it yesterday. I wish things had gone smoother, but we will get GitHub ironed out so hopefully next Thursday we can get back to building the website.
The code that we did do in class is posted below:
nav, header{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
nav, header{
display: block;
}
header {
background-image: url(../images/12th-man.jpg);
}
nav {
background-color: black;
height: 30px;
text-align: center;
}
nav ul {
padding-top: 7px;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
Remember not to group all of the individual nav items for now. It will make sense as we add more things to our web page. Change some of the above values in your own code so you can see which items are affected on the page.
I also shared a Google Drive folder containing the images with everyone (the one referenced as the background-image for the header and one more we will use). If you did not get an email letting you know that a folder has been shared with you, send an email or post something here and we will get you a copy.
Thanks again everyone, see you next week!
The code that we did do in class is posted below:
nav, header{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
nav, header{
display: block;
}
header {
background-image: url(../images/12th-man.jpg);
}
nav {
background-color: black;
height: 30px;
text-align: center;
}
nav ul {
padding-top: 7px;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
Remember not to group all of the individual nav items for now. It will make sense as we add more things to our web page. Change some of the above values in your own code so you can see which items are affected on the page.
I also shared a Google Drive folder containing the images with everyone (the one referenced as the background-image for the header and one more we will use). If you did not get an email letting you know that a folder has been shared with you, send an email or post something here and we will get you a copy.
Thanks again everyone, see you next week!
Sunday, April 6, 2014
CSS Intro
In our CSS intro, we will learn how to color various elements with CSS.
Copy the following HTML and color h1 elements red and p elements blue. Color li elements green.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Most important page ever!</h1>
<p>Here are the awesome languages we are going to learn.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
Friday, March 28, 2014
Start of your Website
The code we worked in class on 3/27 is shown below. This will be the foundation that we will be building off of for the rest of the semester. Make sure to save your code somewhere for now that you can get at it and keep adding to it week after week. We are working on an online solution for you, more details to come.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Seahawks Merch</title>
</head>
<body>
<header>
<div>
<h1>We are 12</h1>
<div>
<input type="text" />
<button>shopping cart</button>
</div>
</div>
</header>
<nav>
<ul>
<li><a href="#">Mens</a></li>
<li><a href="#">Womens</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Jerseys</a></li>
<li><a href="#">Accesseries</a></li>
<li><a href="#">T-Shirts</a></li>
<li><a href="#">Sweatshirts</a></li>
<li><a href="#">Hats</a></li>
</ul>
</nav>
<section>
</section>
<section>
<ul>
<li>
<img src="" />
<h3>Shop Mens</h3>
</li>
<li>
<img src="" />
<h3>Shop Womens</h3>
</li>
</ul>
</section>
<footer>
<div>
<h2>Check out our fans!</h2>
</div>
</footer>
</body>
</html>
Hopefully you can write and understand the mark up above. If you have any problems don't forget to GTS (Google That S***). Some people have been using Code Academy and W3Schools to learn more about some of the tags and attributes. Those are both good places to go through some tutorials and learn extra on your own. I also heard that Code Academy has an app you can download so you can practice on your commute.
Have a great Spring Break. Looking forward to seeing everyone the following week.
Tuesday, March 25, 2014
HTML tags and study resources
Hey Gang,
We have been digging into HTML tags lately. You are going to learn this stuff much better if you practice. There is a great tutorial on CodeAcademy.com that has great exercises for HTML and CSS. W3Schools also is a great resource, here is their HTML and CSS exercises.
Remember that you have to close every tag you open and that you can 'nest' HTML. HTML elements can each have attributes.
So far in class, we have learned the following tags. ALL of these get 'nested' between the <body> and </body> tags (see below):
Paragraph:
<p>this is a paragraph</p>
Unordered list:
<ul>
<li>ul stands for 'unordered list'</li>
<li>li stands for 'list item'</li>
<li>li elements are 'nested' inside the ul</li>
<li>li elements have a bullet point in front of them by default</li>
</ul>
Ordered list:
<ol>
<li>ol is an ordered list. There will be numbers in front of each li, list item</li>
</ol>
Table:
A table stores data similar to Microsoft Excel. You can have as many table rows (tr) as you want, and those rows can contain as many table data (td) that you want.
<table>
<tr>
<td>row 1 - cell 1</td>
<td>row 1 - cell 2</td>
<tr>
<tr>
<td>row 2 - cell 1</td>
<td>row 2 - cell 2</td>
</tr>
</table>
It is always good to review the basic HTML structure:
<html>
<head>links to other documents and settings go in here</head>
<body>
<p>EVERYTHING you see on an HTML page goes inside the body tag</p>
</body>
</html>
Some very important tags that we haven't learned yet are:
Anchor links - This is what runs the interwebs!
Images - This is what makes the interwebs look pretty!
Practice makes perfect with HTML, make sure get as much exposure as you can!
We have been digging into HTML tags lately. You are going to learn this stuff much better if you practice. There is a great tutorial on CodeAcademy.com that has great exercises for HTML and CSS. W3Schools also is a great resource, here is their HTML and CSS exercises.
Remember that you have to close every tag you open and that you can 'nest' HTML. HTML elements can each have attributes.
So far in class, we have learned the following tags. ALL of these get 'nested' between the <body> and </body> tags (see below):
Paragraph:
<p>this is a paragraph</p>
Unordered list:
<ul>
<li>ul stands for 'unordered list'</li>
<li>li stands for 'list item'</li>
<li>li elements are 'nested' inside the ul</li>
<li>li elements have a bullet point in front of them by default</li>
</ul>
Ordered list:
<ol>
<li>ol is an ordered list. There will be numbers in front of each li, list item</li>
</ol>
Table:
A table stores data similar to Microsoft Excel. You can have as many table rows (tr) as you want, and those rows can contain as many table data (td) that you want.
<table>
<tr>
<td>row 1 - cell 1</td>
<td>row 1 - cell 2</td>
<tr>
<tr>
<td>row 2 - cell 1</td>
<td>row 2 - cell 2</td>
</tr>
</table>
It is always good to review the basic HTML structure:
<html>
<head>links to other documents and settings go in here</head>
<body>
<p>EVERYTHING you see on an HTML page goes inside the body tag</p>
</body>
</html>
Some very important tags that we haven't learned yet are:
Anchor links - This is what runs the interwebs!
Images - This is what makes the interwebs look pretty!
Practice makes perfect with HTML, make sure get as much exposure as you can!
Friday, March 21, 2014
Here goes!
Hey Gang,
Here goes Nerds Who Care spring semester, 2014. This blog will replace http://nwc2013.blogspot.com/
We are starting our second semester at Yearup.org in Belletown. We have a great group of enthusiastic students and are looking forward to another semester of embracing our inner nerd.
Muhalo!
Here goes Nerds Who Care spring semester, 2014. This blog will replace http://nwc2013.blogspot.com/
We are starting our second semester at Yearup.org in Belletown. We have a great group of enthusiastic students and are looking forward to another semester of embracing our inner nerd.
Muhalo!
Subscribe to:
Posts (Atom)