How to Build a GoDaddy Website

How to Build a GoDaddy Website


– Hey, everyone, I’m Emily. – I’m Darlene. – So you’ve decided to
build your website yourself and that is really awesome. – Yeah, go you. – But you should know that within the do it yourself category there are different options some a little more difficult than others. – Yeah. – And just like if you
were gonna hire a pro to build your website for you, there are things you
need to consider, budget. – Your time commitment. – What’s your technical know-how? – And then the complexity of your site. – Yeah, and today we wanna talk to you about those do it yourself tools, the differences between ’em, so that you can pick what’s
best for your business. (upbeat music) – So with the DIY website builder options, there’s gonna be an easier route. It’s obviously more template-based, a little bit more drag and drop, you’re gonna see the layouts there and you’re gonna pick and
choose what you want out of it. – Yeah, everything’s
right in front of you. What you see is what you
get with a template-based website builder and we’re
not saying you can’t have an amazing site using one of those, just know that there might be
a little bit more restrictions and some customization that you can’t do. – Yeah, some design elements that you might not get out of it. It’s a little bit more paint by numbers. – Yeah, so you’ve looked at some of the DIY template-based site builders and maybe you know that
they’re not gonna work for you. You already know your business enough, you’ve considered design elements that you’re gonna be using on your site and you know that you need
something a little more advanced. A do it yourself WordPress
site is a great option. – You can extend the
functionality of your site using plugins which are
applications that you’ll install in order to make those
features happen on your site. – Yeah, and we should
mention that WordPress itself is a free product but you are
gonna need to pay for hosting to support your website. So there is an additional cost. – Yeah, and the main difference between a DIY website
builder from a company is that you’re gonna be able
to contact their support when you’re needing help
with something for it and then versus WordPress where you’re kind of moving out of your
parents’ house for that one. – Yeah, it’s and open-source
product so there’s a lot of information you can find
online when you have questions but you’re not gonna be able
to call WordPress for help. So there are a couple of
options if you’re gonna build the website yourself. We’ve got the easy DIY
that’s template-based, a little more restrictive, and then there’s a more advanced option. – Yeah, you can go the WordPress route which is gonna take a bit more
time to get familiar with, you’re gonna have to
do a bit more research but the sky’s the limit on that one. – So get out there and
start building your website. I’m Emily. – I’m Darlene. – Thanks for joining us. (upbeat music)

Creating Crisp Logos and Graphics on the Web with SVG Files

Creating Crisp Logos and Graphics on the Web with SVG Files


