reading notes for code fellows
the use of headings and subheadings creates a hierarchy of information in any document, and different topics are often separated by space. This same thing is achievable in HTML using code words such as <body> and <h1> which are called tags. Anything the tags encompass, including the tags themselves, are called an element.
<p lang="en-us"></p><body> contains everything that appears in the main browser.<head> contains any information about the page.<title> contains what will show on the browser tab.<!DOCTYPE> is used to declare what version of HTML the page is using.<!-- --> is used to place comments within the code that will not be displayed to the user.<div> is the tag used to group text and elements into a block, and is a block element.<span> is the inline equivalent of div.<iframe> cuts a window in your page to show another page (commonly used to show google maps). It needs to include width, height, and source, and if you don’t want scroll bars, you can add the seamless attribute.<meta> stays in the head of the page and give information about the site.in the past, authors would use <div> to separate all the elements of a page, now we have tags that allow us to separate elements in a way that tells what is contained inside that is consistant between sites.
<header> and <footer> elements can be used for the main header and footer of the page or for individual sections.<nav> element contains the primary navigation for the site (as in navigation between pages and such rather than links to outside sources).<article> element contains anything that can stand alone and have the ability to be nested.<aside> element contains information related to, but not strictly necessary to understand, an article if it is contained within one, or contains information for the page as a whole when used outside of an article tag.<section> element groups related content.<hgroup> element groups together header tags to seem like they are one element.<figure> element contains things like images and videos that are referenced in an article and <figcaption> sets the caption for whatever is contained in the figure tag.<div> element can be used whenever there is no suitable replacement that fits your needs in grouping multiple elements together.<a> tag to make entire sections of content into a link into a normalized usage.sites should be designed for a target audience, so it is important to know who you are targeting. Think about things like what country the majority of visitors will be from, what age range they will be, and their level of education.
once you have your target demographic established, knowing why they want to use your site is the next most important thing that should be impacting your content and design choices. You should know:
creating a list of reasons why someone might be visiting your site is a useful way to guide your design.
once you know your target demographic and their reason for being there, your next step is finding out what information is necessary to them (do they know who you are? What differentiates you from competitors?).
how often you expect people to visit your site should guide how often you will need to update it. More frequent updates requires more resources, so it is important to know what the necessary amount is to avoid more work than necessary.
after figuring all the rest of that out, you can create a site map.
the design of a website is important not only for aesthetic, but to showcase important data to site visitors. The organization of a page, making things more or less prominent depending on their priority, is necessary to ensure it is easily understandable.
grouping related info together can help with the cohesiveness of a design, some different types of grouping are:
we are wired to see similar designs as related items, and you can help that by having consistency between similar items. Use of headings is also helpful in telling a user whether a specific chunk of information is useful to them.
navigation is also a very important piece of design, as it helps visitors to navigate your site and gives them a first look at your organization. The three most important parts of a good nav system are to be:
a script is a series of instructions a computer follows to achieve a goal that can run different sections of itself in response to whichever situation it finds itself in.
to write a script, you need your end goal and a list of what needs to happen to accomplish it.
it is often easier to figure out your necessary steps and the order in which they need to be completed by first putting them into a flowchart.
computers don’t know what things in the world are, and as such they need models to tell them.
to change the content of HTML using JavaScript, it is important to understand how the browser interprets your web page.
all major browsers can use an interpreter to translate JavaScript to useable instructions for the computer.
there are three different languages that work together to make up a basic web page through progressive enhancement (building on top of each other to focus on one aspect of the design process at a time).
when you create a script, you generally want to house it in its own .js file and call it in your HTML page using the tag <script>. It is possible to write JavaScript inline in HTML, but it is not best practice.
to use objects and methods in JavaScript, you use the format object.method(parameters);.
JavaScript will run wherever it is placed within your HTML, which allows you to move where something specific shows up by moving the script call, or allows you to call the same thing multiple times in different places.