Skip to content

Latest commit

 

History

History
59 lines (42 loc) · 4.87 KB

File metadata and controls

59 lines (42 loc) · 4.87 KB

code fellows 201

Read: 01 - Introductory HTML and JavaScript

HTML & CSS

Structure

  • Tags- they include an opening and closing tag. They are like containers for the information inbetween the opening and closing tags.
  • Attributes- they provide extra information about the contents within the designated tags. They are inserted into the opening tag. Attributes include an atribute name and an attribute value. The name identifies what is being changed in the element and the value is what kind of change is being made.

Image of tag

  • Body- The tag contains elements in the main browser window.
  • Head- The tag is where you put information about a page. For example, the title element is found within the head tag.
  • Tittle- the <title> tag is found in the head element. It contains the title that you would see in the URL area of a web browser.
  • Source Code- The source code is the code that a website comes from. You can use the view source command to open it in a new tab

Extra Markup

  • Doctypes- This is a declaration at the beginning of a document that tells the browser which version of html is being used
  • Comments- A comment in your code is a section that can only be visible from the code of your document. It does not show in the website. It is used to explain or add comments for programmers to use and understand what is happening, like a side note. You can add a comment by typing:
  • ID Attribute- The id attribute is used to assign a unique identifier to an element. It allows you to individually apply styles with CSS.
  • Class Attribute- Similar to the ID Atribute but can be assigned to multyple elements for quick styling of many elements.
  • Block Elements- Block level elements are elements that start on a new line in the browser. Similar to how pharagraphs are divided.
  • Inline Elements- Inline elements will continue on from the last inline element, similar to how sentances continue on from eachother.
  • Div Element- The
    element groups a set of elements together in one block level box.
  • Span Element- The element is like the div element but the inline version.
  • iFrames- an <iframe> is used to imbed a web page or section of a web page into your web page.
  • Meta- The element is in the head element. It is the metadata of your website.

HTML5 Layout

  • Header & Footer- These elements are used to put in inforation at the top or bottom of a webpage.
  • Navigation- The element is where you put a navigation bar. It is usually located in the header element.
  • Articles- The element is used to contain stand alone information like a article or blog entry, a comment, or forum post.
  • Aside- The element when used inside an article element holds information related to but not essential to the article, like a side note. Outside the article element the aside element acts in a similar wy but towards the whole web page.
  • Section- The
    element groups related content together, usually with it's own heading. -Heading Groups- group together heading elements together into one heading.
  • Figures- The element us used to contain referenced content.
  • Sectioing Elements- The
    element groups together related elements.

Process & Design

When building a website, you need to keep in mind who will ne using it. Websites work best when you keep in mind that you and your target audience may see things diffrently. Instead of asking what your favorite color is, ask what the daily user of this website might like to see instead. Think about why they are using your site. There is a specific reason why they are here. What kind of things do they expect to see, How can you help them achieve their goal? Remember that they need specific information that you should make easily available to them, nobody likes searching around for phone numbers or hours of operation through a bunch of links. How often people visit your websit should determin how often it needs to be updated. Returning users want to see what's new and improved.

  • Site Maps- This is a type of visual aid that maps out how webpages branch off into eachother
  • Wireframes- This is a type of visual aid tht maps out how a website should look.

JavaScript & JQuery

The ABC of Programming

A Script is a series of instructions a computer follows to complete a task. Like in an instruction manual or recipe book, instructions are writen and followed in a step by step format. There are three main steps to writing a script.

  1. Define the goal
  2. Design the script
  3. Code each step