PHP constant, PHP define constant, – PHP Constant – PHP Tutorial – 10

PHP constant, PHP define constant, – PHP Constant – PHP Tutorial – 10


what is PHP constants ? in PHP constant is
a variable once it defined then it cannot be changed during the script
execution there are three parameters in this name value and case-insensitive d for
creating a constant use the define function constant variable must be started with
any letter or on the skull syntax of constant is define name-value
case-insensitive now see how is work PHP Constance open a dreamweaver with create new PHP file for creating a constant of php we use
“define” statement in defined statement there are three
parameters first name second is value and last is case-insensitive
case-insensitive means we can use variable small and upper case both but if
we not declare case-insensitive then we must use same case as we declare now see
how can we use constant and PHP in first example we not declare case
insensitivity so we must use same case variable name as we declared and defined
function and in second example we use case
insensitive true so that means we can use variable name smaller capital case
both now save this file using name constant .
php now open a browser and run this file yes file executed successfully so from this way we can use PHP
constants thank you please watch next video
tutorial number 11 and learn about PHP operators step-by-step

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.

Transparent Background with CSS

Transparent Background with CSS


Hi guys, today we will learn how to give a
text or an image of transparent background using CSS, it’s pretty easy so let’s do this. Okay, let’s add a one line of text, for example,
paragraph of this is a text, with red background. Okay, in our main CSS file let’s style a bit
our paragraph text, so we can say they background color to be red. We have these background of red and let’s
say just add some padding so we can see better for example 20 pixels, okay, we had our red
background but, it’s not transparent. To make backgorund transparent we need to
convert a this hex code into our RGBA code. Okay, we need to go to the this website it’s
a hextorgba.devoth.com it’s a super easy method to convert your hex value. We got our hex value of red and we just say
HEX to RGBA and on the right side we will get two values of this color, but our value
we need value, it’s bottom one, because it has this one extra number. I can, I will show you why is this important. Copy this RGBA and paste it back instead of
your hex code. Okay, we paste these RGBA code and nothing
happens of course. It will never happen in the first time because
this is a web development ๐Ÿ™‚ you need to point, click and find out what is wrong. In this case, the wrong is this number one. We need to change this number one into 0.5
this is a 50% transparency, if we want 20% just add .2 or .1 You can see this is more
transparent, and it’s super easy. One thing only, you can write to these last
number, it stands for alpha, because this is a red, green, blue, and alpha. Alpha controls the transparency. If we don’t have alpha, we have nothing. Okay, let’s say it’s a 30%, you can write
also with only a dot and a number tree, you can add a zero here but it will do nothing. So, I’ll just write this like .3 lets now
and background transparency for our image. Okay let’s add our image, image I will say
it’s the image, image goes to image folder and one image of motherboard. In our main CSS we will add also in the image
tag, we will add and also this background color, right, and you can’t, you can’t see
the background color because it’s the same as the image size. So, we add just some padding to squeeze that
content inside, for example 30 pixels. And that’s it guys. It’s a pretty simple, okay, let’s say it’s
a 70%. We made some border around it and it’s a pretty
easy to do this, so don’t forget that you need to convert your hex to RGBA and you are
good to go. Thank you and bye-bye!

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!