So in today’s video I’m going to walk you
through how to create and upload an SVG file, specifically in Showit. And so this is Showit if you haven’t used
before—it’s a website builder that connects with WordPress and it’s amazing because it’s
a drag and drop editor. But if you look in the actual editor portion
of Showit at the different logo files that I have here, this is an SVG file and this
is a PNG file and they don’t look all that different on the actual preview on the actual
app itself. But if you either publish your site or if
you hit preview, you’ll notice a big difference, especially if you have a retina device. So on a retina screen especially, you can
see that this SVG file is really crisp and if you look over the PNG file, you’ll see
that the edges of the type especially and then my icon—anywhere that there’s more
fine detailing within the logo itself—it’s going to look a little pixelated. And so we always recommend uploading an SVG
file to your website if you have one. And this goes for Squarespace, this goes for
a straight WordPress site. This goes for any website that you’re working
on as long as the platform allows for an SVG file and most should. That’s what we recommend using. So if you don’t have an SVG file or you’ve
never made one before, I’m going to show you how to make one using both Illustrator and
a free online app. So within illustrator you want to make sure
that you’re opening up the original vector file. So if your designer created something with
Adobe Illustrator or if you have a PDF or if you have—not all PDFs are vector, but
a lot of them should be—or especially if you have an EPS file, you should be able to
get the original vector logo. If you don’t have a vector version of your
logo and you can tell because you’ll be able to click on the individual elements. You can make things other colors if you want. If you open it up and it’s all just one image
and you don’t have the ability to ungroup things and work on things individually, then
you don’t have a vector file. But if you do have a vector file, it’s really
easy to save it as an SVG even if you don’t have an SVG file. So if we come up and we go to File and Save
As we’re gonna, save it to my desktop and you have the option down here to select from
a few different formats by default, it’s probably going to be set to Adobe Illustrator or EPS—whatever
file format you opened before,—but we want to save it as an SVG file. And so give it a name and then I’ll just click
Save As. And these settings, the standard settings
are all fine and so we’ll hit Okay. One other thing that I want to point out is
that if you—depending on how you made the logo—you also want to make sure that everything
is an outline. So if you can still click on the text and
edit it, that’s not good for exporting as an SVG file because not all computers are
going to render your fonts. So if for some reason you can still edit and
select the text you’d want to go to object and then Expand and keep hitting Expand until
the text is no longer editable. So once you have exported your file, you can
just come in and upload the SVG file and it should look a lot better. It should look really crisp. So the alternate way to create an SVG file
is to use a free online converter. And so this is https://imageonlineconvert.com. And I’ll put that in the notes of this video. And I know it looks super ugly, but I’ve tried
this and I promise it works. So If you upload your PDF of your logo, and
again this is only gonna work if you have the vector version of your logo, but if we
choose our file and then we can ignore all of these settings because we don’t actually
need to size our file, we don’t need to do anything. We’ll just hit convert file and it’s going
to run the process. And then right here is where you would download
the file and once it’s downloaded you can come back in and upload it to your website. And I tested it and this SVG file that was
created by this online converter, it looks just as good as my one made by Illustrator.

How To Create Login Form In HTML and CSS

How To Create Login Form In HTML and CSS


