DEV Community: Ayushi Das

How I learned html

Ayushi Das — Tue, 08 Mar 2022 13:54:44 +0000

Here I will be documenting my entire day-1 journey of whatever I did to learn html. This is written by me purely for any future references and also to keep a track of important steps which might help me when I get stuck. This is not a tutorial from my end and I am open to any suggestions from my peers.

Note: This writing might help you only if you are a complete beginner.

Pre-Requisite
Phase 0
Phase 1
Phase 2
Phase 3
Phase 4
Phase 5
Dumping into GitHub

Pre-Requisite

We can run html codes from any given text editor. My personal favorite is VS Code. Also whatever we see on the internet today, uses html language to work and hence it is the basic requirement for any tech jobs.

Phase 0

HTML stand for Hypertext Markup Language. It is used to design the structure and layout of our website, also stands as the backbone of any given website. Example: Our body's skeleton.
CSS stands for Cascading Style Sheets. It adds styling to the backbone and hence appealing the user experience. Example: Our body's appearance.
JS or JavaScript is the logic for the page layout. Makes the entire web-page functional and responsive. Example: Our body's brain.
Alt+arrow key can move line up and down. Also, create a special root file named index.html. We can access the boiler plate using !+ emmet abbreviation.
ctrl+/ to comment out lines.

Phase 1

<!DOCTYPE html>                         <!--- Specifies that it is html5 type document --->
<html lang="en">                        <!--- Root of an html page --->
<head>                                  <!--- Contains meta-data --->
    <meta charset="UTF-8">
    <title>Document</title>             <!--- Title of the document --->
</head>
<body>                                  <!--- Main body rendered by the browser ---> 
    <h1> This is a heading </h1>        <!--- The heading tag ---> 
    <p> lorem300 </p>                   <!--- The paragraph tag, `Alt+Z` for word-wrap ---> 
</body>                                 <!--- Closing the body tag ---> 
</html>                                 <!--- End of file --->

Tag is a container that has either contents or other tags in it.
Elements are the ones which has contents, empty elements have neither content nor tags in them. Element= opening tag+ content+ closing tag.
Attributes are the properties of an element, example <a href="https://wikipedia.com/"> WIKI </a> has a=anchor tag and href=attribute. We can use single/double quotes.
html tag is the parent tag for head tag and body tag. Head tag and body tag are the child of html tag. head tag and body tag are siblings.
We can use both .html and .htm extension. Inspect element or view page source can show you the template codes.
Responsive website means it can fit to any kind of display size.
html is not case sensitive. We use  for comments.

Phase 2

Document Object Model (DOM):
The Document Object Model is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Headings has 6 levels h1, h2, h3, h4, h5, h6 where h1 to h6 has decreasing size/importance. Helps a lot in SEO hence not use it to increase/decrease size or bold/italics it.
Some important tags:
- <p></p> is paragraph tag which adds paragraphs.
- <a></a> is anchor tag to add links. We can specify images in place of alternate texts so that when the user clicks the image it renders to the given link. <a href="/about"> <img src="image.png" width="120"> </a>
- <img src alt></img> is the image tag to add image.
- <b></b>, <i></i>,<u></u>, bold, italic and underline tags respectively.
- <br></br> adds new line.
- <big></big>, <small></small>, are the used to show big and small text respectively.
- <hr></hr> is used for horizontal divider.
- <sub></sub>, <sup></sup>, are subscript and superscript tags respectively.
- <pre></pre> is a preserve option used to display texts as it is without ignoring the spaces and tabs.
- <div></div> is division tag, type of container, which is also a block element(taking up most of the width)
- <span></span> is span tag which is a container and an inline element(takes up only the needed spaces/width)
Block Elements

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video></video>

Inline Elements

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Documents usually use Absolute and Relative links. The main difference between absolute and relative paths is that absolute URLs always include the domain name of the site with http://www. Relative links show the path to the file or refer to the file itself. A relative URL is useful within a site to transfer a user from point to point within the same domain.

Phase 3

Creating a proper web-page layout, using correct tag in correct place, proper indexing is necessary for search engines and better user experience. We mainly use header, main and footer.
<header></header>
<main></main>
- <section></section>
- <article></article>
- <aside></aside>
<footer></footer>

Phase 4

Lists: We have html lists to organize our content in a structured manner. there are mainly two types of lists:

