The Behance Blueprint

The Behance Blueprint


Chances are you’re making a critical
mistake with your portfolio. Oftentimes as creative professionals, we invest tons
of time and effort in our clients’ projects but we don’t take the same care
and attention when it comes to investing in ourselves. Your portfolio is not
limited to a collection of completed work but should also include your
expertise, process, strategy, and prove you’re able to make good decisions when
designing with a goal in mind. It’s not enough to be skilled at what you do, you
have to take it a step further and get others to believe you can actually
provide value. When you use this approach and apply the blueprint framework, you’ll
never have to wonder whether or not your portfolio reflects your best work.
Setting up your design portfolio is one of the most essential areas as a
creative and is often overlooked. This also may be a reason why you’re not
securing as many clients as you could. Your portfolio is not everything that it
could be. My name is Nathan Allotey, I’m a designer and marketing strategist and
for the last five years I’ve been solely focused on teaching designers how to
bridge the gap between their creative skills and business. In this course, we’ll
walk through the process of creating a portfolio project from start to finish.
Everything from mindset all the way down to what specific creative elements you
should include. We will walk through how to compose, curate, and create the
necessary assets to best communicate your design skills. I get completely
transparent and communicate where I’ve failed in the past but also I walk
through how to avoid those common pitfalls and take a leap forward. You can
anticipate tips, examples from real client projects, case studies, and live
portfolio reviews. No matter if you’re a student, freelancer, just getting started,
or have years of experience, the Behance Blueprint will help you focus on what’s
important when creating your portfolio.

WordPress Tutorial: How to Create a Multilingual Site

WordPress Tutorial: How to Create a Multilingual Site


Hi and welcome to WordPress.com. This video will show you how to
create a multilingual website or blog on WordPress.com. There are three different ways
you can set up your website if you have content in multiple languages. The first option is one site, one post. When you write a post, do
the first half in one language. Then, at the bottom of the post,
write it in the other language. Anyone reading your site
just knows they need to scroll. You could also add a page jump,
so that your readers can skip ahead to their language. Find out how on our support site. The second option is one site, two posts. You can create a site and have
different posts and pages, with the same content in each language. When you write a post,
write it in one language. Then, create a new post
and write it in the second language. You can add categories to your posts
to organize them. You can also have a link on each post
or page, to send people to the same content in the other language. Then, create a menu to link
to your other language. You can use custom menus
to make it easier for your readers to find all the posts in each language. Create or edit a custom menu,
or add an element to your menu linking to your category
for your other language. The third option is to create
two separate sites. Create two sites using the same theme. Do you want your blog
to have a custom domain? You can use two different domain names,
or set up a sub-domain of the main domain. For example, you can have one site
at myenglishsite.com, and the other at monsitefrançais.com. Or you could have mywebsite.com,
and fr.mywebsite.com. It’s up to you. You can use custom menus
to cross-link your sites. Add a custom link to each menu,
that links to your other site, so visitors can switch
to that language easily. Set one site’s language to the
first language in which you write, and the other to the second language. Each time you write a post,
write it twice: once in language number one on site number one, and again in language two
on site number two. Your followers can subscribe
to one site or both, and your posts will appear
in the tags section in the reader for each site’s language. For more information on making
your site accessible in different languages, visit the WordPress.com support site.

HTML5 + CSS3 Special Effects for Your Website

HTML5 + CSS3 Special Effects for Your Website


with the introduction of html5 and css3
there is a whole bunch of special effects that we can include in our web
page designs without a single PHP jquery or JavaScript and that’s a good thing
right in this series of short html5 and css3 classes we’ll explore a whole range of
special-effects to brighten up our websites as well as showing our site
visitors what we want them to do in this class will create a set of
interconnected spinning Cogwheels the result isn’t really useful but it looks
cool and we get to use some of css3 keyframes and explore the use of the
class plus class properties. This class is one of a series where we create
special effects with html5 and css3 that you can use on your website today just
like this hi I’m Jeb Riordon a project manager
turned html5 and css3 web developer, but that’s enough about me, right? if you want to brighten up your website
make it more fun for your readers then follow along with this series of classes
because coming soon are fancy buttons sliding images and carousels so enroll
in the class and let’s make some spinning cog wheels