hello everyone welcome to code spot
today we are going to see how to build a simple login form using HTML and CSS
with basic validation this is the form that we are going to be building up
today there is a sign-in form and a sign-up form starting with a sign-up
form we have three input fields one for the user name one for the email address
and one for the password and the user had the option to sign up inside the
sign-in form we have two input fields and also a checkbox now we’ll be
learning how to design this login form I have uploaded the code for this login
form in github. I’ll mention the links in the description down below and now let’s
get started. Here I’m using brackets as a code editor and I’ve already created two
files index.html and style.css and I will use the live preview option
right here to see the output as we code. let me resize it. Now starting with a
HTML head and body tags, let’s mention the link to the style sheet. and I’m going to start with the “hello
world” text in this login form design. I’m going to use a Google font. To do that, go
to fonts.google.com and search for the font that you want. For now I’m going
with IBM flex sans fonts. We can get the code easily by selecting the plus icon
to the right of the font and we’ll just copy the code and paste it in our word
file. as you can see as soon as I mentioned
the font family the fonts in our web browser changes. Now that we are done
with mentioning the font family, let’s move on to the font design starting with
a sign in and sign up tabs. I am going to mention them as radio buttons so that it
would be easier for me to switch between tabs and then later we can design it to
make it look like actual tabs. now when I open the browser you can see sign up and
sign in radio buttons. As I’ve mentioned earlier right now they look like radio
buttons later on will make it into tabs with the help of CSS. Here the radio
button is selected only when I click on the circle it doesn’t get selected
when I click on the text. this isn’t normally the case so to fix this we need
to link both the radio buttons and the text. we can do that easily by using the
label tag inside the label we need to mention for which the label stands for
so we need to mention the ID inside the “for” property of the label tag. now they
are linked so when I open the browser you can see when I click on the text, the
radio button is getting selected. now let’s move on with a form design
starting with a form tag followed by a heading I’m going to include each and every form
input elements inside a div container that way it is more easier for me to
style everything. so give it a text field for entering the username now I’m going to mention an input field
for email address. I’m going to mention the type as email so that HTML will
perform its own basic validation for email and then password. I’m going to
mention the type as password so that the password is not visible to the user just
like that whereas in an email the text is visible but in password it is not
visible now let’s finish it with a submit button now when you notice when I click on the
submit button it throws an error for incorrect email address
thanks to the html basic validation the developers no more need to perform
validation manually alright moving on to sign-in form it is almost similar to
signup form we’ll start with the form tag moving on
to header mentioned the username password and
we’ll mention a checkbox and finally finish it with the submit
button for it as well with that the HTML part of a login form is completed let’s move on to the CSS part of the
login form. starting with a background image. since I want the background to
cover the entire screen, I’m going to mention the background size property and
set it to 100% with 100% height. here I’m going to give a linear gradient to the
background image you can do that easily by mentioning the linear gradient in
front of the URL property, in the RGB we can mention the opacity of the color for
the linear gradient. this is a very useful feature if your background is so
bright and you want to darken or lighten the background image so that the content
of your webpage stands out. now when I open the browser you can see the
background is transparent and the color has changed now for the text I’ll
mention the color as white so it will be more visible in our web browser
now let’s put the tab functionality in our login form since we start with a
sign up top we need to hide the sign-in form for now so let’s set the display to
none the sign-in form should be displayed
only when the user clicks on the sign and tab since we are using the radio
buttons we can use the checked selector to check if the user has clicked on sign
in tab by the till symbol this indicates an adjacent sibling so basically the
sign in tab and form two element need to be under the similar parent for this to
work oops I was supposed to enclose the
entire login form inside the login from their class but instead I have enclosed
only the radio buttons in it. so let’s move the end tag of the div tag all
the way down to end of the forms. now the input button and the form are under the
same parent also I forgot to mention the # in front of the ID. now when we
refresh and check. when I click on the sign in tab the sign in form appears
great let’s apply the same logic to the signup form as well I guess the logic here is
self-explanatory. I’m going to simplify this code further by combining similar
styles into one block and separating the individual selectors with a comma. as you
can see the functionality still works the same. now I’m going to make a minor
change for the tab that is not selected I’m going to make it less transparent
than the one that is selected to do that we’ll use the :not and the :checked
selector basically it tells the tab that is not selected the plus sign indicates
the immediate sibling next to the element not all the element with the
label tag but the one next to the tab that is not selected and let’s say the
opacity for it to 0.8 now that we are done with the tab
functionality let’s move on to design the basic log info.
I’m going to bring it a little bit down by setting the top to 20% and this
property do not work unless you set the position to absolute. I will mention the
left to 7% give it some width it looks perfect. now let’s design both the tabs
starting off with the radio buttons, I’m going to set the radio buttons displayed
to none so that the icon disappears. I forgot to mention the . symbol in
front of the class name. yeah it works moving on to the text part of the radio
button I’m going to mention the width and text align as you can see the width is not
reflected and that is because the display is set to inline by default we
need to convert it to inline block for the width to be set now it works. let’s
set the font size to 18 pixels and I’m also going to set the cursor to
pointer so when I move the cursor towards the tab it change to a hand
symbol. I’m also going to set a border bottom for the underlining effect now I want the border bottom to appear
one day when I select it so I’m going to set the scale X to 0 initially and when
the radio button is checked the underline must appear again well this doesn’t work because I have
set the transition for the whole header so the entire text is disappeared. so to
fix this we’ll use the :after selector where we can give the underline under
the after track and we can make the underline disappear under the same we
need to mention display:block and empty contents and also give it some height.
well we forgot to mention the after selector here and since we want the
label that is immediately next to the radio button we need to use the plus
symbol. all right that works perfectly fine let’s move on to design the header of
the login forms starting with a margin, font size, text align, give it a color and
done moving on to form inputs, I’m going to
give it a border radius so it will have some curved edges I’m going to give it
some height, margin, width. I’m going to mention the border width as zero
so there’s no outline around the input fields and also gives some background
color so it looks a bit transparent here some padding and color for the font. as
you can see the placeholder here is not so visible so let’s give some color for
the placeholder now it is visible but also transparent
now when I click on the text field there’s a border that appears. to disable
that will use a focus selector and set the outline to none. also going to reduce
the opacity for the check text moving on to buttons, I’m going to start
with margin with Heights some border radius set the text-align:center give this a
background-color give the text color as white, set the
border width to zero so there’s no outline and done. so there it is the
completed login form design. the basic validation is already included in the
HTML for mandatory fields we can use the required keyword inside the input
element and there you go it would throw an error if the input
field is not filled out so there you have it
the basic validation to the login form using HTML and CSS without any
JavaScript hope you liked it give me a thumbs up if
you did, share your feedbacks in the comments down below and subscribe to
code spot for more such videos. thanks for watching