Unordered list

       <ul type="circle">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>

Ordered list

      <ol type="i">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ol>

Forms: We use forms to collect input from the user. <form></form>: There are different form elements for different kind of user input
- input element: Can be of text, checkbox, radio, button and submit type. We also have a 'file' type.
- textarea element: Defines a multi-line input, columns and row attributes can be used to size the textarea.
- select element: Defines a dropdown list.

<div>
        <h1>Travel Form for our trip</h1>
        <form action="form.php">
          <input type="text" placeholder="Enter Your Name" /><br />
          <label for="sectionida">
            <input
              type="radio"
              value="Section a"
              name="section"
              id="sectionida"
            />
            Section A
          </label>
          <label for="sectionidb">
            <input
              type="radio"
              value="Section b"
              name="section"
              id="sectionidb"
            />
            Section B
          </label>
          <label for="sectionidc">
            <input
              type="radio"
              value="Section c"
              name="section"
              id="sectionidc"
              class="red blue"
            />
            Section C </label
          ><br />
          <input type="checkbox" id="foodcanteen" class="red" name="canteen" />
          <label for="foodcanteen">Want Food Canteen card</label><br />
          <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input -->
          <textarea
            name="explain"
            id="explain"
            cols="30"
            rows="10"
            placeholder="Explain why you want to join "
          ></textarea>
          <select name="car" id="car">
            <option value="no-car">Select your car</option>
            <option value="onmi">Omni</option>
            <option value="omni2">Omni2</option>
            <option value="dzire">Dzire</option>
            <option value="i10">i10</option>
            <option value="i20">i20</option>
          </select>
        </form>
      </div>

Tables: We use tables to display tabular data.
- <table> – this tag is used to define Tables.
- <tr> – table row.
- <td> – table data cells.
- <th> – for table heading which is bold and center.
- <thead></thead>- used to wrap table head.
- <tbody></tbody>- used to wrap table body.
- colspan attribute- wraps multiple columns.

<div>
        <table>
            <caption>Max Scores by different players in FauG</caption>
            <thead>
                <tr>
                    <th>S.No</th>
                    <!-- <th>Player Name</th> -->
                    <th colspan="3">Max Score</th>
                    <!-- <th>Game</th> -->
                </tr>
                <tr>
                    <td>1</td>
                    <td>Sachin</td>
                    <td>123</td>
                    <td>FauG</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2</td>
                    <td>Rahul</td>
                    <td>123</td>
                    <td>PubG</td>
                </tr>
            </tbody>
        </table>
    </div>

Videos: <video></video> tag is used to work with videos. We can use it's attributes to adjust width(height adjusts automatically if not specified) and also to auto-play and loop the video.

<div>
   <iframe width="560" height="315" src="https://www.youtube.com/embed/9-GSIN8s5Eo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
</div>

The codes after execution some what looks like this (it is just a sample output):
The directory structure of the folder should be like:

Phase 5

Search Engine Optimization is also as important as the code itself. We will first focus only on html standpoint of SEO and not the keyword building and content optimizing aspect of SEO. There are mainly two types of SEO:

On page SEO- Done by html developers
Off page SEO

Developers can implement SEO using the following techniques:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Seo is like this is a nice article on seo">
    <meta name="keywords" content="seo, search, seo 2021">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>SEO in 2022: A beginners guide</title>
</head>

Set the title crisp, nice and to the point.
Set the meta-data description. <meta name="description" content="........."></meta>.
Set a nice URL slug.
Set the meta keywords tag.
Set the meta anchor tag <meta name="author" content="Ayushi"></meta>.
Set a favicon.
Compress images and other resources.
Remove unused html/css/js files and compress them.
Add alt texts to the embed images/videos/other such contents.

Dumping codes into GitHub

I always prefer to keep an online reference, maybe in form of a blog or in GitHub. To continue doing the same with GitHub we should have git in our local system and a GitHub account. Follow the steps:

git init to initialize the working folder.
git add to add all the files into the staging area.
git diff to check the modified files.
git commit -m "message...." to commit the changes with appropriate messages.
Now we go and create a remote repository from our GitHub account or GitHub desktop version.
git remote add <repository name> <repository url> to add files in our remote repository.
git push <repo name> master to push all the codes into the remote repository.

For Future Reference.

Spreadsheet Basics