► HTML5 & CSS3 Tutorial — 001 — Welcome Video! (w/ GeekDisorder)

► HTML5 & CSS3 Tutorial — 001 — Welcome Video! (w/ GeekDisorder)


Hello, welcome to Geek Disorder’s
HTML5, CSS3 and JavaScript/jQuery Series. This is Lavick, I’ll be walking you through the series. This is our welcome video. It’s going to cover
Who this series is for and What will it Cover? Alright. Who is this series for? This series is for people that may have never seen
HTML, CSS, or JavaScript / jQuery before. We will start with the very basics and work
our way up to some of the more advanced topics. This series is also for people that may have worked with xHTML, HTML, and CSS like the earlier versions like HTML4 . But may not know what’s new in HTML5 and CSS3. If you want to learn the basics of
JavaScript and jQuery this series is for you. We won’t be going into the more advanced
topics of Javascript and jQuery But Geek Disorder will be putting out a full series, on JavaScript and then a series on the Javascript libary jQuery in the future. What will this series cover? We’re going to cover HTML5, CSS3,
the basics of JavaScript and jQuery. And a quick overview of the series is. Well, we’re going to start with introduction to web development. That’s going to cover a basic overview of web development. The web development tools you can use. What you will need to actually complete this series. And special web development issues. We’re going to move on the introduction to HTML5,
like the structure of a web page, formating with CSS The CSS block model, laying out your web page with CSS. Some more intermediate topics of HTML5: Links, lists, images, tables, forms, audio, video
and formatting your page for printing. Then we’ll hit some of the more advanced
topics of HTML5 like JavaScript. We’ll introduce you to the JavaScript library jQuery. Also, we’ll introduce you to jQuery mobile. Make some good web pages for tablets, your phones, such as that. We’ll move on to some more advanced topics
in HTML5 and CSS3, like canvas. We’re going to touch on designing a web page. And then deploy your web site from your computer
onto the web site so everyone can see it. How in depth will this series be? Well, the HTML5, CSS3, and JavaScript / jQuery series
will be around 75 to 100 videos. each being 7 to 15 minutes in length on average. We’ll do our best to cover as much HTML5 and CSS3 as we can. If we miss something, just let us know. We will be more than happy to work on putting
out a video to cover it. Add it to the series. We will cover the basics of some of the more
advanced topics in HTML5/ CSS3 like I said canvas. We will definitely do another series that goes a lot
more in-depth on canvas and such in the future. We will cover the basics of JavaScript and jQuery. And putting out a full series that cover the more advanced
topics in Javascript jQuery in the future also. Well, this is Lavick with Geek Disorder. I’ll hope you all will enjoy this series. So, please. We’ll be putting out videos pretty regularly. So, please join us for our HTML5, CSS3,
and JavaScript/ jQuery series! Y’all have a good day.

2 Website – Flexbox – Grid CSS – For Beginner ?

2 Website – Flexbox – Grid CSS – For Beginner ?


Hello Youtube before I always thing about Flex-box and gird CSS I think is very difficult but after I practice on 2 website I can feel it easy for myself a beginner So in this video I will recommend 2 that website First is this website Flexbox Froggy this website to be practice with frog and pond it is a game for everyone care about flexbox and CSS it is easy for beginner in world of web design you can watch video, like this You can reset level, chose any level And hint Property value for Properties Second is this website Gird Garden this website to practice with water and carrot also it is a game for everyone care about the gird css but you can learn both Flexbox and grid CSS you can watch video, like this Thank everyone watch this video don’t forget subscribe and leave a comment at the bottom Bye Bye, see again.

How to Download fonts and Generate Embed Code – Introduction to CSS Tutorial for Beginners – Part I

How to Download fonts and Generate Embed Code – Introduction to CSS Tutorial for Beginners – Part I