WordPress Business Directory Theme

WordPress Business Directory Theme


Today I’m going to introduce you to a
new wordpress theme the BePro Business Directory. It is a fantastic theme for
directory websites built using WordPress. This theme is fully compatible with
latest versions of WordPress and it works perfectly fine with Guttenberg
WooCommerce and other such popular WordPress plugins. This theme makes
perfect use of the BePro listing planning since it was carefully designed for it. Other than that you can also use various
add-ons provided by us to enhance the functionality of the theme. For example
using one of our add-ons, you can create an advanced filter like this in your
search page. Then that website design is mobile friendly and not just that we
have added hidden elements to reduce the pls length for mobile users while still
retaining all the functionality. This theme comes with several page templates
like home, blog, contact, and about page. And moreover all the things present on
our website can be easily modified and edited and you can also remove them if
required as per your own requirement. So this was the Be Pro business directory
theme we are continuously providing more and more updates and more and more
features to increase the functionality of the website so stay tuned for the
subsequent documentation videos

How to Create Your First Web Page on WordPress

How to Create Your First Web Page on WordPress


You’ve finally taken the plunge,
selected a domain name, purchased hosting, and are
ready to start your WordPress
site. Congratulations!
It’s going to be awesome. Now that you’ve celebrated your
new blog or business venture, you may be wondering what
to do next. Don’t worry. This video will walk you
through how to create
your first web page on WordPress step by step. For purposes of this tutorial,
we’re going to assume that you’ve already installed WordPress
and chosen a theme. If you haven’t yet, click here
for directions and then
rejoin us. Okay, it’s time to create
your pages. For example, you may want an “About” page, a “Testimonials” page,
a “Services” page, or a “Contact” page, depending
on the goals of your website. You can create these pages
through the “Pages” WordPress
feature. Here’s how to do it. 1. Turn your attention to the
sidebar and locate “Pages.” 2. Click “Add New.” 3. Once you have selected “Add
New,” you’ll notice you can enter a title and customize
the content. You can add a title to your page, such as “About Me”
or “Services.” Then you can write your content, add images,
and even select the layout for
your page. 4. Once you are ready to
publish your page, find the “Publish” button on
the right side of your screen. As soon as you
click the blue button, your new page will go live. Remember, since you have
selected a theme, WordPress will automatically import your page
into the desgin you selected. This means you don’t have to
know any coding. After you have created all of
your pages, you’ll want to organize them. After all, you want your website
visitors to be able to easily
navigate your website. To organize your pages, you’ll
want to add them to one of your navigation menus. You can do this through the
“Appearance” tab on the sidebar. Here’s how. 1. Find “Appearance” on the
sidebar and click “Menus.” 2. Find the pages you created
under the “Pages” widget. 3. You can add any of the pages
to your menu by clicking the checkbox next to the title
of your page and then clicking “Add to Menu.” 4. Once you have selected the
pages you want to add, you can arrange them in the way you
want them to appear
on your menu. Do this by dragging and dropping
each menu item where you would like them to appear. In the example above, each
main menu page is flushed left and each sub-page under
the main page is indented. You can organize your pages
however you would like. To give you a better idea of
the final product, here is how a WordPress menu looks all
dressed up in its theme. And there you have it! That’s how you create a page
on WordPress and organize them into a menu. And remember, comment,
like, share and subscribe for more useful tips on running
your own website.

