Introduction

This introduction to becoming a Front End Web Developer and Deigner, we'll be going through the basic information on some of the related aspects.

What we will cover:

  • Requirements to start learning Front End Web Dev.
  • HTML Markup Language.
  • CSS: Cascading Style Sheets.
  • JavaScript (JS Coding for Web Apps)
  • Required Knowledge

    There are no specific requirements for starting any of these web technologies.

    It would be a good idea to familiarize yourself with the basic fundamentals of the web and website structures.

    HTML (Markup Language)

    HTML is the language of the web, all the web URL's you type into the URL box in your web browser resolves to a domain name which holds the structure and content of your website.

    HTML is the structure that holds said content and structure and displaying it using HTML tags.

    Web browsers uses these tags to interperate how the elements get displayed.

    Here are some code examples of the HTML language. Please note that opening tags will contain a space after the first "<" for display urposes seeing as this is a HTML page itself.

    Opening elements of an HTML document

    "< !DOCTYPE html>
    "< html lang="en">< /html>
    "< head charset="UTF-8"> < /head>
    "< body>< /body>"

    This is what an opening tag looks like

    "< element>"

    This is what an closing tag looks like

    "< /element>"

    Opening and closing tags with no contents start out in a single line and usualy looks something like this

    "< element>< /element>"

    CSS (Cascading Style Sheets)

    CSS or Cascading Style Sheets are used to control the style elements of your website. Like the background color, font colors, font types and all alignments etc.

    With these customized styling elements the world of web or at least your personal website becomes your personal styling design playground

    Here's a short example of what a CSS code expression should look like. In this expression we will be applying a background color to all elements containing the "name" id.

    "#name { background-color: blue; }"

    The "#" resembels the "id" tag "name" is the value given to the "id" tag within your HTML markup.

    The properties containing the styling attributes are wrapped in "{}" and in this string "background-color" is the target property and the "blue" is the value assigned to the property. The end of the string gets marked with the ";" symbol.

    JavaScript (JS Coding)

    JS is used for logical programming and is mostly used to create what we know as "Web Apps". There are quite a few different libraries that are built off the javascript language.

    Some of these libraries are:

  • JS React
  • JS Vue
  • TypeScript
  • JS Angular
  • among others.


    Here's a short example of what a JS code expression should look like.

    function square(number) { return number * number; }

    The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.

    Reference
    • All the documentation in this page is taken from freeCodeCamp