Introduction

This website hosts a collection of informative blogs covering a wide array of programming subjects. These blogs offer in-depth insights, tips, and tutorials on diverse programming topics, making it a valuable resource for developers seeking to enhance their skills and knowledge.

  • Languages offered: HTML5, CSS3, JavaScript, jQuery, Bootstrap, Sass, React.js, Node.js, Express.js, MongoDB, Machine Learning, Artificial intelligence and many more.

    • Responsive Web Design

    Responsive web design suggests that the approach of designing and developing a website should repond to the user's behavior and enviornment based on platform, orientation and screen size. The practice consists of a well organized HTML structure and a mix of flexible grids, customizable layouts and images of intelligent use of CSS and it's media queries. For example, as a user switches from a laptop to a tablet or phone, the website will automatically switch media to accommodate for resolution, image size and scripting abiliities. To put simply, the website will have the technology to automatically respond to the user's preferences and different devices. This eliminates the need for multiple different design and development phases for each new gadget that is new to the market.[3]

    A depection of the different sizes of devices that responsive web design needs to account for.
    Screens come in many resolutions and sizes that responsive web design needs to take account for.

    Now that you are familiar with what freeCodeCamp and responsive web design are and have to offer, this article will reference the main sections of responsive web design taken from the beta version of freeCodeCamp. If you're ever stuck or you forget what that certain element tag is used for this technical document is here to assist you!


    Basic HTML and HTML5

    Hyper Text Markup Language, or better known as HTML, is a markup language to describe the structure of a web page much like a skeleton of a human body. An array of unique syntax of elements are used to organize and give information about the content to the web browser. Opening and closing tags are used on elements that surround content and gives meaning to it. There are different element tags that have different functions and uses that could include paragraphs, headers, links or lists.[4]

    This section references how to use HTML elements to give structure and meaning to your web content. Listed below are the topics covered for HTML and HTML5:


    • The Declaration

      At the start of your coding document you need to declare the language being used so the browser knows what version of HTML you're using and is able to read it. Most major browsers now support the latest installment, HTML5. Below is how you declare the language, in this case it'll be HTML5. This version is declared with the <!DOCTYPE html> tag. Don't forget the <html> tags that wrap around your html code![5]

      <!DOCTYPE html> <html> ... <!-- Your code here --> </html>

    • Comments

      Comments are a way to leave notes and reminders about the code for yourself or another programmer so they understand quickly what they are reading. Comments don't affect the code itself, they appear within the typed code but are not generated on the page. It's also a convenient way to make code inactive without having to delete it. Comments start with an opening tag of <!-- and close with a --> when finished.[6]

      <!-- This is a single line comment --> <!-- This is a multiple line comment --> <!DOCTYPE html> <html> <body> <!-- Main Body --> <div> <!-- Header Container --> <h1>Hello World!</h1> <!-- Heading Option 1 --> <!-- <h2>Hello World!</h2> Heading Option 2 --> </div> </body> </html>

    • The Head

      Any markup with information about your page would go into the head tag, which is essentially the header of the page. Metadata elements such as the <link> ,<meta> ,<title> , and <style> usually go inside the <head> element.

      <!DOCTYPE html> <html> <head> <title>...</title> <!-- Your title here --> <link...> <!-- Your link here --> </head> </html>

    • The Main/Body

      All markups containing content that make up the page would go into the main or the body tag. The body element acts as the body of all of the content of the page while the main element is inside of the body and contains the page's main content. All elements not part of the header or footer usually go inside one of these elements.[7]

      <!DOCTYPE html> <html> <head> ... <!-- Your metadata here --> </head> <body> ... <!-- Some content here --> <main> ... <!-- Main content here --> </main> ... <!-- Maybe some more content here --> </body> </html>

    • Headings

      The heading element tells the browser about the structure of the website. <h1> elements are often used for main headings as they are largest of the headings. <h2> through <h6> elements are generally used for subheadings to indicate different or new sections of your content.[8]

      <h1>Heading 1</h1>

      Heading 1

      <h2>Heading 2</h2>

      Heading 2

      <h3>Heading 3</h3>

      Heading 3

      <h4>Heading 4</h4>

      Heading 4

      <h5>Heading 5</h5>
      Heading 5
      <h6>Heading 6</h6>
      Heading 6

    • Paragraphs

      Paragraphs are the preferred element for communicating text on websites. Just like in real writing, <p> tags organize and contain the meaning of the content within the body of the page.[9]

      <body> <main> <h1>Your Title Here</h1> <p>This is a paragraph. Your content and talking points go here.</p> </main> </body>

    • Lists

      There are special elements that let you create lists and there are two kinds of lists that can be made. Unordered lists use the <ul> tag and is a general list that includes bullet points. An ordered list uses the <ol> tag and is used for instructions or anything that needs listed by steps or in a particular order. Don't forget each item in either list set needs a <li> tag to be recorded![10][11]

      <main> <h1>Your Title Here</h1> <ul> <!-- Unordered List --> <li>List item a</li> <li>List item b</li> <li>List item c</li> </ul> <ol> <!-- Ordered List --> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </main>

    • Divs

      The <div> element, also known as the division element, is a general purpose container to contain and organize other elements of the page. <div> is the most commonly used HTML element because of its versatility. Other container elements were introduced with the induction of HTML5. These have more specific uses throughout the page, they include the <header>, <nav>, <section>, <article>, <aside> and <footer> elements. Below is an example of how these would typically be inputed.[12]

      <body> <header> ... <!-- Header contains title info --> </header> <main> <nav> ... <!-- Nav contains navigation links --> </nav> <aside> ... <!-- Aside contains side info and/or links --> </aside> <section> ... <!-- Section contains a main part of the page --> <article> ... <!-- Article contains worded content --> </article> </section> </main> <footer> ... <!-- Footer contains copyright info and links --> </footer> </body>

    • Images/Video

      Images can be added to a website using the <img> element. This element uses the src attribute to specify the images URL to grab the media and display it on the page. The tag is self closing, so a closing tag is not needed for this one. All image elements must have an alt attribute, which is used for screen readers to improve accessibility and is displayed if the image fails to load. Below is an example of how to do this.[13]

      <img src="https://www.the-images-URL-goes-here.com" alt="Text explaining what the image is.">

      Video clips can also be added to a website using the <video> element. Unlike the <img>, video uses a separate <source> tag that retrives the video's URL to be played. Videos also use height and width attributes within the <video> tag. Other optional attributes that can be added are controls, which allow the user to pause, play, increase/decrease the volume, etc, and autoplay which allows the video to automatically play when the user sees it on the page. Don't forget to add the type of video that is playing! The main types of video are mp4, webm and ogg. Below is how you would set up video in HTML.

      <video width="width-here" height="height-here" controls autoplay> <source src="https://www.video-url-goes-here.com" type="video/mp4"> <!-- Replace mp4 with webm or ogg when appropriate --> </video>

    • Anchors

      Anchor elements, <a>, are used to link to content internally or externally from the current page. The href attribute is used to call the URL that links to what you want. There are many ways anchors can be used on the page, here are some examples.[14][15][16][17]

      <!-- Anchor words to an external link --> <a href="https://www.link-url-goes-here.com">External Link</a> <!-- Anchor that uses the target attribute to open up the link in a new tab --> <a href="https://www.link-url-goes-here.com" target="_blank">External Link in a New Tab</a> <!-- Anchor an image to an external link --> <a href="https://www.link-url-goes-here.com"><img src="https://www.image-url-goes-here.com" alt="Image description goes here"></a> <!-- Anchor to jump to an internal section on the page --> <a href="#internal-section">Jump to internal section</a> <!-- On the section you want to jump to, add this line of code --> <a name="internal-section"></a> <!-- Anchor with a dead link (#) for when stucture of the page is still needed without the specific URL yet --> <a href="#">Dead Link</a>

    • Forms

      Web forms are a way to collect data and send them to a server using just HTML. These are useful for surveys and anything that involves inputs from a user. Here is how a web form is set up with different inputs types.[18][19][20][21][22]

      <!-- This is the form element. This directs the data to a server. --> <form action="https://www.send-data-to-this-server.com"></form> <!-- Within forms, inputs can be placed to collect data. Here is a text field with a placeholder the user can see in the field. Filling out the field can be optional by adding required. --> <form action="https://www.send-data-to-this-server.com"><input type="text" placeholder="Enter Text Here" required></form> <!-- How will the page know to accept the data? With a submit button of course. --> <form action="https://www.send-data-to-this-server.com"> <input type="text placeholder="Enter Text Here" required> <button type="submit">Submit</button> </form>

    • Buttons

      Buttons are another way of collecting data from a user who is prompted with a set of options to input. These can come in a variety of styles, the submit type was shown in the form section. The <label> element is used to nest the buttons in. A name attribute is used to correlate the button with the sent data in a form. How to set up a set of buttons on a page is shown below.[23][24][25]

      <!-- Radio: round buttons that are filled when selected --> <label> <input type="radio" name="option1-option2">Option 1 <input type="radio" name="option1-option2"&ft;Option 2 </label> <!-- Checkbox: square buttons that can be checked/unchecked --> <label> <input type="checkbox" name="check1-check2">Check 1 <input type="checkbox" name="check1-check2">Check 2 </label> <!-- Both radio and checkboxes can be preselected by adding checked --> <label> <input type="radio" name="option1-check2" checked>Option 1 <input type="checkbox" name"option1-check2" checked>Check 2 </label>
    Basic CSS

    Cascading Style Sheets, better known as CSS, tells the browser how to display the HTML framework on the page. This language controls the colors, fonts, positioning, spacing, sizing, decorations and transistions of every element. There are three main ways for these languages to communicate with each other to properly display a webpage. Inline styles can be directly written in HTML within each element with the style attribute. Another way CSS rules can be applied to HTML is by adding <style> tags in the HTML document and writing the code withen those. The most used method is to write the CSS code in a external style sheet and have the HTML document reference that sheet. This improves readability and reusability of the code. The best way to remember how these languages function is reffering to the HTML as the skeleton and CSS as the skin of a site.[26]

    This section references how to use CSS to give color and life to your web content. Listed below are the topics covered for basic CSS and CSS3.


    • Styling

      With CSS there are many properties that one can use to change the way an element looks on the page. This is all done in a separate .css file or inside the <style> elements using CSS selectors, classes, ids, and if need be, inline styles outside of the <style> elements. The order of these styling methods also indicate which take precedence when two or more are used. Classes override element selectors, ids over classes and if all else fails, inline styling and adding !important to a property have the final say in an elements style.[27][28][29][30][31]

      Here are the basic methods of incorporating CSS into a page.

      /* Element Selector - selects all of the called element */ <style> p { ... } </style> <p>...</p> /* Class Selector - selects all of the called class */ <style> .class1 { ... } </style> <h1 class="class1">...</h1> /* Id Selector - selects elements with the unique id attribute */ <style> #id1 { ... !important } </style> <div id="id1">...</div> /* Inline Selector - selects individual elements - NOT RECOMMENDED */ <h2 style="color: red;">...</h2>

    • Import

      Using import in CSS is very similar to using the <link> element in HTML. One of the basic uses of it, just like the <link> element, is to import a font family more than likely from Google. Shown below is an example of importing the Google font Open Sans.[32]

      <style> @import url('https://fonts.googleapis.com/css?family=Open+Sans'); </style>

    • Units

      There are two main types of units that measure length, absolute and relative. Pixels are a type of relative length unit, mostly used for screen resolutions and sizing, that tells the browser how to size or space an object. This is the most widely used unit, but there are more units that can be used. Em or rem are more relative length units that are relative to another length. Ems are based on the size of an element's font. Absolute units are tied to a physical unit of length such as inches (in) and millimeters (mm).[33]

      <style> html { color: black; width: 1000px; /* Pixels */ length: 10in; /* Inches */ font-size: 2em; /* Ems */ line-height: 1rem; /* Rems */ } </style>

    • Comments

      Like in HTML, comments are a way to leave notes and reminders about the code for yourself or another programmer so they understand quickly what they are reading. They are also used to prevent the browser from interpreting parts of the style sheet. Comments start with an opening tag of /* and close with a */ when finished.[34]

      <style> /* This is a single line comment */ /* This is a multiple line comment */ </style>

    • Colors

      The color of text, backgrounds, objects, borders, you name it can be colored with CSS. The main colors, such as red, blue, green, etc can be declared by simply inputing those in your CSS code. Another method for declaring a color is using the colors hexadecimal code, or hex number. Hex code gives the user a huge range of colors to use and is done by using the hash symbol (#) followed by six numbers and letters. An abbriviated version can also be used by the hash symbol followed by only three numbers and letters, however, this will yield a smaller group of colors. Another way to represent colors in CSS is by using RGB values. RGB uses three numbers from 0 to 255 that measures and mixes the three primary colors to make all of the colors. There is a lot that can be covered and said about colors using CSS so additional references are posted to further explore this vast topic.[35][36][37][38][39][40]

      /* Main Color Callouts */ h1 { color: red; } .title-background { color: black; } #special-font { color: blue; } /* Hex Codes */ h1 { color: #ff0000; } .title-background { color: #000000; } #special-font { color: #0000ff; } /* Abbreviated Hex Codes */ h1 { color: #f00; } .title-background { color: #000; } #special-font { color: #00f; } /* RGB Values */ h1 { color: rgb(255,0,0); } .title-background { color: rgb(0,0,0); } #special-font { color: rgb(0,0,255); }

    • Fonts

      There are many desired characteristics we want to see from the fonts of a webpage, CSS makes it possible to achieve these. The family, style, size, color, and weight can all be modified for desired looks and effects. Below are many examples how to change fonts in CSS.[41][42][43][44][45]

      /* Font Styles */ body { font-style: normal; /* The browser displays a normal font style, this is default */ } .font-style-1 { font-style: italic; /* The browser displays an italic font style */ } #special-font { font-style: oblique; /* The browser displays an oblique font style */ } /* Font Weights */ html { font-weight: normal; /* Defines normal characters, this is default */ } .bold-font { font-weight: bold; /* Defines thick characters */ } #bolder-font { font-weight: bolder; /* Defines thicker characters */ } p { font-weight: lighter; /* Defines lighter characters */ } .thickness-selector { font-weight: 100; /* 100 - 900 for custom thickness. 400 is the same as normal, 700 the same as bold */ } /* Font Sizes */ h1 { font-size: 16px; /* Defines normal character size using pixels */ } .em-size { font-size: 2em; /* Defines font size in ems */ } /* Font Families */ h2 { font-family: Sans-Serif; /* Defines the Sans-Serif font family */ } .font-degrade { font-family: Monospace, Sans-Serif; /* Defines what font to degrade to if the browser or local machine doesn't have the former in the library */ } /* Font In One Declaration */ body { font: italic bold 12px arial; /* (font-style font-weight font-size font-family) All four properties can be declared on one line of code */ }

    • Images

      CSS has properties called width and height that controls an elements width and height. Just like with fonts, pixels are used to control these aspects of the element. Below is an example of resizing an image.[46]

      <style> img { width: 500px; height: 500px; max-width: 100%; max-height: auto; } </style>

    • Borders

      Borders can be placed around elements to give it a more define presence or to keep objects orderly on the webpage. They come in many styles, shapes and sizes. Below are a few examples of using borders in CSS.[47][48][49]

      <style> .border-example { border-color: black; /* Defines the color of the border */ border-width: 7px; /* Defines the width of the border, in pixels */ border-style: solid; /* Defines the style of the border */ border-radius: 10px; /* Defines how round the corners of the border are */ border-radius: 50%; /* When used as a percentage, border-radius creates a circular border around the element */ } .border-example-2 { border: 5px dotted yellow; /* Border properties can be written on one like like shown */ } </style>

    • Background

      An elements background characteristic can be set up using the background property. Much like with other elements, a backgrounds color, position, display and image overlay can be modified. Examples are shown below on CSS backgrounds.[50][51]

      <style> .background-1 { background-color: white; /* Specifies the background color */ background-image: url("https://www.image-url-here.com"); /* Specifies the url for the background image overlay */ background-repeat: no-repeat; /* Specifies how and if the background repeats */ background-position: right top; /* Specifies the position of the background on the screen */ } .background-2 { background: red url("https://www.image-url-here.com") repeat-x bottom left; /* Like with many elements, all of the properties can be written on one line */ }

    • Padding

      An element's padding controls the amount of space between the element's content and its border. When you increase padding, it increases the distance between the text, padding, and border around it. Sometimes you will want to customize an element so that it has different padding on each of its sides. Padding-top, padding-right, padding-bottom, and padding-left each control the padding on the different four sides of the element. The short hand of applying different padding to the sides is using clockwise notation using just the padding attribute.[52][53][54]

      /* Normal padding */ .box1 { padding: 15px; } /* Specific padding */ .box2 { padding-top: 15px; padding-right: 7px; padding-bottom: 3px; padding-left: 20px; } /* Shorthand clockwise notation */ .box3 { padding: 15px 7px 3px 20px; }

    • Margin

      An element's margin controls the amount of space between an element's border and surrounding elements. When you increase an elements margin, it will increase the distance that distance. Just like with padding, you can control the top, right, bottom, and left margins separately. Clockwise shorthand notation can also be used with margins.[55][56][57]

      /* Normal margin */ .box1 { margin: 15px; } /* Specific margin */ .box2 { margin-top: 15px; margin-right: 7px; margin-bottom: 3px; margin-left: 20px; } /* Shorthand clockwise notation */ .box3 { margin: 15px 7px 3px 20px; }

      • Machine Learning

      Machine learning (ML) is a type of artificial intelligence (AI) that allows software applications to become more accurate at predicting outcomes without being explicitly programmed to do so. Machine learning algorithms use historical data as input to predict new output values. Recommendation engines are a common use case for machine learning. Other popular uses include fraud detection, spam filtering, malware threat detection, business process automation (BPA) and Predictive maintenance.[4]


      • Why is machine learning important?

        Machine learning is important because it gives enterprises a view of trends in customer behavior and business operational patterns, as well as supports the development of new products. Many of today's leading companies, such as Facebook, Google and Uber, make machine learning a central part of their operations. Machine learning has become a significant competitive differentiator for many companies.

      • What are the different types of machine learning?

        Classical machine learning is often categorized by how an algorithm learns to become more accurate in its predictions. There are four basic approaches:supervised learning, unsupervised learning, semi-supervised learning and reinforcement learning. The type of algorithm data scientists choose to use depends on what type of data they want to predict.

      • What are the advantages and disadvantages of machine learning?

        Machine learning has seen use cases ranging from predicting customer behavior to forming the operating system for self-driving cars.

        When it comes to advantages, machine learning can help enterprises understand their customers at a deeper level. By collecting customer data and correlating it with behaviors over time, machine learning algorithms can learn associations and help teams tailor product development and marketing initiatives to customer demand.

        Some companies use machine learning as a primary driver in their business models. Uber, for example, uses algorithms to match drivers with riders. Google uses machine learning to surface the ride advertisements in searches.

        But machine learning comes with disadvantages. First and foremost, it can be expensive. Machine learning projects are typically driven by data scientists, who command high salaries. These projects also require software infrastructure that can be expensive.

        There is also the problem of machine learning bias. Algorithms trained on data sets that exclude certain populations or contain errors can lead to inaccurate models of the world that, at best, fail and, at worst, are discriminatory. When an enterprise bases core business processes on biased models it can run into regulatory and reputational harm.

      • What is the future of machine learning?

        While machine learning algorithms have been around for decades, they've attained new popularity as artificial intelligence has grown in prominence. Deep learning models, in particular, power today's most advanced AI applications. Machine learning platforms are among enterprise technology's most competitive realms, with most major vendors, including Amazon, Google, Microsoft, IBM and others, racing to sign customers up for platform services that cover the spectrum of machine learning activities, including data collection, data preparation, data classification, model building, training and application deployment. As machine learning continues to increase in importance to business operations and AI becomes more practical in enterprise settings, the machine learning platform wars will only intensify. Continued research into deep learning and AI is increasingly focused on developing more general applications. Today's AI models require extensive training in order to produce an algorithm that is highly optimized to perform one task. But some researchers are exploring ways to make models more flexible and are seeking techniques that allow a machine to apply context learned from one task to future, different tasks.


        • JavaScript

        JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it's used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

        JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.

        Contrary to popular misconception, JavaScript is not "Interpreted Java". In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as if statements, for and while loops, and switch and try ... catch blocks function the same as in these languages (or nearly so).

        JavaScript can function as both a procedural and an object oriented language. Objects are created programmatically in JavaScript, by attaching methods and properties to otherwise empty objects at run time, as opposed to the syntactic class definitions common in compiled languages like C++ and Java. Once an object has been constructed it can be used as a blueprint (or prototype) for creating similar objects.

        JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for ... in), and source code recovery (JavaScript programs can decompile function bodies back into their source text).


        • What JavaScript implementations are available?

          The Mozilla project provides two JavaScript implementations. The first ever JavaScript was created by Brendan Eich at Netscape, and has since been updated to conform to ECMA-262 Edition 5 and later versions. This engine, code named SpiderMonkey, is implemented in C/C++. The Rhino engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation written in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 5 compliant.

          Several major runtime optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine over time. Work is always ongoing to improve JavaScript execution performance.

        References
        1. ^ freeCodeCamp's Wikipedia article - Retrieved 2017-03-16
        2. ^ freeCodeCamp's about page - Retrieved 2017-03-16
        3. ^ Smashing Magazine's article on Responsive Web Design - Retrieved 2017-03-16
        4. ^ freeCodeCamp's overview for HTML and HTML5 - Retrieved 2017-03-16
        5. ^ Declare the Doctype of an HTML Document - Retrieved 2017-03-29
        6. ^ HTML Comments - Retrieved 2017-03-29
        7. ^ Define the Head and Body of an HTML Document - Retrieved 2017-03-29
        8. ^ Heading Elements - Retrieved 2017-03-29
        9. ^ Inform with the Paragraph Element - Retrieved 2017-03-29
        10. ^ Create a Bulleted Unordered List - Retrieved 2017-03-29
        11. ^ Create an Ordered List - Retrieved 2017-03-29
        12. ^ Div Elements - Retrieved 2017-03-29
        13. ^ Add Images to Your Website - Retrieved 2017-03-29
        14. ^ Link to External Pages with Anchor Elements - Retrieved 2017-03-29
        15. ^ Link to Internal Sections of a Page with Anchor Elements - Retrieved 2017-03-29
        16. ^ Make Dead Links Using the Hash Symbol - Retrieved 2017-03-29
        17. ^ Turn an Image into a Link - Retrieved 2017-03-29
        18. ^ Create a Form Element - Retrieved 2017-03-31
        19. ^ Create a Text Field - Retrieved 2017-03-31
        20. ^ Add Placeholder Text to a Text Field - Retrieved 2017-03-31
        21. ^ Add a Submit Button to a Form - Retrieved 2017-03-31
        22. ^ Use HTML5 to Require a Field - Retrieved 2017-03-31
        23. ^ Create a Set of Radio Buttons - Retrieved 2017-03-31
        24. ^ Create a Set of Checkboxes - Retrieved 2017-03-31
        25. ^ Check Radio Buttons and Checkboxes by Default - Retrieved 2017-03-31
        26. ^ freeCodeCamp's overview for CSS and CSS3 - Retrieved 2017-03-31
        27. ^ Use CSS Selectors to Style Elements - Retrieved 2017-04-05
        28. ^ Use a CSS Class to Style an Element - Retrieved 2017-04-05
        29. ^ Style Multiple Elements with a CSS Class - Retrieved 2017-04-05
        30. ^ Set the id of an Element - Retrieved 2017-04-05
        31. ^ Use an id Attribute to Style an Element - Retrieved 2017-04-05
        32. ^ @import - CSS - Retrieved 2017-04-05
        33. ^ Understand Absolute versus Relative Units - Retrieved 2017-04-05
        34. ^ MDN - CSS - Comments - Retrieved 2017-04-06
        35. ^ Change the Color of Text - Retrieved 2017-04-06
        36. ^ Use Hex Code for Specific Colors - Retrieved 2017-04-06
        37. ^ Use Abbreviated Hex Code - Retrieved 2017-04-06
        38. ^ Use RGB values to Color Elements - Retrieved 2017-04-06
        39. ^ Wikipedia - Hexadecimal - Retrieved 2017-04-06
        40. ^ ColorHexa - Retrieved 2017-04-06
        41. ^ CSS font-style Property - Retrieved 2017-04-07
        42. ^ CSS font-weight Property - Retrieved 2017-04-07
        43. ^ Set the Font Family of an Element - Retrieved 2017-04-07
        44. ^ Specify How Fonts Should Degrade - Retrieved 2017-04-07
        45. ^ CSS font Property - Retrieved 2017-04-07
        46. ^ Size Your Images - Retrieved 2017-04-07
        47. ^ Add Borders Around Your Elements - Retrieved 2017-04-07
        48. ^ Add Rounded Corners with border-radius - Retrieved 2017-04-07
        49. ^ Make Circular Images with a border-radius - Retrieved 2017-04-07
        50. ^ Give a Background Color to a div Element - Retrieved 2017-04-07
        51. ^ CSS Backgrounds - Retrieved 2017-04-07
        52. ^ Adjust the Padding of an Element - Retrieved 2017-04-21
        53. ^ Add Different Padding to Each Side of an Element - Retrieved 2017-04-21
        54. ^ Use Clockwise Notation to Specify the Padding of an Element - Retrieved 2017-04-21
        55. ^ Adjust the Margin of an Element - Retrieved 2017-04-21
        56. ^ Add Different Margins to Each Side of an Element - Retrieved 2017-04-21
        57. ^ Use Clockwise Notation to Specify the Margin of an Element - Retrieved 2017-04-21