Ayushi Das — Wed, 19 Jan 2022 13:49:05 +0000

Below, you will find a list that covers two types of spreadsheet programs: Microsoft Excel and Google Sheets. The list includes quick-start guides, tutorials, and more. The examples in this course use Google Sheets, but you can follow along using Excel or any other spreadsheet application. The user interface might be a little different, but it should look and work similarly.

Microsoft Excel

Office Quick Starts: Scroll down to the Downloadable guides section to download the Excel Quick Start Guide: This PDF guide begins with a labeled map of Excel that can guide you through the basic tasks you can accomplish in Excel. For tips on starting and opening Excel, this Microsoft Support page will show you how to begin a new workbook.
Excel video training: This is a collection of step-by-step videos to use all sorts of Excel features, including adding and working within rows, columns, and cells; formatting; using formulas and functions; and adding charts and pivot tables.
Sort data in a range or table: This page guides you through all of the steps you will need to sort data by number, text, and color. You’ll also have the option to sort by custom list so that you can customize exactly what you want to sort.
Filter data in a range or table: This article has step-by-step instructions on how to filter an Excel spreadsheet to show only the data you want to see. You can also use built-in comparison operators, such as “greater than” and “top 10” to reveal only the most relevant data.
Format a worksheet: The guide will help you select and format your Excel spreadsheet, then change the borders, shading, colors, and text. This can help improve your spreadsheet’s readability.

Pro tip : If you’re searching for information about using customizable options, check out Microsoft’s Guidelines for organizing and formatting data on a worksheet. This article provides clear methods for creating easy-to-read spreadsheets.

Google Sheets

Google Sheets cheat sheet: The cheat sheet puts all the basics of Sheets on a single page for easy reference. Here, you can learn about customizing your spreadsheet and the data inside; working with rows, columns, and cells; sharing your spreadsheet with others; creating different versions and copies of a spreadsheet; and more.
Get started with Sheets: Create and import files: This guide is a step-by-step guide for working with Sheets. You start by learning how to open a spreadsheet, then move on to adding data.
Sort and filter your data: This resource can help you organize data in Sheets. Use this guide to sort part or all of a spreadsheet. You can sort by text, number, and color. Then, learn how to create filters to show only certain data while hiding the rest. Finally, the article includes information on creating, saving, and removing a filter view.
Edit and format a spreadsheet: This will help you make easy-to-read spreadsheets. You will learn how to assign a color, customize borders around cells, and change the appearance of text. If you’d like to give your spreadsheet a theme, you can scroll to the bottom of the page and find how to apply it to parts of your spreadsheet.

Tip: Microsoft Excel and Google Sheets are very similar in terms of calculations, formulas, functions, and many other features. But there are some differences, which can make it tricky to switch from one to the other. If you are moving between Excel and Google Sheets, find a quick list of the differences between the two kinds of spreadsheet applications in Overview: Differences between Sheets and Excel.

Data Analytics: Case Study 101

Ayushi Das — Sat, 15 Jan 2022 03:55:58 +0000

If you are somebody who has just started off with Data Analytics and want to get a brief idea about the roadmap of how to plan a project, this article is for you. It has just the "enough" basics to get you started.

Any time you observe and evaluate something in the world, you’re collecting and analyzing data. Your analysis helps you find easier ways of doing things, identify patterns to save you time, and discover surprising new perspectives that can completely change the way you experience things.

Here is a real-life example of how one group of data analysts used the six steps of the data analysis process to improve their workplace and its business processes. Their story involves something called people analytics — also known as human resources analytics or workforce analytics. People analytics is the practice of collecting and analyzing data on the people who make up a company’s workforce in order to gain insights to improve how the company operates.

Being a people analyst involves using data analysis to gain insights about employees and how they experience their work lives. The insights are used to define and create a more productive and empowering workplace. This can unlock employee potential, motivate people to perform at their best, and ensure a fair and inclusive company culture.

The six steps of the data analysis process that you have been learning in this program are: ask, prepare, process, analyze, share, and act . These six steps apply to any data analysis. Continue reading to learn how a team of people analysts used these six steps to answer a business question.

An organization was experiencing a high turnover rate among new hires. Many employees left the company before the end of their first year on the job. The analysts used the data analysis process to answer the following question: how can the organization improve the retention rate for new employees?

Here is a break down of what this team did, step by step.