Hello and welcome to another new episode of
‘Learning Simplified’. In this tutorial, what we had told you previously that today
we are going to learn about font matching, that means, this is the font that has been
used in your website template, but when we try to implement this font into our website,
what we see, this is the font-family originally that we are getting back from our site. Now
the problem is, this is actually a system defined font, that means, this is the common
font in-built to every system for windows, and anytime when we are not mentioning any
kind of particular font format into our web project, then it will execute the default
font format that it has been instructed to. So all we have to do, we have to match this
font, that means the font, that has been provided into our template is this is another font
that we are using on and we have to match this font to our project. But before that
there are some vital issues, those have to be taken care of before we start making any
kind of font formatting. So, let’s get back to our project first.
In this ‘stylesheet.css’, first of all, make some quick amendments. This is the parent
div ‘tagline-holder’. Now we are going to revert back any kind of height that has
been provided to it. So all we are going to do, we are commenting out those height syntax,
all those heights those were attributed to this ‘tagline-holder’, and its associate
child divs. So let’s comment it out. This is my friend…this is known as the CSS Commenting.
So the necessity of commenting is that, whenever you are providing this kinda stuff ahead any
instruction or any syntax, then what it does, it just nullifies all the effects that could
have been imposed by the corresponding syntax. So in this case, as we are commenting out
this height 100px, that means from now on, there won’t be any height that should be
executed in this parent div that is known as ‘.tagline-holder’. So what we are doing
here, we are just commenting out any kind of height that is present into this particular
parent div known as ‘tagline-holder’. So here’s the first height that we get over
here. The next child div here is ‘tagline-holder-first-children-logo’, and a height of 100px is also assigned over
here. So what we need here is to comment it out… again. Same thing for the second child
div….. and for the next one. So all the three child divs and the parent div, in these
divs, the heights are now, or the effect of height that has been imposed here is nullified.
Now we are getting back to our project but before that, all we need to do, we need to
provide some kind of padding over here. i.e. , we are providing a ‘padding-bottom’
property. So we are providing this particular instruction. Now this padding-bottom attribute
has been provided over here. Now we are just saving this page ‘stylesheet.css’, getting
back to our project and reload. And we can see now that all the height those has been
provided those heights are now nullified on these extreme divs, i.e., this logo box and
contact us box, these two boxes, those are executing the property of ‘padding’ from
the bottom end. Now in case of this middle content, that is known as the ‘tagline-content’
over here, this content is now aligning in the extreme left position. So all we need
to do, first of all, to align this text into center. So what we need to do, get back to
‘stylesheet.css’, and provide here another syntax, such as ‘text-align:center’. Press
‘CTRL + S’, go back to your project, reload, nothing happens. Sorry. We forgot to provide
the separator over here. So I think now you are aware of the fact that why to provide
the separator because instead, no such property beyond the point where you made the error
will be visible to anybody. So take care to provide the separator each time whenever you
are writing down the properties to a particular class name.
Just press ‘CTRL + S’, get back to your project and reload, and you see now this tagline
is aligning into the middle position of the web page and off course of this div.
Now get back to your project, first of all get back to ‘index.html’ and see over
here, and you see that the tagline comes under this tag,

. Again, this

tag
is coming under the selector name which is known as ‘tagline-holder-tagline-content’.
So all we need to do first of all, copy this selector name, get back to style sheet, and
here this is the class which has been created with the same name, i.e., ‘tagline-holder-tagline-content’.
First, provide the same class name over here, and then you are actually customizing the

