Transcripts
1. Introduction: If I told you, you
can create websites, fully functional websites
within a couple minutes, within a couple clicks
from design to fully functional live and ready to launch website through
the use of Power page. In this current class, I'll
be walking you through from A to Z in the most effective,
efficient way possible. If you are a beginner, someone who's trying to learn
about web design, building your own website for whatever purpose it
is for blogging, to showcase your
portfolio or work, the applications are endless, and you don't need to have
the coding experience in order to do so I'm
going to show you a very quick and effective
way for you to just simply get your website up and
running in less than an hour. Tops, no coding
required whatsoever. Simply as you go
through the lessons, you will learn about a very
powerful tool which is power pages that will help you
build functional websites. Collect information for your
clients, for your visitors, showcase powerful branding as part of your marketing
initiatives, as part of showing your
portfolio and work. All of these applications
could be done in an easy and effective
way through Power pages, which I'm going to be teaching
you in this current class.
2. Your Project: For the class
revolves around using the lessons taught about
Power pages to build your website after what
you're going to be sharing your work with the rest of the community for feedback.
3. Diving Into Power Pages: We're going to learn
in this current lesson how to go about Power pages, which is part of the
Power platform suite of products first
thing we need to do is to navigate to Power pages. Simply, you can go to
mapowerpages.com. Click Enter. This will take you to the
first homepage window in which you will be asked to provide some AI input in order to help Power pages to build up a website for you. Keeping in mind, Power pages are like external facing websites, which you can use to
present information. Also, you could connect it to other Power Apps tools.
Let's click again. Start and now it's going to actually
prompt for me to give some information about
what's the website about to help us navigate and create a
theme quite easily. This will help us provide
personalized experience. What industry are you creating the website for healthcare, other transportation,
government, finance? Let's click on O. Click on Next. Now, describe the site you want to and let copilot build it. Now we're going to use the
artificial intelligence to help us about
building the forms, the layouts, adding blocks. So let's take a look at the prompts that you could
use, and keeping in mind, you're able to suggest them
or to modify them later on. So what I'm going to
do is, let's say, I would like to build a website
for Travel, for example. Here you do have
different options to give you some inspiration from
like community feedback, resource sharing
platform, it's up to you. But for the sake of simplicity, let's take a look at this. Now, we do have the other
options to go for a template. We actually select pre
made site templates and you can use them or you
can build from scratch. I want to create a site about travel, which includes different
travel destinations, and feel free to experiment
with us as your own project. Try to tinker with
this. First of all, you have the various types of steps step one,
two, and three. We need the side
details. Travel Vista, create the web address. It's going to be
on the Power apps as part of the whole ecosystem
of the Power platform. You could change this. Let's call it Travel Vista. Going to change if it's working
or not or it's available, then we're going to
click next. Here we go. We're going to pick the site
layout that meets our needs. Now, since we have
given it a prompt, it's going to give us
some basic details. Let's try to try again, since it's going through
artificial intelligence, and by the way, if you
don't have a work account or you don't have
a school account, on the pre trial version, you might run into such an
issue where you are trying to utilize the layout through
artificial intelligence, but it might get stuck. Why? Because the power, the copilot or the artificial
intelligence connection needs to have the work
or school account. That's why you'll be
getting this message. So let's go for
the starting over, and we are going to be
building this by ourselves. So we are going to go
through the process of building the website
completely from scratch. So now we have navigated to the building page where
you integrate copilot and keeping in mind that all of the power platform has copilot integrated in them
using artificial intelligence, whether Power Apps, Power BI, Power Automate, and
similarly for power pages. Now, we have learned about how
to access the Power pages. Let's take a look
at the interface. Here we have ready
made templates. Solutions is basically
the place where you create a folder and you
build your website in case you have multiple
websites that you're planning to
build such that they do not interfere with each other and simply put you have
the Power platform, other applications that you
could use the Power Apps, Power Automate Power BI and
Power Platform Admin Center, where you take care of your
data and your data verse. The copilot studio is basically where you
build virtual bots. This is a subject for
a different course, subject for a
different discussion because this requires
for you to actually have the work or school email in order to be able to access
this and to function on it, even though you are
on a free trial. Now, let's take a look at the different displays
that we have over here. There are no sites
in this environment. Like we have mentioned,
every single application on the Power platform is dependent on the environment in
which it's created on. We can start with a template, which is related to
the template gallery, or we could just simply
start from scratch. Now, for the sake of simplicity, we are going to kick things
off with a template.
4. Setting Up Your Website : Going to be building a
website from scratch. We clicked on Get Started. We can select the type of the website that I
would like to have. I'm going to just simply
click O and go to next. Our goal is to create
a website for travel. Now, obviously, since
copilot has been integrated with all of
the Power platform, you can see some suggestions about prompt for the end goal, or you can just
simply create with a template without even
putting anything over here. So keep that in mind. You can
either put a prompt to get some template layout or you could just simply click over here to start with a template. So let's say I want to create a travel website
and then build my site. Now, it's going to
generate the site details. Take a look at the top part
over here, three steps. The site name that suggested is Travel Vista, which is okay. I'm going to change the
URL for a better name, travel Vista dot
power appsporal.com. Click on next. Now
it has given me the following template.
This looks quite good. This is the layout which it
has selected, travel Vista, then the homepage,
explore the world, then you're able to scroll down, discover exotic destinations,
adventure awaits. Then you have the blog
posts. This quite good. Now, you could click try
again as well and to get a different result or
a different webpage. But this is quite
satisfactory for now. So I'm going to click on next. Now. I do have the third step, which is basically
to add extra pages. Since a website is
a group of pages, it could be one page
or multiple pages. So we have decided
on the homepage. Now we're going to add pages. How about we have
some contact page? This is good about us page. If Qs frequently asked
questions, travel tips, destinations,
gallery, all of these are good essential pages that you could add
for your website. And in case you would like to change something, for example, you could just simply
click over here to generate a different layout. Feel free to
experiment with this. Once clicking done, now we are going to have the setup
for the new website. So if you notice through power pages with a couple of clicks, you're able to have
a template ready. You're able to get your
website up or running, which is quite
straightforward through the integration of co pilot
or artificial intelligence. Even you can just
simply click Use a previous template,
and once you do so, you'll be prompt to the
same destination where you actually set up the end
result, which is a website. Getting things ready.
And now let's take a look at the result, which is basically our website. So this is the new design studio where you get to
actually edit styles. I'm going to walk you through
every single one of them, but if you go at this
with a new account, you have the ability to actually go through
these toggle options and to like a small tutorial just to simply get you ready
and up and running. Now, this is the landing page that we have whenever
we are done. Take a look at the
right hand side. You have the copilot, and this is where you
integrate copilot as well. It's very helpful. You could
change the page design. You could add data form.
You can ask questions. You could put prompts
to help you get any of these items into the webpage. So all of these are
flexibilities that you could have within copilot. I'm going to close this for now, and let's take a look
at the end result that we have generated. We have the header. We got the banners. We take a look at the images. This is very
powerful, by the way, because with a couple of clicks, you have the ability
to create pages for the websites from scratch. On the left hand side,
if you take a look, you have all of the
pages that you have actually built at the A page, the contactless page, FAQs,
destinations, travel tips. And a gallery. So
all of these things, they are very, very powerful. Why? Because this would take you even weeks if not months to actually build by yourself in terms of coding
and modifications. But with a couple of clicks, we were able to get the
website up and running. Now, in the next lecture, I'm
going to walk you through a couple edits to help you get some inspiration in terms
of editing your website.
5. Editting Your Website: We are going to edit in
this current lesson. The visuals of our website. I'm going to walk you
through some essential edits to have an idea how to
customize your own website. First of all, we take a
look at the left hand side. You have the various pages that you're able to access
based on the creation. You have the ability to add a new page and pick
a certain layout, or you can just simply
move a page up and down, or you can just simply
delete the page. And if you would like to
get involved with coding, you have the ability to edit code where you actually go to the developer page to edit
the codes of the website, and that way they will be synced back into
the display screen. So let's take a look at the display that we have over here. What I'm going to do
right now is basically I'm going to have some
basic edits for you to get. How would you apply
this in your own case? So this is the header.
If I click on Edit the side header I could have the site title,
the Travel Vista. You could just simply
go for the image. You can select the styling, which is the template
for the color palette. You can go for a layout if you'd like to
increase the size, the layout the width
of the header. Then you could add a section in between, which
is very important. If you would like
to add a column, spacer, any of these things you could experiment
with as well. For example, if I
add two columns, it will put two
columns over here. And then every
single one of them, I have the ability to put in a text, a button, or an image. Then you have the
ability to put a video. You can put a
flexible container. You can put the integration
with a visual in Power BI, if you have learned about
Power BI and you went through in one of our courses
segments for Power BI, you'll be able to
understand that you could add the visuals
or the reports, you could map them right over here, or you
could add a form. So there's a lot of room for creativity in this current case. So I'm going to remove
this current section. Like I mentioned, it's up
to you to tinker with them, but for the sake of simplicity, I'm walking you through
the process for you to get an idea how things work. Similarly, if I change
the overlay colors, I can put in different
shades for the colors. You're able to click undo
this from brush over here, and you have the
settings to adjust the width and the
height of the section. You can tinker with that,
and you can just simply move it up and down or
delete it altogether. So now we have a clear idea about the things that
we are able to do. Now I'm going to
change the layout, just make it a full layout to make things quite streamline. Now, instead of
just simply going through every single one of
them and dit these colors, in case you would
like to change them, you could go to the
styling tab, click on it. You have the color palette,
which is the brand color. So let's change the color a bit. How about we go something which is related more to travel? How about orange? That's okay. Then we could change that. Then we could include different
colors for the buttons. We would like to
have something which is green or turquoise. How about green in color. This sounds okay as well.
Wtice what happens. All of them are
going to be switched automatically rather than doing
everything one at a time. The fonts, you can
do this as well, or you could have ready made themes depending on
your preference. This is quite acceptable. If I click on this,
automatically by default, it's going to adjust
all the themes for me in a way which
reflects this theme. Now let's take a look at
the end result. Here we go. So this looks quite better. We were able to modify this. The theme is proper. It conveys the nature
of the website. Instead of going through
every single one of them, wasting time, you can do this
with a couple of clicks. Also, this applies to the
buttons that you have, the primary and
secondary buttons for the sections
and the margins. It's up to you to
tinker with that. Again, like I've
mentioned, because there's a lot of room for
innovation and flexibility, and I'm simply guiding you
through the process of trying to tinker with these and apply these to
your own cases. So that being said, now
we go back to the pages. As I can see, we have adjusted the entire styling in terms of the colors
for our website. Now let's go to the images. I could just simply click
to add another image, or you could add a
link, by the way, to the image, or you can just simply edit the
image hold together. If you have a shadow, for
example, you could adjust that. Let's move this. Here you go. Take a look at this. I
added a shadow to my image, and I could do the same thing over here, click
on the settings. Here we go. Let's click on the
image, the brush. Then we have a shadow as well. You could increase the
pixelation. And here we go. Now you've got
some nice shadows. It provides some good
effects for your website. Very straightforward, very
powerful, very simplistic. You're able to do so
with a couple of clicks. At the same time, you
could extend this from the display
itself. Here we go. You can adjust the
sizing rather than going to code it or try
to adjust it manually. You can just simply do
this at a drag and drop. It's very powerful. You
could add links over here. This is a button. You
could embed links. You could edit the
whole button as it is. The format of the
button could be changed whether to the left
or to the right. Let's keep it left side, and then we could edit
the text of the button, and then we could add link over here such that
whenever we click, we have the navigation. So this is very powerful, such that you have a full on website with a couple of
clicks that's good to go. And it's about you to go
about the manual edit. Going to transition
to the About us page. Now, if you take a look
at this, by default, the theme has been
arranged properly. Now, let's say I would like
to change one of the images. You can click on
this, click on Image. You have the ability
to upload an image, or you have just simply
to go on stock images. Let's look for plane or travel, something related to
this. This is okay. Sounds like it feels like the theme where you
have a passport and you're planning
on traveling. So you get the whole idea. Now you're able to
modify your website as you go about this
systematically. You got your pages in
the main navigation. You've understood how to go about editing and
adding sections, and you can apply
the same strategies to every single one of them. And if you would like to
have bulk modifications, go to the styling and you're
able to do so easily. Now, in the next lesson, I'm going to show you
some additional input on the building process
of your website.
6. Adding Functionality to Your Site: Now in this current lesson,
we are going to have a bit of an advanced feature that you could integrate
into your website. In the previous lecture,
we have learned about how could you set up the
website, build the website, edit the website, go
about the themes, the pages, the layouts,
and the modifications. But what if you'd like to
have some interactivity with a new website that
you're able to actually collect
information from users, such as registration forms, contact details, et cetera. This is a bit advanced, but it's very helpful that you
get to know this. So what we're going
to do is I'm going to go all the way to the
bottom, click on at section. And I'm going to have
this following prompt. You could add text,
buttons, images, videos. All of these are
straightforward. When you click on them,
you can just simply manually type them
or upload them. But what I'm concerned with
is I'm going to go for forms. This is the ability to
actually collect information. Now, in order to do so, I need to have some back end
database to collect this, and this is where
the segment data comes into play. Let
me walk you through. I'm going to click on Forms. Now, this will prompt for me an AI prompt window to determine how would I
like to create my form. You can just simply
use registration form. It's up to you. New form or an existing form. This is something
which I have created. But let's click on New Form. So I'm going to
click a New form, and this is going to ask me, which table would
you need to use? Now, already in your website, there are pre built tables, already preset tables, but I don't want to mix
the information. So what I'm going
to do right now, I'm going to navigate back to data and I'm going to
create a new table. Now, these are the other tables, and these are the
tables on the website. I have created this. It
wasn't there the tables. I'm going to create a new table to show you how
to go about this. So create a new
table. I'm going to call this registration primary. Register your details. Okay? This is safe. So now I have created a new
table, and in this table, I'm going to have columns, and these columns
are going to be reflected on my form to
collect the information. Let me show you how
does that look so take a look at the display over here as the table
is being populated, we got name, we got email. All of these have been added. So when I add them by default, they are going to be
present on my page's form. I'm going to show
you how could you establish such a connection. Now, as you can see over here, I got the name already present. I'm going to add a new column. I'm going to call this as email. This will be a single line
or text, a number date. Is going to be a
text. Here we go. Behavior is going
to be calculated, not just simply an input,
and that's mainly it. Now I'm adding
this extra column. Think about it like an xl file where you're able to
collect information, I get the name, I get the email. This is already locked
the date of creation. I'm going to actually
shift this to the left. Now I got myself my basic form. This is why I called it
as registration primary. I added two columns to
collect my information. Now I'm going to navigate back to the page
that I had before, which is the About us page
and establish the connection. Click on the form. On edit form. Now I'm going to be choosing
from an existing form. I'm going to click New form
now. Choose the table. Now, we set primary
registration, yes. So this is the table
that we have created. Now I'm going to
select the form in the table, and that's maid. Now I'm going to click Okay. Notice what's going to happen. I'm going to have the
prompt window right now to actually collect the
names of the users. Now, it did not
display the email ID, but I can just simply
go to the edit fields. I click on that. I'm able
to actually add the field. This is one field. Let me try
to edit this field for you. Now you got the name label, use a custom error message, show the description to write the name. Or to validate this. So you could edit this
as field by field basis, or you can just
simply add a field. But primarily, if I
click on Edit Form, let's take a look at the data. Data from this form,
what does it do? It creates a new record
or updates a record. It creates a new record because this is just
simply registration form. And once they click
Submit display message, thanks for joining us. Here we go. Joining us. Here we go. And we are set. So this means whenever a
user just simply types in their name and they
click on submit, they will receive that
message, and by default, you will have the ability to actually collect the
information and your data. That way, when you
navigate back to data, you click on the form and
you notice your form has the display name
changed over here, and then you have the ability
to add extra columns, and you're able to take
a look at the forms, and you're able to
actually select the form that you have and
then modify it according. You get the logic. It's a bit advanced,
but it gives you the ability to have
a website which actually connects the
information for you. You're able to just
simply have this display. Someone fills in the details, and you're able to collect the information in the dataset. You'd like to add more fields, simply click on Edit fields
and add them to your table, and that's mainly it and add them to your form,
and that's mainly it.
7. Getting Your Website Ready to go live : Back. So we've
learned how to set up our pages, build our pages, edit the theme and styles and the variations
that we could have, how we could incorporate
forms into our website. How could we edit the styling, how we could actually
incorporate tables which collect information
from our website. Now we are close to actually
launching our website. So in this case, we are going
to navigate to the setup. And on the setup page, if you
have been using Wordpress, for example, any other
web hosting platform, you have similar settings. For example, you got
the site details. We're going to take a
look at this. This gives you the security check. You click on these to
have some assessments in terms of the health of the website and you address
any security warnings. Then you got the basic
website details. Then you transition to God go live check every single
one of them is going to actually run a scan to cover certain grounds which are
scanned for vulnerabilities. You got the site checkers, pick and allocate licenses, convert site from
trial to production. This is important when
you are ready actually to have the site go live. And when you are
going from a account, this is a trial account. You need to go for
an actual account. You have to convert this. This is quite
important make sure that the site is not deleted. Then enable CS then to load the site faster you click on
this to enable a connection. Then WF security for the site. Custom Domain, if
you would like to have a custom domain to your own website URL instead of using this current URL
that's doable as well. Then you set the
site as to public. This is where you are
ready to actually receive individuals
visiting your site. Then we transition to
the site performance. Once your site is
up and running, you have the ability to enable CDN to make the
site load faster, select certain pages,
to load them before other pages to make sure that the site is up and
running as well. Then you transition to the mobile web page
application in case you have different settings for the mobile page,
you're able to do so. And for additional
integrations for cloud flows, if you have created existing
flows on Power Automate, you could integrate
them and you're able to see the
connection between them. For example, once someone
clicks on the website, certain automation takes place. This is quite advanced when we are concerned with
integrating systems, external apps if there are additional applications,
site search preview. If someone is trying to search
something on your website, you could enable keyword search, and you could enable site
search with generative AI. This is very powerful. You could just simply go to your website. There's a search bar,
search prompt window they're able to search for something, and
that's mainly it. And additionally, you
have the ability to add copilot you could have
your own virtual chatbot, virtual agent present
on the website. So you could just simply click quickly get your
copilot up and ready. It's a trial version,
like I've mentioned, so you have to be careful
with that because you're not going to have
the full functionality, and then you have the option to enable copilot on the website, and your site is good to go. So once you are done
building your website, you go to the setup page,
take a look at the details. Go to the live check list to make sure everything is okay. Take a look at the
site performance, mobile responsiveness, any integrations that you have, you would like to add
copilot and search preview. You could enable those. Now, it's being created, the copilot, and
everything is good to go. So this means that
you have fulfilled the creation part of your
process from A to Z. And finally, there's
an additional section, which is the security section. This is a newly added segment to Power pages where you're
able to run Pagecan. It takes takes some
time to fix any issues. You're able to assign
web rolls if you have other individuals working
with you on the website, page permissions to access certain pages and to
block certain pages, table permissions, when you are creating
tables over here, not every individual in your
company could access them. You could set that web
application firewall, that could be adjusted as well, but you need to have the
admin center connected enable the firewall for your
website, identity providers, then you have the various
providers integrated in your website and it could be integrated to your website
and you can configure them. Your site visibility, which is very important,
once you are done, since this is basically
a developer environment, we cannot go live
with the website, but once you have an
official actual account, you have the ability to
set the public setting for the website and your website
is ready to accept visitors, and you could give access to certain individuals to access the site or to work
on the site with you. That way you have
completely covered your site production
from A to Z, all the way to giving
access and Control. Monitoring the usage,
collecting data, modifying datasets from forms, fixing the theme,
creating multiple pages, adding elements to the pages, and now your website
is up and running. And once you're
done, make sure to sync everything and click the preview button in order to see the end result
of your website.
8. Wrapping Up: So what do you
think? I truly hope that you found the
class helpful, specifically if
you are a beginner when it comes to web design
and web development, and you have no idea
how to build websites, but you'd like to showcase your work as part of marketing, branding initiatives, it's
a very important skill that you need in today's world. Literally, everything is online, and you should have an online
presence of some sort, whether showcasing your work, showcasing your projects,
the applications are ends but often you tend to
find that the problem is, students they have
no idea how to code or how to use
some complex tools. This is a very easy
way for you to get your website up or running
with fraction of the time. And I truly hope
that you found it helpful if it helped
you at least learn 1% extra stuff in terms of
web design capabilities, and you got some innovation, you got some inspiration
for your upcoming project, then this is a job well done. I look forward to receiving your feedback on the
current class and make sure that you follow
my profile for the latest releases and updates, and I'll see you the next class.
Engr. Hussein Attié, CEO I Engineer I Educator