WordPress Tutorial: How to Set Up a Social Media Icons Widget

WordPress Tutorial: How to Set Up a Social Media Icons Widget


Hi, and welcome to WordPress.com. This video will show you how to configure
a social media icons widget on your website or blog. The social icons widget displays small,
high quality graphics linked to your social media accounts, and you can display
these in any widget area of your theme. After adding links to your social profiles,
icons are automatically displayed on your site, letting your visitors connect with you
through your preferred networks. To set it up, launch the Customizer
by clicking on Customize next to Themes. Click on Widgets, and select the widget area
to which you’d like to add the social icons widget. Then, click Add a Widget. Find the Social Icons widget and click Add. Add a title to display above your social icons,
or you can keep the default title Follow Us. Add a full link to your first social network profile. You can get this link by visiting your own
social profile and copy-pasting the link that appears in the browser bar
into your widget settings. If you’d like to add more social icons,
click Add an Icon and add your next social network profile url. You can change the order of your icons
anytime by dragging and dropping them into your desired sequence. Your new order will be reflected live
in the Customizer’s preview pane. You can choose a size for your social icons
from small, medium, or large. To delete a social media icon,
click on Remove under the url. When you’ve finished adding your
social profiles, click Save & Publish. And that’s it. You can go test your new social media
icons widget live on your site. For more tips and tricks,
visit the WordPress.com support site.

Coded Preloader Plugin for WordPress

Coded Preloader Plugin for WordPress


as web designers we aim to build
stunning websites that give visitors the best possible experience. However, a slow
loading website doesn’t look great. This can be fixed with a preloader
a free loader is a fancy little animation the background that hides your
website until it is fully loaded creating a preloader for your WordPress
website is a time-consuming process. Especially if you build a lot of
websites. You have to create an image to use, give it an animation, ensure it’s
sized and positioned correctly, and make sure it’s responsive. At coed we are
with designers. We understand the frustrations that come with this process.
So, we thought we would do something about it that’s why we built the Coded
Preloader Plugin. It makes the whole process of getting a preloader up on
your website a breeze. All you need to do is upload the image you want to use, pick
an animation, add some text and click save. Then head over to your
website and check out your new preloader. It also has a preview option so that you
can check out what your preloader will look like before it goes live. You also get a whole load of
customization options like overlay color, text position, size, font family and much
more. We have also built an option that puts the preloader animation on the home
page only. All other pages will only show the overlay before revealing the loaded
website. There are even some built-in pre loaders so you can get up and running
even faster.

WordPress Tutorial: How to Create a Custom Website Menu

WordPress Tutorial: How to Create a Custom Website Menu


Hi and welcome to WordPress.com. This video will show you how
to create a custom menu. Your website menu is made up of these links
that appear at the top of your web page, or, depending on your theme, can also
be off-canvas and hidden behind a button. Some themes offer additional menus,
such as a footer menu, and a social links menu. To create a custom menu, click on My Sites,
Customize, and then on the Menus tab. If your theme already has a default menu,
you can click on it to begin editing, or, click on Add a Menu
to create a new one. Type in a name for your menu,
then click Create Menu. There are several menu item types
you can use to build your menu. You can add a page, a link, category,
tag, post, and some themes offer additional ones like projects
and testimonials. To add one of these menu items,
click Add Items, and choose from the options
displayed for that type. If you wish to add
a brand new page to that menu, you must first create and publish it. Move a menu item by clicking
the Reorder link: Click the up/down arrows
to move a menu item up or down, and left/right to indent it, to make it
a submenu, or a drop down menu. You can also use the drag-and-drop feature. To make your menu appear on your site,
you’ll need to select a Menu Location. In this example, you would check
the Primary Menu box. Once you’ve organized your menu,
be sure to click Save and Publish to Save your custom menu. And that’s it! For more tips and tricks,
visit the WordPress.com support site.