tag over here that is coming under this class name. so customize this tag, and provide
attribute for it. So what we are going to do, we have to take care of the font-size
first, suppose we are assuming it to be at 30px, another thing that comes over here is
known as ‘font-weight’. So all you need to do, you may write it bold, or you may write
here any amount that comes into this, such as this one, 700, whatever you wish. If you
wish to change the style of the font element that is present into your website, then all
you have to do you have to provide a command that is known as ‘font-style’, and you
are setting it to italic. If you want to make a certain space from the top and from the
bottom, that means you want to appear your text into a vertically central position of
your div, then all you need to do, you need to provide a particular line-height to this
project and make here it is as, for say, 60px. Press ‘CTRL + S’, go back to your project
and reload. You see now, your tagline-content has turned into an italic version, it is now
bold and it is now aligning into a vertical-middle position of that div. so, providing the line-height
here means you are providing a particular space between two successive lines. Now as
you are using a single-line text over here so all it is doing here is increasing the
spacing from the top and from the bottom aligning the content directly into the middle of the
div. So this is the usage of line-height command into CSS.
Another thing that comes into action is known as ‘font-family’, so if you provide here
‘font-family’, that means you are now specifying the family of the font, what is
it? Is it a sans-serif or cursive or fantasy, what? So, this is the font that I am using
over here. All I need to do is to rename this font, copy the name of the font-file over
here, now get back to your project, and within inverted comma, we have to paste this font-family.
Press ‘CTRL + S’, get back to your project and now it has been changed into ‘Doriel’,
from its system defined family, it is now changed into this user defined font family.
Another thing, if you view our template you will see that the template that has been awarded
to us that this is a normal font what we are practicing over here, but this is an italic
version that we observe here, so what we have to do again, we need to comment out this section
which is known as ‘font-style: italic’. Off course we are reducing the font-weight
over here, we don’t need such font-weight, it is a huge one. Now get back to your project,
reload and you will see that the font-styling, now it is almost matching to the template
that we are using. So we are going to keep those changes those we have made so far. All
those things are right on track and we are getting pretty closer display or execution
of the project into our browser. But there’s a minor problem that we are not caring so
far. This kind of font is installed into my computer that I have downloaded from internet,
but it is not sure and certain that the same font will be present on your machine as this
is not a system defined font. So what we are going to do cause what we are seeing over
here, as this font has been installed into my machine, that is why you have a preview
of it into my web browser. But what we are talking about is the general display into
any machine worldwide. In that case, it won’t be a wise enough thing that you just mention
a particular font-family name here and you just leave it. In that case, what we have
to do, we have to download this font first, and then we have to generate the corresponding
embedding code in every format available in the market and then we have to copy those
things into our own CSS folder and then we have to organize into our style sheet such
as this font matches with every computer such as whenever someone opens this website, the
necessary files to execute this font-family download into client’s machine and then
this font is visible to everybody as this one is visible to us. So, what we have to
do, we have to generate this font first, but before that, you have to install it from the
internet and that is what exactly we are going to do. The procedure is very simple……

These are the Must Have GRAPHIC DESIGN Tools For Your CREATIVE TEAM!! w/ Gio Dizon

These are the Must Have GRAPHIC DESIGN Tools For Your CREATIVE TEAM!! w/ Gio Dizon


Hi I’m Gio Dizon senior graphic designer
at Hall Pass Media you might be curious on how creatives come up with really
cool looking designs in this age of digital and cloud computing today I’ll
be giving you a glimpse of what’s inside the toolbox of the creative team at
HallPass at Hall Pass Apple products are the hardware of choice for computing
they have been an industry standard for creatives for a long time having this
Apple ecosystem allows us to share files and communicate with different devices
seamlessly the creative team uses Adobe products more than any application the
days of compact discs and serial numbers are long gone and have been replaced
with Adobe Creative Cloud having a subscription to Adobe CC allows us to
use every single Adobe product like Photoshop Illustrator InDesign After
Effects Lightroom and XD to name a few for any creative it is great to have all
these applications available in one subscription back in the day you only
have one or two of these applications with Creative Cloud all of these are
available if you need web design starts with mock-ups and wire framing which are
valuable steps in the web development process a couple of great tools for this
are Adobe XD and sketch once the designs are approved they are now ready to be
developed as live website web flow and WordPress help us transform those
mock-ups to beautifully designed responsive websites a few other
invaluable tools in the design process that help our team include a font
manager like expensed a suitcase a Pantone color book and even a pen tablet
like Wacom Intuos these are just the basics new and improved devices plugins
and applications are being developed as fast as we can think of them and those
are topics for the coming days I hope you have learned a few things about the
essential tools that we use we are a passionate team of creatives that are
adapting and evolving with the latest technology to best help us and our
clients achieve and exceed our goals all of that happens here at Hall Pass Media

