IPND Notes

The purpose of this site is to show the notes that I, Felipe Fernandez, have taken during my study of the Intro to Programming Nanodegree course at Udacity.

Felipe's Projects Home
IPND Home
Section 1 - HTML/CSS
Section 2 - Programming
Section 3 - Object Oriented Programming
Section 4 - Allow Comments
Section 5 - Advanced Python Topics

Section 1 - HTML/CSS

Understanding of Structured Documents

The web browser uses HTML code to build a tree-like structure of the page. This tree-like structure shows the relationship between elements. This structure can be seen when you use the web browser's developer tools. Furthermore, the browser represents the elements on a webpage as boxes, even unbox-like graphical elements such as circle and triangles. Because of this, when creating an HTML document it is important to know the concept of "boxifying" your design, that is thinking of the elements in a HTML document as boxes. This makes it must simplier to rearrange your elements if need be. Larger boxes can even have smaller boxes within them. Using the div tag in html creates these boxes for the webpage. Boxifying using div groups related content making it easier for CSS styling.

The Importance of Avoiding Repetition

It is important to avoid repetition when creating your webpage. The code that is usually repeated is inline CSS code because similar elements on a webpage typically have the same styling. Having repeated inline CSS code makes it difficult and tedious to maintain. Say the text in five div containers all have blue font and now you want to change it to red. The CSS code will have to change for each div container. It can be much more time consuming and fustrating if there are multiple div containers on multiple webpages. And then if you have to change it back, it will be a hairpulling ordeal for the programmer. So rather than having all the CSS code repeated in multiple different places, it is advantageous to have CSS code on a separate page. On a separate CSS page, styling code can be changed to affect multiple elements.

Basic HTML and CSS Knowledge

HTML Knowledge

HTML has HTML markups. Markups usually consist of an opening tag, contents, and a closing tag but there are exceptions. Tags without closing tags are void tags. This structure of an opening tag, contents, and closing tag is called an element. The bold tag makes text appear bold. The emphasis tag makes tag into italics. They can be used in combinations to make text both bold and in italics. Not closing these two tags will affect all text after that tag, causing unwanted font changes, so it's important to check that tags have been closed.

Tags can also create HTML links. An example of this is Google. This is done using the anchor tag with the href attribute. The image tag has no closing tag because it contains no content. It contains a src attribute to show where the image is located. Below is an example of such a tag:

GoogleLogo

The br tag is the line break tag. This one has no closing tag. I've been using it here to end sentences. It is useful for creating whitespace to make text more presentable. The p tag is for creating paragraphs. It comes very handy in keeping my text organized. Unlike the br tag, the p tag has a closing tag. Like the br tag, the p tag causes a like break. The br tag is an inline element. The p tag is a block element. Inline affects the contents inline. Block elements actually create a invisible box surrounding the element. This box actually has height and width. The tag span is inline and div is block.

HTML documents have tags used to organize its contents. This includes the head, title, and body.

CSS Knowledge

As stated before, it is easier to maintain CSS styling on a separate CSS page rather than have it in the HTML code. There are a few exceptions where having CSS code is unnecessary. Small projects, such as a one page webpage, don't really need to have CSS code on a different page. In this case, having CSS code in the style element and putting in within the head element is sufficient. Another case where CSS is not practical is where the style is not repeated, such as if you just want one word out of an entire website to be red. In this case, putting that item in the separate CSS page would be overkill and just writing the CSS inline is fine. Remember, the purpose of having a separate CSS file is to avoid repeating code and making the styling easier to maintain. If the code is not repeated, then putting it in the CSS separate page is probably unnecessary.

CSS code consists of a selector and a declaration. So far, we've learned selectors can be elements (such as div, p, and h1) or classes. Classes group elements. Grouping elements under a class makes it easier to style them together. The declaration consists of the selector's property (such as font-size, color, and font-family) and the value (such as 150%, blue, and verdana).