front-end_training

Front-end Tips

• On the front end, you will need to be highly conscious of who your user is and how they will be interacting with your web page, because you are building their gateway to your page or product. This may mean gaining a strong understanding of accessibility and things like responsive development down the line, but first you need to build up your toolkit and pick up the fundamentals of the front-end languages.

• The fundamental, primary feature of any web browser, such as Firefox, Chrome, Safari, is to render (display) HTML documents.

• HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

• HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

• It is important to understand that HTML only defines the semantic structure of a document. It does, as such, say nothing about the visual representation of, for example, a headline, the spacing between paragraphs, the font family and size used, any colors, borders, or even element placement: The visual representation is defined in a different language called CSS (or by the browser’s defaults, should there not be any custom style definition for this web page, as in our example above).

• You should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing. That way you'll bump into fewer problems later down the road.

• Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:

  p {
    color: red;
  }

• JavaScript is the programming language that you use to add interactive features to your website. Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more.

Note: The Windows file system tends to use backslashes, not forward slashes, e.g. C:\windows. This doesn't matter in HTML — even if you are developing your website on Windows, you should still use forward slashes in your code.

Note: It is important to remember that various devices have different screen sizes and some have faster connections to the web than others.[2]

Learning Outcomes

What is the a web server?

• A Web servers is a special computer that is constantly connected to the Internet, and is optimized to send web pages out to people who request them.[2]
• Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.[2]

What is the role of HTML in a web page?

• HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser

What is the role of CSS in a web page?

• CSS uses rules to enable you to control the styling and layout of web pages.[2]

What is the role of JavaScript in a web page?

• JavaScript is a client-side programming language which helps web developer to do Web Application Development and make dynamic and interactive web pages by implementing custom client-side scripts.

Why is the semantic structure of a document useful at all, even disregarding its visual styling when presented in the browser window?

• Maybe the simplest example is a link. In order to describe a link in text (HTML is stored as plain text) we’ll need to tell three pieces of information to the browser:

  - That we’d like to define a link,
  - what text to display for the link, and
  - what other web address to link to.
  

  This is a valid example of a link in HTML, using the tag a (which means “anchor”):

  <a href="http://rubymonstas.org">Ruby Monstas Homepage</a>
  

  This HTML, when rendered in a web browser, looks like this: Ruby Monstas Homepage, i.e. there’s a link with the text “Ruby Montas Homepage” and it links to the target URL (“href”) http://rubymonstas.org.

What is Html?

• It is a language that “marks up” certain each part of the content with its structural meaning, such as “This is a link, with this target URL”, or “This is a heading with this level”, “This is a simple paragraph”, and so on.

Explain the main parts of an Html element?

1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag and the content together comprise the element.

What do you know about attributes?

• Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.
• An attribute should always have the following:
  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
  2. The attribute name followed by an equal sign.
  3. The attribute value wrapped by opening and closing quotation marks.
• Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

What is nesting?

<p>My cat is <strong>very grumpy.</p></strong>

My cat is very grumpy.

• You can put elements inside other elements too — this is called nesting.
• nesting in html follows the stack structure (LIFO)
• Note: The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!
• The correct way:

  <p>My cat is <strong>very grumpy.</strong></p>
  

What do you know about empty elements?

<img src="images/firefox-icon.png" alt="My test image">

• Some elements have no content and are called empty elements.
• This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Explain the Anatomy of an HTML Document.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
<body>
  <img src="images/firefox-icon.png" alt="My test image">
</body>
</html>

• <!DOCTYPE html> — the doctype. It is required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don't do much, and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
• <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
• <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
• <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
• <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
• <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else.

in order to view a web page, users might:

• type a web address into their browser.[2]
• follow a link from another site.[2]
• use a bookmark.[2]

Note: Software manufacturers regularly release new versions of browsers with new features and supporting new additions to languages. It is important, however, to remember that many computer owners will not be running the latest versions of these browsers. Therefore you cannot rely on all visitors to your site being able to use the latest functionality offered in all browsers.

Glossery

• Meta information: information about the document, not part of the document itself.

Good To Know

• The entire success of Google as a search engine relied on the fact that the semantic structure of a document provides clues about the relevance of certain search terms in this document: If a word is contained in the URL, the document title, the toplevel headlines, then it’s probably important. Even more so, if other pages link to this document using link texts that also contain that word, then this adds social proof to the mix, and search results should probably list this page higher up in the results.

• By inspecting the headline tags in an HTML document, we can auto-generate a table of contents for this document quite easily, without having authors maintain this manually. Many content management systems (CMS) do this, including Wikipedia.

Important Links

• brief intro to front-end development
• ruby monstas
• Mozilla Web Developers
• HTML Docs
• CSS Docs
• JS Docs
• w3shcool
• devdocs.io/

Additional Resources

• introductory level web vids
• Skills of a Successful Front-End Web Developer

To Get A Job

• Microverse
• Thinkful
• Appcademy
• HackerRank
• StackOverflow
• much more...etc.