New terms from treehouse – How To Make a Website

Discovered a fantastic website called teamtreehouse.com last Friday. It’s amazing, they literally have courses and tracks for everything I want to learn, and then some. You can google “treehouse free month” and get the first month free, and save $25. Totally worth the price when I do start paying though.

I’ve been going balls deep into the first section on web design since then, and I finally finished it today! Here are my notes and ramblings from those first 10 sections.

Entity – When you use an & to make a symbol not on the keyboard, like this, to make the copyright symbol:

©

For an image example, when setting the source attribute

Relative path – describes the location of a file on a partial file path based on the location of the original file relative to the one that’s being referenced, like a shorthand. You should use these whenever possible, they make your site more portable. If you were to type the whole URL, and then had to change the first part of it (http://www.example.com to example2.com) all your links would break.

src=”img/numbers-01.jpg”

Absolute path – the full path is written out, like a url. Use these only when you absolutely have to, like when you’re linking to an external resource.

src=”http://1.bp.blogspot.com/-W-IHRiGcMcI/Ui17OcaN3gI/AAAAAAAAAdU/a5BASI4kZyY/s1600/Boobs_ed3926_1996159.jpg”

Cmd + [ or ] let’s you indent multiple lines at once

normalize.css levels all the browsers to make up for the differences and inconsistencies between them on how they render things

CSS terms:

Rule – A rule is the entirety of a selector and its declarations

Selector – the part before the {} that tells the browser what thing on the page to apply the styling to. “footer” would be a selector element, because it would apply to all footer elements on the page. There are other type to narrow down the styling, they’ll teach them later

Curly braces – {}

Declaration(s) – the line(s) of CSS inside of the curly braces. First part before colon is the property, the part after is called the value, which is followed by a semicolon, which ends the declaration.

Going back to the old box model of My Big Pussy Comes (Margin Border Padding Content:

Margin – sets the space for the exterior four walls of an element

Padding – sets the space for the interior four walls of an element

When setting values for these, if you set all four it goes clockwise – top, right, bottom, then left.

It’s good to take a mobile first approach when building a website. It’ll be simpler, you only have to worry about the essence of the site. When you do the full site you can build on that.

When setting the values for CSS properties, they can either take numbers or words, and those words are called keywords. For some properties, like Margin, they can take both.

Hexadecimal number system – is base 16 rather than base 10 like we’re used to. So, after we use the ten numerical digits, we then use letters to get us to 16 values:

0 1 2 3 4 5 6 7 8 9 a b c d e f

With the two digit number pairs, there are now 256 options. For hex colors like below, the first two are for red (6a), the second two are for green (b4) and the last two are for blue (7b). The higher each of these values are, the more of that color will be mixed in. So #000000 would be all black (no color) and #ffffff would be white (all color): #6ab47b

When setting selectors, you can put a comma and a space between them to style multiple ones the same way. Also notice in the example that I was able to use hexadecimal shorthand the color white, where each number I listed will be used for both values for each pair.

h1, h2 {

color: #fff;

}

pseudo-class are dynamic selectors in your css that change based on things the user is doing in the browser, like hovering over a link:

nav a, nav a:visited {
color: #fff;
}

class is similar to an id, but can be used multiple times on a page. id’s, however, must be unique and cannot be repeated on a single page.

CSS comments can be added by doing this: /* comment goes here */. It’s good to organize your code into sections, like General, Heading, Colors, etc

Use http://www.google.com/fonts for finding fonts you want to use. “em’s” are a relative unit of measurement that can be used for setting the font-size property. One em is equal to the current font size, which for most browsers is 16px by default. As a relative unit of measurement, they work better in the cascading nature of CSS, and make it easier to make fast changes later, easier than it would be with an exact measurement.

Max-width:100%; tells the element to fill it’s parent container 100%. Think of the example for images in an unordered list. If you set this for the images, when you set the size of their list item containers, it will fill them up 100%. Without this, the images would break outside of their containers.

Styling image gallery

list-style:none; will remove the bullet points from the list

float property allows us to position elements in a special way. Floating my image list will make them appear side by side, rather than stacking on top of each other, like they were before.

We don’t want the footer to float with the img list items, so we can clear the float for the footer and have it appear as it did before we added the float to the img items. clear: both;

width was set to 45% – means regardless of the size of the browser window, each image will only take up 45% of the total width, of its parent element. Since the widths of the parent elements are not currently set, they default to 100%. This means the width of our images will take up 45% of the page. Since 45 divides into 100 twice, there will be two columns in the page, with a remainder of 10% width left over to create space between the images.

To create that space, and round it up to 100%, we set the margin property to 2.5%. Since the images are in two columns, each will have 2.5% on its left and right side. If you multiply 4 x 2.5 you get 10, which is our last 10%.

Display property – every element has a display property by default, and it’s set to either block, or inlineblock will take up space on the page and appear to push other things out of the way (div, sections, etc). Inline are mostly just text, they don’t push anything out of the way, it just appears in the same line as the text it’s inserted into (like a). Third property > inline-block which is a mix of the two. It will allow us to have list items side by side, like inline elements, but retain block level features, like having a width and height. If you set it to block it allows you to use the “auto” value for margin and padding

font-weight can be set to normal or bold, but also to a specific number

border-radius – allows you to add rounded corners to pictures. You can use pixels or a %, if you set it to 100%, it will be a circle.

You can link to telephone numbers by putting tel: in the href attribute’s value for the a element, like this:  <li class=”phone”><a href=”tel:123-456-7890″>123-456-7890</a></li>. This is a special link that makes it so if you click the phone number on your smart phone it will dial it for you, or at least open a modal window asking you to.

mailto: can be used for mail links to open the default mail client, you just pop it in in the href value.

You can do a special trick so for your twitter link it auto opens a new tweet written to you, just by putting this in the href: <li class=”twitter”><a href=”http://twitter.com/intent/tweet?screen_name=ohkidheartless”>@ohkidheartless</a></li&gt;

If you’re adding images for stylistic purposes (like a phone icon for phone number) rather than for content purposes (like a picture for your portfolio), it’s better to put that in the css.

.contact-info li.phone a {
background-image: url(‘../img/phone.png’);
}

So to explain the code above. We’re saying for the element with the class “contact-info”, inside it is a list item with the class “phone”, style any anchor elements inside that.  The “..” let’s us go up a directory in our file folder structure, as the code above is in a CSS folder, and needs to get into the separate img folder.

background-repeat: no-repeat; – background images always repeat by default, if you don’t want that to happen you set this property to “none”.

background-size: 20px 20px; – resizes the background images.

Shortcut – If you select something in CSS and do Cmd + / it will comment that out!!!

Fluid layout/responsive design – when you resize the browser window and the image changes along with it. Three parts/steps

First step: create fluid images by setting the max-width for img to 100%.

Second step: create a fluid grid by using percentages instead of pixels

Third Step: Media Queries allow page elements to be adjusted based on the width of the site. Each Media Query we add is referred to as a breakpoint. This is where the page can’t be expanded any further without looking worse. May be based off the screen resolutions of popular media devices.

Create a third css named responsive.css, then insert that into the html after main.css. This is because main let us make the mobile version, and we’ll be building the tablet and responsive versions after that.

@media is a css rule to do media queries. Example below. The “@media screen” tells the browser this is to target digital screen, and the “and” joins the two statements together. So, both statements need to be true for these styles to be added. The “min-width:480px” means that if the screen width is any larger than 480px, then we should go ahead and add these styles. 480 is normal for landscape mode of smart phones

@media screen and (min-width:480px) {
}

Next one is 660px, is for large tablets and normal sized desktops, so 660px cuts off just before those sizes. The order of the media queries matters, as it’s based off of the cascading nature of CSS. At the smallest size, all of the main.css is applied, then in the first media query at 480px we override the background color, then with the second one at 660px we override it again.

Ok, math for figuring out percentages for gallery on desktop:

We want to have 3 images, and each image had a 2.5% margin. So, 3 (images) x 5 (2.5% margin on each size) = 15% taken up. There is 100% of space to use total, so: 100 -15 = 85% leftover. 85%/3 (for 3 picture) =28.333333. It might seem strange because it’s not a whole number. BUT! The computer doesn’t care, so make sure to use as exact a number as possible.

Now, we did this and it made it so the gallery was three columns, but we hit a weird issue where the caption text for the pictures in the first row was wrapping, and therefore taking up space, pushing the subsequent list items out of place. Since there are three columns in the gallery, we need every fourth item to clear the float. Rather than having to add a class to the html for every fourth item in the list, we can use a psuedo-class (which is what you use for link hover states). Example:

#gallery li:nth-child(4n) {
clear:left;
}

This is saying I’d like this styling to be applied to every fourth list item inside of the gallery element.

To make site fully responsive, the last thing we need to do is add a viewport meta tag to each html page. They will allow us to control the size of the browser window on mobile devices, so that instead of them panning and zooming around the page, the layout will be locked to the size of the window. Add it to head element:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

If we don’t add this in, the desktop layout will be rendered on mobile devices instead of the mobile. This is basically saying that the initial scale when the website is loaded, should be set to the width of the screen (like a mobile one) loading it.

Website testing things: (NOTE- it’s almost impossible to get your site to look exactly the same in all browsers, the goal is to get it as close to perfection as you can with the lease amount of effort to get there).

1. You should take a screenshot of it and open it in Photoshop, then set it to black and white and make sure it looks good and readable for folks with color blindness. This let’s you check for areas of low contrast.

2. Flip the image and make sure everything still looks symmetrical, that one side doesn’t feel too “heavy”.

3. Blur the site a bunch, helps you make sure the design and colors and arrangement still looks good overall. Then, blur it a little bit – it will help make sure the text is legible.

There are validation services available to check your markup (http://validator.w3.org/#validate_by_uri) and css (http://jigsaw.w3.org/css-validator/#validate_by_uri). http://www.browserstack.com/ can be used for taking a screenshot of your site in different browsers and OS’s for you, but it costs money.

Sharing a website:

1. Pick a domain 2. Pick a web host 3. Link them together 4. Upload your files to the web sever

Anatomy of a web address: http://www.example.com

http://&#8221; is the protocol, a system of rules for the exchange of information. On the web, http (hyper text transfer protocol in this case) allows for the exchange of websites.

“www.” is the subdomain. In the early days of the web it was popular to add this, but today it isn’t necessary. You may see different ones for website, which is another way of partitioning separate major areas of your web presence.

“.example.com” is the actual domain, a unique identifying string that defines a realm or authority on the web. It should clearly identify what people will find on your site.

“.com” is TLD (top level domain), and is the highest level domain in the Domain Name System (DNS) other examples include .me, .net and .org.

You purchase your domain name at a Domain Name Registrar, like Go Daddy or https://www.namecheap.com/. Domains are text names that stand in place of an IP address to make them easier for users to navigate to. The domain/ip address is like your home address, and the internet is the roads/pathways you take to get there.

Picking a Web Host:

When people type in a web address, the domain is actually mapping to a special set of numbers called an IP address (internet Protocol Address), which points to a special computer called a server. When the server is accessed, web server software finds the files that are needed on the web page to load, and then serves them up to the client computer, which is the computer of the person that requested them.

You need to purchase a server, like we did for a domain. People refer to the server as a host, or “web hosting”. For basic sites, like the first website they had you make, you just need Shared hosting, a very common option that splits up servers, and makes it possible to run many websites on them. Many options for this:

mediatemple.net, dreamhost.com, webhostingforstudents.com (treehouse students get a special discount). Once you purchase it, you will get an email with some nameservers. You would then go to where you purchased your domain, and look for an option to “Transfer DNS to webhost” to enter your DNS numbers. DNS (Domain Name System) is the global routing system for IP addresses on the internet.

SFTP (SSH File Transfer Protocol, or also called the Secure File Transfer Protocol) – A network protocol that allows for the transfer of files to a web server. This let’s us transfer our files using a secure connection.

We need to download FTP software, they recommend http://cyberduck.io/. Then using the Server, username and password you got from the webhost, adn the port 18765

Debugging HTML and CSS

Everyone prefers Chrome (obviously) for its robust developer tools and support of web standards.

Shortcut: Open Chrome dev tools – CMD + Option + I

Elements panel – let’s you see your HTML document. This is typically referred to as a Document Object Model tree, or a DOM Tree. It a way of formatting and representing the structure of HTML documents. Click side arrows to open them up. As you hover over them, the corresponding part of the page will be highlighted.

If you click on one, it’s path will be represented as a trail of breadcrumbs at the bottom of the screen. Note that it will also say the class or id of the elements.

crumbs

The magnifying glass option will let you click on an element on the page and will take you right to where that is in the HTML.

The panel on the right hand side will display the CSS of the element you’ve selected, and the file in which the relevant CSS is located, and what line it’s at in that file. The CSS might now be exactly the same as what you’ve written, sometime the browser will add it’s own styling, trying to compensate for errors in the HTML and CSS. You can make changes here to see what they’d look like on the page, and you if you refresh they’ll go back to what they were before. Good for debugging and trying new things.

Sometimes you’ll see CSS crossed out – this is because it’s being crossed out by other code that’s already being written. Can deactivate styles with the checkboxes. What’s being applied (and possibly overwriting other styles) will appear farther up the list.

At the bottom of the CSS pane there is a metrics area that shows you the box model of your element. Shows you the exact width and heigh of the content, and how much padding, border and margin you have added. When you highlight a portion of it, like the margin for example, you’ll see that part highlighted on the site. This is handy for strange spacing issues where things aren’t lining up right.

box model highlight

The network tab will tell you how long different parts of the page took to load. If your page is taking too long to load, you can look here for ones that might be too large.

Most commons errors are due to typos. Workspaces helps with this by highlighting code after an error in red, like if you misspell a tag. Or, from improperly nesting elements. Common CSS bug – forgetting to close a declaration with a semi-colon, or forgetting the colon between a property and a value. Or, mixing up class (.) and id (#) selectors. Or, not going deep enough with your selectors, so you’re not selecting what you think you are. To test this, set the rule’s background-color property to something strange and see if it affects what you expect it to.

Finally, there are positioning problems with float, margin, padding and borders, which are a bit harder to diagnose.

http://www.w3.org/TR/CSS21/visuren.html – good resource for learning more about positioning and terms in general

Make sure to use <!DOCTYPE html>. If you use one of the older DOCTYPE’s, it will affect how things render in the browser.

It’s important to continue your learning. Useful links:

W3C – great for referencing extremely detailed info about html elements and css properties

http://blog.teamtreehouse.com/ – obviously

http://css-tricks.com/ – great css tips and tricks

https://twitter.com/nickrp/lists/web-community – Good list of people to follow ont twitter in the web community

https://github.com/ and http://codepen.io/ – share code here

http://dribbble.com/ – share design work

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s