First up, the analysts needed to define what the project would look like and what would qualify as a successful result. So, to determine these things, they asked effective questions and collaborated with leaders and managers who were interested in the outcome of their people analysis. These were the kinds of questions they asked:

What do you think new employees need to learn to be successful in their first year on the job?
Have you gathered data from new employees before? If so, may we have access to the historical data?
Do you believe managers with higher retention rates offer new employees something extra or unique?
What do you suspect is a leading cause of dissatisfaction among new employees?
By what percentage would you like employee retention to increase in the next fiscal year?

It all started with solid preparation. The group built a timeline of three months and decided how they wanted to relay their progress to interested parties. Also during this step, the analysts identified what data they needed to achieve the successful result they identified in the previous step - in this case, the analysts chose to gather the data from an online survey of new employees. These were the things they did to prepare:

They developed specific questions to ask about employee satisfaction with different business processes, such as hiring and onboarding, and their overall compensation.
They established rules for who would have access to the data collected - in this case, anyone outside the group wouldn't have access to the raw data, but could view summarized or aggregated data. For example, an individual's compensation wouldn't be available, but salary ranges for groups of individuals would be viewable.
They finalized what specific information would be gathered, and how best to present the data visually. The analysts brainstormed possible project- and data-related issues and how to avoid them.

The group sent the survey out. Great analysts know how to respect both their data and the people who provide it. Since employees provided the data, it was important to make sure all employees gave their consent to participate. The data analysts also made sure employees understood how their data would be collected, stored, managed, and protected. Collecting and using data ethically is one of the responsibilities of data analysts. In order to maintain confidentiality and protect and store the data effectively, these were the steps they took:

They restricted access to the data to a limited number of analysts.
They cleaned the data to make sure it was complete, correct, and relevant. Certain data was aggregated and summarized without revealing individual responses.
They uploaded raw data to an internal data warehouse for an additional layer of security.

Then, the analysts did what they do best: analyze! From the completed surveys, the data analysts discovered that an employee’s experience with certain processes was a key indicator of overall job satisfaction. These were their findings:

Employees who experienced a long and complicated hiring process were most likely to leave the company.
Employees who experienced an efficient and transparent evaluation and feedback process were most likely to remain with the company.

The group knew it was important to document exactly what they found in the analysis, no matter what the results. To do otherwise would diminish trust in the survey process and reduce their ability to collect truthful data from employees in the future.

Just as they made sure the data was carefully protected, the analysts were also careful sharing the report. This is how they shared their findings:

They shared the report with managers who met or exceeded the minimum number of direct reports with submitted responses to the survey.

They presented the results to the managers to make sure they had the full picture.
They asked the managers to personally deliver the results to their teams.

This process gave managers an opportunity to communicate the results with the right context. As a result, they could have productive team conversations about next steps to improve employee engagement.

The last stage of the process for the team of analysts was to work with leaders within their company and decide how best to implement changes and take actions based on the findings. These were their recommendations:

Standardize the hiring and evaluation process for employees based on the most efficient and transparent practices.
Conduct the same survey annually and compare results with those from the previous year.

A year later, the same survey was distributed to employees. Analysts anticipated that a comparison between the two sets of results would indicate that the action plan worked. Turns out, the changes improved the retention rate for new employees and the actions taken by leaders were successful!

Is people analytics right for you?
One of the many things that makes data analytics so exciting is that the problems are always different, the solutions need creativity, and the impact on others can be great — even life-changing or life-saving. As a data analyst, you can be part of these efforts. Maybe you’re even inspired to learn more about the field of people analytics. If so, consider learning more about this field and adding that research to your data analytics journal. You never know: One day soon, you could be helping a company create an amazing work environment for you and your colleagues!

Source: Data, Data, Everywhere...

5 YouTube channel to learn Data Science!

Ayushi Das — Fri, 31 Dec 2021 06:01:41 +0000

“Data is the new science. Big Data holds the answers.” -By Pat Gelsinger

Learning Data Science might seem overwhelming, especially with the blooming trend over the last decade. Beginners are encountering a tough time finding the correct material to commence with the learning journey. In the era of online self-paced courses YouTube has proved to be the most beginner-friendly platform. It is a kick start whenever there is something to learn from basics to advanced level. A lot can be learned about data science by following YouTube channels and here I have listed down the YouTube channels on data science that I follow.