Speaker at HTML/CSS Event

I was invited as a speaker at VIIT Engineering College for a session on “Learn HTML/CSS by creating a portfolio”

I started the session by giving an introduction about HTML and CSS. In the introductory part I explained about what is HTML & CSS, HTML & CSS syntax, HTML Tags, correct HTML syntax, examples of HTML & CSS code, different ways in which CSS can be added for a website, CSS selectors, etc.

After the introductory part I explained about importance of having a portfolio and various uses of having a portfolio.
Then we started with hands-on session (coding) of how to create a portfolio.
During the hands-on session I explained about various HTML/CSS tags and concepts while coding and creating a portfolio.

Once our portfolio was created I gave a demo.
In the demo I explained step by step in detailed about :
1. How to install git
2. Uploading their portfolio code on GitHub
3. Using Netlify free hosting for their portfolio
4. Netlify continuous integration and continuous deployment feature

At the end we had a Q&A round where I cleared all the doubts of attendees.
Overall it was an awesome event. After the event many attendees created their GitHub account, used Netlify for hosting and created their own HTML/CSS portfolio.

Review of attendees after the session

Please like and share below to show your support !

Firefox Dev Tools 3 Panel Web Inspector – HTML + CSS + Extra options

Beginner friendly guide to Firefox Dev Tools

I want to show you two really quick things about the Firefox Dev Tools that are little tiny icons that you might not notice, but you definitely want to know about.

I’m here, on a random web page, working on the CSS, HTML and right there, you’ll see that there’s this little icon, that you can click, that toggles the Firefox Dev Tools to switch from having two panels to having three panels.

Toggle on 3 pane inspector

Now there’s a good chance when you downloaded Firefox, and you opened it for the first time, it will open with three panels, but in case if it didn’t, or in case you switched back to two and you didn’t realize it, this is where the button is.

You click this little button, and it goes from having HTML and CSS to having HTML and CSS and other options.

And these other options include layout tools, a panel that gives you the computed values for everything in CSS, the changes tab lets you know when things have changed or keeps track of your changes, the Font inspector gives you a way to adjust and change fonts and mess around with variable fonts, (if you’re using a variable font) and the Animations inspector (if you have animations on the page) is a place where you can see exactly what’s going on with animations.

I think it’s really handy to be able to see the HTML in one panel, CSS in another panel and to see other things about CSS in the third panel.

The other thing I wanted to make sure you know about is a little button for messing around with print style sheets.

Toggle print media simulation for page

You can see in the above image , there’s a little icon, that looks like a piece of paper and it makes the browser think that it’s about to print a piece of paper.

It will turn on any media queries that you have set for Print, it will activate the kind of rendering engine behavior that gets activated whenever someone goes to actually print the page.

So it’s a quick way, if you’re styling print style sheets, you can check print media simulation of the page, and not have to actually find a printer and print it out.

Highlighted buttons, navigation links will be removed after clicking on print media simulation

You can see in above image which displays a MDN CSS grid layout webpage, the buttons, navigation links (highlighted in the image above) is not needed when you’re printing it out.
Because None of these buttons will actually do anything on a piece of paper.
Below image displays the webpage after clicking on tiny button to toggle print media simulation

Result after clicking on print media simulation

That’s one of the things you want to do, when you have to print style sheets, is to remove things that you don’t necessarily need.

If this post was helpful, please like and share below to show your support !

Introduction to plotly.js - open source graphing library

Plotly.js is a library suited for JavaScript applications which make use of graphs and charts. There are a few reasons to consider using it for your next project:

  1. Plotly.js uses both D3.js and stack.gl
  2. Plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps
  3. It is an open source library

It has more than 9900 stars on Github

There are 2 main concepts in Plotly :

1. Data
2. Layout

Data

The Data object defines what we want to display in the chart (that is, the data). We define a collection of data and the specifications to display them as a trace. A Data object can have many traces. Think of a line chart with two lines representing two different categories: each line is a trace.

Layout

The Layout object defines features that are not related to data (like title, axis titles, and so on). We can also use the Layout to add annotations and shapes to the chart.

Let’s looks at the setup :

First, include the file from CDN

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

Next, let’s plot a line graph :

HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [19, 14, 12, 16],
  type: 'scatter',
};

var trace2 = {
  x: [12, 22, 23, 24],
  y: [15, 4, 10, 8],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Result :

Basic setup can be done with a file inclusion, a DOM element, and a script for plotting.
After the inclusion of the Plotly.js library in , we have defined an empty <div> to plot the graph.
Plotly.new() draws a new plot in the element.
We can have a Line and Scatter Plot charts by inclusion of mode in the trace variable.
The legend in a graph is linked to the data being graphically displayed in the plot area of the chart.
We can customize charts by using different options like legend name, marker color, marker size, line color, line width, chart title, mode, etc.

Example :


HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv">
	<!-- Plotly chart will be drawn inside this DIV -->
  </div>
  
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [11, 14, 12, 16],
  mode: 'markers',
  name : "Apple",
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 13
  }
};

var trace2 = {
  x: [12, 13, 14, 15],
  y: [17, 15, 10, 19],
  mode: 'lines',
  name : "Mangoes",
  line: {
    color: 'rgb(55, 128, 191)',
    width: 6
  }
};

var trace3 = {
  x: [11, 21, 31, 41],
  y: [14, 19, 16, 13],
  mode: 'lines+markers',
  name : "grapes",
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 9
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 2
  }
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Styling Example'
};

Plotly.newPlot('myDiv', data, layout);

Result :

If we use markers as we have used in trace1 , notice that we only get points marked in the graph coordinates and do not see the connected line across all points

By now we have seen some examples of line, let’s quickly plot a bar chart using ‘bar’ as type.

Example :

HTML :

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

JS :

var data = [{
  x: ['lions', 'tigers','monkeys'],
  y: [21, 15, 24],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

Result :

Did you found this article helpful ? I try my best to write a deep dive article.

I had a pretty good experience with Plotly. What are your thoughts about it after this overview ? And what other tools do you use to generate charts for the web ? Share them in the comments!

If this post was helpful, please like and share below to show your support !
Thank you for reading