Part 6 – Create Portfolio Block | Make Desktop First Responsive Portfolio Website

Hi my name is the Bibek and in this
session I’m going to show you how to create portfolio block. Before starting
let’s make sure how it should work. on hover, you can see the image is zooming.
We can achieve this using CSS property called transform which I will show you
later in this tutorial. On bottom you can see some dots. If you
click any one of them, another part of images are showing. This
is called carousel behavior which can be achieved using some jQuery plugin. In
this tutorial I’m going to use jquery plugin called slick. There are several other free plugins
available but the reason I’m using this plugin is it is fully responsive, easy
to customize, has got nice documentation and supports across major browsers. If
you scroll and look at the site, you can see there are several other carousel
styles that you can use for your website. Make sure you choose the best one that
can be used for your website. For this tutorial I’m going to use the one called
responsive display but how can we begin? Let’s get started by importing JS
library and its CSS. We will use CDN method to import them so on top
menu click on get it now. Then copy the CSS and paste it inside the head tag. Now copy this Javascript and paste it
after this jQuery library. Make sure you add https:// to the beginning
of the URL. Since this is jQuery plugin, it is
compulsory that you need to add jQuery library first before adding any other
jQuery plugin. If you forgot to add Jquery library then it doesn’t work. So
always remember to add them. Then on top menu click on usage so that
you can grab the HTML but before that let’s try to add this portfolio heading
and container div so that our carousel will sit nicely at the center. Just after
services block we will use portfolio block with exactly same structure. You
can see everything looks similar except ID and class name. I assume that you now
know why I use those ID and class name. If you are not sure please watch my another
tutorial where I have added services block. Now let’s continue to add the HTML so
that we can get nice carousel for our website.
Just copy and paste it in your portfolio block. Then again on top menu click on demos. Scroll down to responsive display then
you will get some jQuery code that you need to add on your main.js. Let’s
add them. Notice that in Jquery it is using
responsive class whereas in HTML there is no responsive class so instead
of in your-class replace it with responsive class name. Then look at the site for the preview. it seems working now but instead of 3

s add some more so that you can see the carousel effect more nicely. Perfect!! now let’s do some modification
in HTML and JS before adding CSS. In HTML instead of responsive class name I
want to replace it with myPortfolios class name. It is because responsive is
too generic name. I want some unique name which represent that it is for portfolio. Then instead of

s I want to use unordered list with images inside. Now since our class name is changed in HTML we have
to change the class name in JS. So now it will be ‘myPortfolios ul’. Let’s
check the preview again. Good job!! looking better now but instead
of 3 images it is showing 4 images.
Let’s fix them in main.js. Here you can see properties called slidesToShow
and slidesToScroll. I don’t think I have to explain. The name itself is
very clear. Change it to 3 instead of 4 and
it should work. Excellent. I’ll explain about this Responsive
property later in another session. Then we don’t need this previous and
next button. Let’s find the property to hide them on slick website. On top menu
click on settings and try to find the correct property name. It’s called arrows.
The default value is set to true and it is boolean type so in order to hide them
we have to use this property and set it to false. So far our HTML and JS looks
perfect. Now we only need to work on CSS to fix rest. Let’s do it now. First let’s try to style this number
into dots. all CSS properties here are basic ones
like background, border and so on. I have also used properties like text indent -9999px and overflow:hidden. This is to hide that numbers in dots. Then to align
these dots together side-by-side, use display:inline-block in a

  • . You can also use
    margin to add some spacing in between. Tthen to keep it center, use text-align:
    center. To use active state, you can use slick-active class in
  • . Add margin bottom in slick-list class to
    add spacing in between images and dots. Then to add zoom effect in images use
    transform on hover. Also use transition property if you want to add some
    animation. Zoom effect is not good as expected, use
    overflow:hidden in
  • to fix them. Finally we have one last issue remaining.
    The size of image is bigger than size of
  • add max width:100% and height:auto intag to fix it. Excellent!! you got nice portfolio block
    now using slick plugin. Feel free to comment below if you’ve got any
    questions. This is the end of this session and in the next session I will show you how to
    create contact block. Thank you.
  • Add a Comment

    Your email address will not be published. Required fields are marked *