jQuery Tutorial: YouTube Video Gallery and Responsive Lightbox Plugin

jQuery Tutorial: YouTube Video Gallery and Responsive Lightbox Plugin


Hey, I’m Hunter from Skillthrive, and
welcome to the final lesson in this four-part course, where you’ll design and
code a video channel landing page. In this lesson we’ll implement VenoBox, a
responsive jQuery Lightbox plugin for videos and get the project live on the
web with Netlify Drop. You will also find all the lessons linked in the
course in the description below. Feel free to follow along or write the code
as we go, but you can also download the final code and design on skillthrive.com
for a small price. This helps me, as a creator, to continue making design and
development courses for you to watch at no cost. With that out of the way, let’s
get started. So, before you get started, make sure you have all your videos on
YouTube, because the plugin that we’re going to be using is going to be using
YouTube. And the reason I’m using YouTube is that it’s free to upload videos. So,
you can see here that I have all those videos uploaded and I’m going to be
referencing the unique ID URL in here. Let’s say, for instance, if I open
this, this section right here, after the video equals, I’m going to be
referencing that throughout the rest of the HTML. So, once we click on that
button, it knows which YouTube video to reference. So, make sure that your
videos are up on YouTube before moving on.
The next thing you want to do is come into VenoBox and then click here to
download this, and this is the jQuery plugin that we’re going to be using. It’s
also important to note that they’re going to ask you to tweet something
out that you downloaded it, in order to access the files, but if you want to
not tweet about it, just tweet about it and then just remove the tweet as soon
as you do it. But then, once you do that, you’ll have access to download the
plugin. So, you can see here in the demo, let’s look at the actual video. So, once
you click on Vimeo, here’s an example of Vimeo, and then it autoplays, which is
really cool. Then you also get this really cool,
like, out-of-the-box Gallery feature, that you can use as well. And when you
click on that, it’ll just move into the next video and your HTML. And here’s
an example of YouTube autoplaying. Cool, so, once you do that, you can go
ahead and just exit out of this little modal, and we can actually start getting
this ready for our site. The first thing we need to do is include the CSS
in our head. So, we need to come up to this Download, and let’s go ahead and
just expand this. Then I’m going to come into where my project is, so
Desktop, and I’m just going to create a New Folder. So, let’s do, just call it ‘VenoBox’.
And then we can come into the VenoBox, and I’m just going to copy this CSS
and then paste it in here. And we also need to bring in the minified JS
version. So, we’ll come in here and then paste that as well. So, once we do that, we
can actually import this. So, let’s come and just copy this link. We’ll paste this
below our Styles, and then we need to tell it where it actually is, which is in
VenoBox and then VenoBox CSS. Now that that’s imported, the next thing we
need to do is include the minified version, after we pull in the jQuery
library. Now, there’s several different ways you can pull in jQuery, and a lot of
people will use CDNs, but I’m just actually going to download jQuery,
the latest minified version, and just include it here in our project. And to
download jQuery, you literally just come up and just Google ‘jQuery download’. And
here, jquery.com is where you want to go. And then you can click here on ‘Download
the compressed, production jQuery’. I’m going to right-click and then say ‘Save Link As’,
and then I’m going to just save this where my project is. So, let’s come into
Video Channel, create a new folder here and just call this ‘jQuery’. And I want to
make sure that I get rid of this right here and then save that.
All right, now, if we come in, we can actually see, I’m going to rename this…
Actually, bad habit, I put the underscore. All right, now we can see the minified
version. So, we need to make sure that we’re pulling that in as well into our
HTML. To do that, I’m just going to go back to the VenoBox, and I’m just going
to copy these two scripts, ’cause we got to pull these in. And right before the ‘body’
tag is where we want to paste these in. So, I’ll paste that in. And the source
here is not going to be what’s here, it’s actually going to be at the jQuery and
then the jQuery minified. And then here is wherever you put your your VenoBox.
Now, mine’s in the folder called ‘VenoBox’, and then the name of that file is ‘The
minified VenoBox JS script’. All right, so, now that you did that, the next
thing you need to do is to initialize the plugin. And to do that, all you have
to do is create a new ‘script’ tag. And in between the script tag you want to just
copy this code right here and then paste it in. Then I’m just going to go
ahead and just, kind of, format this so it’s laid out nicely.
All right, now your plugin is going to be initialized. Now what we need to
do is actually use the plugin. So, you can see here it says ‘Insert one or more
links with their custom class’. So, the class here that we’re going to be using
is ‘VenoBox’, and that VenoBox is going to be referenced right down here, once we
initialize the plugin. You can see here, there’s going to be an example, if
you scroll down to actually the video. So here, ‘Use data-autoplay=”true”‘, in
order for that video to autoplay, and that’s what we want to do. So, what we’re
going to do is just copy this A tag here, and then I’m going to surround it up
here with the Watch button. Let’s come up to the Watch button, and I’m going to
paste that in and then make sure that that’s closed, and we give that a full
quote. And then we want to surround this with a closing A tag. And the class is
going to be ‘”venobox” data-autoplay=”true”‘. The type is going to be a ‘video’, and
then the href is going to be where our YouTube video is hosted. So, on this one,
this is video 17. So, let’s come and find video 17, wherever it is. Here
it is. So, I’m going to come up and open this. And then what I’m going to do is,
I’m going to come into Share and then just copy this little code right here,
this URL, and then paste that into the href. So, let’s see here, on… That’s
right here, so let’s paste that in. And then, once we save that, let’s go back to
our project. And now, once we click on that, you can see that video loads in and
starts autoplaying. Cool, so, let’s go ahead and just exit out of this. The
next thing I want to do, before I start actually working on the rest of the
videos, is just passing in some custom values here. Now, if we come into the
VenoBox, you’ll see, if we come, let’s see, right here, there’s some different
options that we can do. So, for instance, we can change the arrow color, we can
change the background color, the close background, the close color, so on and so
forth. And the ones that I’m going to specifically do are just a couple here.
In order to pass these values in, we need to come into the spot where we
initialized the plugin. And right here, where it calls this method VenoBox, we can
create, you know, curly braces and pass in some object values. So, the first one is
going to be ‘closeColor’, which is coming right from the documentation. And the
‘closeColor’ is going to be set to just that F4. So, we’re going to do the
hashtag and then F4 all the way across, and that’s going to change that Close
button to the color of the light text in our actual project. This is just going
to have a consistent styling. So, once we do that, we do a comma and then
we’ll do ‘spinColor’, and ‘spinColor’ is going to be the same value here, so
that’s going to be just F4. And next we want to do the ‘closeBackground’, and
then that’s going to be the value of that dark. So, let’s come back into Figma.
and we can copy this right here and then paste that right here. So, let’s paste
that in, and we need to make sure we surround that with quotes. The next
thing we want to do is change the overlay color, and the overlay color is
going to be that RGBA value. So, let’s do ‘rgba’, and then it was 23,
25, 29 and then 0.8. Now, if you forgot what yours
were, you can always go back into the Style here and just copy this overlay
value. All right, and that’s everything for the custom, you know, things that we want
to set with this plugin. Now, once we come into this and click this, it’s going
to not work, and I think that’s probably because there’s a typo here. So,
let’s take a look at this just for a second. I need to surround this with a
quote. All right, now, once we click this, it will work again.
Now you can see that the overlay matches the one that is
on this video, and that Display button now is going to be, not Display button, but
this X button is going to be the same color as our text. All right, now what
we need to do is just go through and apply this to the rest of these, so once
we click on these, they actually play the video. And to do that, it’s actually just
very similar to what we did here for the Watch button. So, we’ll come up here and
just copy this A tag. So, we’ll come here and copy that. And what we want to do is
surround the I value, or the I tag. So, I’m going to paste that in. You can
see that it automatically creates a closing tag here. So, I’m just going to
delete that and then move that closing tag right here. Then what we want to
do is change the ending of this to match the ending of the URL for our YouTube
video, so this is ‘Image 1, Video 1’. So, I’m going to come in and find Video 1. Click
here, I’m going to open this up into a new tab, and then what you can do is just
copy this part right after the equal sign. So, I’m going to copy that, and then
I’m going to paste it in right here. Now, once I save that and click on this,
it’s going to open that up. And I’m just going to repeat this process over and
over for the rest of the videos. So, I’m just going to speed through that, so you guys
can still see the process, but not have to watch it in real time. And another
thing I’m going to point out is, remember that, when I added that A tag here,
right before this I tag, it wasn’t adding the closing tag. In order to,
like, not have to do that every time, I’m just going to copy this entire A tag and
I tag here and just replace it. So, I’m just going to paste that in and then
just change the YouTube value here. All right, now that we finished that,
let’s go ahead and save it, and just go ahead and just check some of these videos. So,
let’s go to click on this one and make sure that all of this stuff is playing. Cool, so, you can see that is working and
you can see it’s, kind of, annoying, right? Let’s say, for instance, we wanted to go
the next video. We would have to click out and then go to, like, this one and so
on and so forth. But there’s a really cool way to add a Gallery feature here
with this plugin. And if we come back to the Documentation and come down to
Gallery, you can see that, in order to activate this Gallery function, we have
this variable we can pass in, called ‘data-gall’. Then we can give that
Gallery a name here, and this one is just using ‘My Gallery’. So, let’s go ahead and
just copy this. And we can come back into where we pasted all those A tags. So,
let’s come up to this one here, and at the end of this I’m just going to paste
in that value, and I’m going to do that for the rest of them as well. Once we finish that, we can go ahead
and save this. We’ll come back into our project, and let’s go ahead and just
click on Watch Now. And now you can see this really cool Play button that, or
this Next button that, when we click it, it’ll load Video 1 and just keep going
down the line, based off of the order of what those A tags are in our HTML.
You can see how this plugin makes this Gallery feature really, really
simple. The next thing I want to change,
before we wrap up this entire course, is just the arrow colors, and we want
that to match the F4. So, let’s come up to the Documentation again and see where
the arrow color is. Let’s go ahead and just copy this. I’m going to come down here
and go ahead and set that to the same value of these up here, make sure we have
that comma. You can save that and then, once we come back here, the arrows
now are going to match our design. And there you go. You can see with this
plugin you get a lot of functionality out of the box, and it’s also really easy
to just pass in some different data attributes and really get some cool
functionality. And you can also, you know, change things like the color of the
different elements that come with the plugin. Now, the last thing we want to do
is get this live on the web. And to do that, we’re going to be using Netlify
Drop. So, let’s head to Netlify Drop, and to do that, I’m just going to
search for ‘Netlify Drop’, and then app.netlify.com/drop. And once
this loads, we can come into our project here. And in the Desktop, I’m just going
to copy or select this Video Channel folder and then just drag this into
Netlify Drop. And then it’s going to build the site for us here, in just a
couple seconds. Then we can open this up, and now we have a live URL of our
project. So, let’s just go ahead and make sure all the styling works. So, that looks
good. Then let’s go ahead and make sure
that the plugin works. So, let’s click on Watch Now. All right, so, that works and our
Gallery looks like it works as well, and the Close button works. And now, once this
is live, you can come back into Netlify and set up a
custom domain. And you also have HTTPS, which is a secured way of delivering a
website out of the box for free, so there’s no setup that you need to do
with Netlify. And that’s it. Congrats on finishing the course! If you’re watching
this on YouTube, please consider subscribing, liking this video and
sharing it with your friends. And consider joining skillthrive.com, because we
have a lot more premium and free content for you to watch and download. Again, I’m
Hunter from Skillthrive, and I’ll see you in the next course!