Construct a Static Portfolio With Superior CSS Bar Chart

Construct a Static Portfolio With Superior CSS Bar Chart

In a earlier publish, I confirmed you the best way to construct a wonderful fullscreen portfolio web page. Throughout that tutorial we additionally realized the best way to create a responsive CSS column chart. On this tutorial we’ll construct one other engaging static portfolio web page, this time that includes a pure CSS bar chart with out utilizing any exterior JavaScript library, SVG, or the canvas component!

What We’re Constructing

Right here’s the challenge we’ll be creating:

We now have a whole lot of thrilling issues to cowl, so let’s get began!

Observe: This tutorial assumes some good CSS information. As an example, try to be conversant in CSS positioning and flexbox fundamentals.

1. Start With the Web page Markup

The web page markup consists of a header and three fullscreen sections:

Observe: Past the weather’ particular lessons, our markup accommodates quite a lot of utility (helper) lessons. We’ll use this technique to maintain our CSS as DRY as doable. Nevertheless, for the sake of readability, inside the CSS we received’t group widespread CSS guidelines.

2. Outline Some Primary Kinds

Following what we’ve simply mentioned above, we first specify some reset guidelines together with quite a lot of helper lessons:

The naming conventions for our helper lessons are impressed by Bootstrap 4’s class names.

3. Construct the Web page Header

The web page header contains:

The header layout

Header HTML

Header CSS 

4. Construct the Hero Part

The primary part of our web page contains:

  • A heading
  • A call-to-action

Right here’s what it is going to appear to be:

The layout of the first section

Part #1 HTML

Part #1 CSS

The decision-to-action features a skinny line which is animated infinitely, compelling the person to scroll right down to see what’s beneath “the fold” (which can or could not exist).

Its kinds:

Part #1 JavaScript

Initially the call-to-action will likely be seen. However when the person begins scrolling, it is going to disappear. Extra particularly, it is going to obtain the is-hidden class which we have now simply outlined within the kinds above.

Right here’s the required JavaScript code:

5. Construct the Part #2

The second part of our web page contains:

  • A background picture
  • The bar chart which demonstrates net expertise

Right here’s what it appears to be like like:

The second section layout

Part #2 HTML

Type the Background Picture

The left a part of this part accommodates an picture taken from WordPress Code Backgrounds on Envato Components. It’ll give us the environment we’re searching for, while inspiring the colours we use elsewhere within the design:

WordPress Code Backgrounds
WordPress Code Backgrounds

Some key issues:

  • The picture will seem on screens wider than 900px and
  • we’ll use CSS (through the background-image property) and never HTML (through the img component) to put the picture inside the web page. We select this technique as a result of that offers us a simple means to improve the picture look. For instance, we’ll skew it by making the most of its ::after pseudo-element. You may even play with its colours utilizing background-blend-mode: luminosity, for example.

Observe: By default an img is an empty component and doesn’t have pseudo-elements.

The corresponding kinds:

Type the Chart

At this level we’ll focus on probably the most difficult a part of our demo; the best way to assemble the bar chart. 

The chart can have two axes. On the y-axis we’ll place the net expertise (CSS, HTML, JavaScript, Python, Ruby). On the opposite x-axis we’ll put the talent ranges (Novice, Newbie, Intermediate, Superior, Skilled).

The chart axes

The y-axis

By way of markup, every talent is a listing merchandise positioned contained in the .chart-skills record. Subsequent, every record merchandise will maintain its textual content inside a span component, like this:

We outline a hard and fast width for the span component equal to 120px. To keep away from repetition and so we are able to simply change this worth (as different values will depend upon it), let’s retailer it inside a CSS variable:

Every record merchandise will include its personal ::earlier than and ::after pseudo-elements:

The ::after pseudo-element can have a light-weight grey coloration and a static width which is calculated by subtracting the span width from the record merchandise width:

Right here’s the way it appears to be like:

The after pseudo-element

The preliminary width of all ::earlier than pseudo-elements will likely be 0:

However as quickly because the chart turns into seen within the viewport, their width will likely be animated and obtain a price that will likely be decided by the related talent stage:

Add Class When in View

There are a number of methods to detect whether or not a component is seen within the viewport or not. Let’s benefit from the next useful operate extracted from an previous, but common StackOverflow thread:

If in case you have learn my earlier tutorials, you would possibly do not forget that I’ve additionally used this operate to animate a vertical timeline.

So, again to the job in hand! When the chart turns into seen within the present viewport, we’ll give it the in-view class.

Right here’s the JavaScript code that does this job:

The ::earlier than pseudo-elements must be animated sequentially. To present them the specified transition velocity, we’ll use two different CSS variables together with the calc() CSS operate.

Listed here are the CSS kinds accountable for revealing these sudo-elements:

Needless to say Microsoft Edge doesn’t help the above math operations, so if it’s essential to help it, simply cross some static values as a substitute, like this:

The x-axis

By way of markup, every stage is a listing merchandise positioned contained in the .chart-levels record. Subsequent, every record merchandise will maintain its textual content inside a span component, like this:

Some issues to notice:

  • We set the record as a flex container. Additionally, we completely place it and provides it a left padding equal to the width of the spans of the primary record.
  • We give record objects flex-grow: 1 to develop and take up all of the out there house. 
  • The spans are positioned on the very backside of their father or mother record merchandise. 
The position of the span elements

The related kinds for that record:

6. Construct the Part #3

The third part of our web page contains:

Right here’s what it appears to be like like:

The layout of the third section

Part #Three HTML

7. Go Responsive

We’re nearly executed! As one final thing, let’s be certain that the textual content has a strong look throughout all screens. We’ll apply a rule focusing on slim screens: 

One essential observe right here is that in our kinds we’ve used rem for setting the font sizes. This strategy is admittedly helpful as a result of the font sizes are relative to the basis component (html). If we lower its font dimension like within the code above, the rem-related font sizes will likely be dynamically decreased. In fact, we may have used rems for the opposite CSS properties as nicely.

The ultimate state of our challenge:


On this tutorial we improved our CSS information by studying the best way to construct a gorgeous static portfolio web page. We went one step additional and created a responsive bar chart with out utilizing any exterior JavaScript library, SVG, or the canvas component. Simply with plain CSS!

Hopefully this tutorial has given you adequate inspiration for constructing your superior portfolio web site. I’d like to see your work–you should definitely share it with us!

Subsequent Steps

If you wish to additional improve or lengthen this demo, listed below are two issues you are able to do:

  • Add clean scrolling habits to the menu hyperlinks with out utilizing any exterior JavaScript library.
  • Use the simpler Intersection Observer API as a substitute of the scroll occasion for checking whether or not the chart is seen within the viewport or not. 

As all the time, thanks for studying!

Extra Sensible Initiatives to Increase Your Entrance-end Abilities

Supply hyperlink

Spread the love
No Comments

Post A Comment