Beginning to get a grasp on how the web works, website design, html, css, javascript, etc. is integral to the first steps in learning how to code.
- Skim How the Web Works.
- Skim Website Design and Process.
- Read the following sections of JavaScript Basics: Start at “What is JavaScript?”, read through “Comments” section.
1.Compose a short poem describing how HTTP sends data between computers.
My attempt at a haiku!
Client makes request
Server delivers response
HTTP helps
2.Describe how HTML, CSS, and JS files are “parsed” in the browser.
The browser parses the HTML first and recognizes any references to CSS or JavaScript, then sends seperate requests for those references, building a visual representation of the page with the received data.
3.How can you find images to add to a Website?
You can search and save via Google images, however, to reduce the risk of copyright violation you should choose the Creative Commons License option in usage rights under tools. There are also sites with royalty free images available.
4.How do you create a String vs a Number in JavaScript?
Strings are enclosed within single or double quotes. Numbers are simply numbers without quotes.
5.What is a Variable and why are they important in JavaScript?
A variable is a container that stores a value. Variables are needed to program dynamic and interesting things, like personalized messages or changing images.
- Read the beginning of Getting Started with HTML. Start from the beginning and read through section “Anatomy of an HTML document”.
- HTML Document Structure.
- Metadata in HTML.
1.What is an HTML attribute?
Attributes contain extra information about the element that won't be displayed, but make it easier to target.
2.Describe the Anatomy of an HTMl element.
The anatomy of an element contains and opening tag, a closing tag, and the content in between.
3.What is the Difference between <article> and <section> element tags?
An <article> encloses a block of related content that makes sense on its own without the rest of the page and a <section> , while similar, is for grouping together a single part of the page that constitutes one single piece of functionality (like a set of article headlines and summaries), or a theme.
4.What Elements does a “typical” website include?
A "typical" website contains a body with a header, nav bar, main content, sidebar, and footer.
5.How does metadata influence Search Engine Optimization?
Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines.
6.How is the <meta> HTML tag used when specifying metadata?
It represents metadata that can't be represented by other HTML elements. It is used to give data about that data.
How to start to design a Website.
1.What is the first step to designing a Website?
Project ideation: decide what you want to accomplish, how will the website help achieve those goals, and what needs to be done in what order to get there.
2.What is the most important question to answer when designing a Website?
What exactly do you want to accomplish?
1.Why should you use an <h1> element over a <span> element to display a top level heading?
While you can render a span to look like a top level heading, it has no semantic value, so it will not get any extra benefits.
2.What are the benefits of using semantic tags in our HTML?
- Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
1.Describe 2 things that require JavaScript in the Browser?
Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. Two examples are: The DOM (Document Object Model) API allowing you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, and the Canvas and WebGL APIs allowing you to create animated 2D and 3D graphics.
2.How can you add JavaScript to an HTML document?
You can add via Internal JavaScript where you place the <script> element inside the head of the HTML just before the closing tag. You can use an External JavaScript file that you link in the head of the HTML as well. You can also create Inline JavaScript handlers directly in the HTML where you wish it to be. This last in inefficient and bad practice though.
Keep digging into JavaScript. Remember to use the console to play!