 Hello to everybody. My name is Maria Zaric. I will talk about the creation of small business websites from scratch in Warpaz. My process, La Venture commons or the adventure begins. As a great open source enthusiast, I have been creating free HTML5 themes and bootstrap themes within a decade, and I love to be a part of that community where we can all learn, share, contribute, evolve, respect and have fun. Most of my clients and my long term collaborators have found me via these free themes of mine, and some of them wanted a small business websites from scratch in Warpaz based on these themes. Open source follows the future of relations and the local communities. How with local communities very simple through education, because education is a vital key to human progress. Education should be constantly striving toward, toward new discoveries. I quote, in my sitting with the words, we have great street art, with the great words, create together for tomorrow. That is actually what we're doing when being open. We are creating together for tomorrow. All of us. Web is built on open source by wonderful altruistic people. Thank you for being open, humble, curious and enthusiastic. Our process consists of a couple of steps. Listen, discover, concept, designing in the browser, testing, WordPress. The first step is listen. Communication skills are crucial, aren't they? Thank you for finding out how many pages the client wants to, what are their design requirements? What is the budget? What is the final deadline to whether they prepare the content for the website? Because if they didn't, never send them a lorem ipsum text in the design. Instead of lorem ipsum text, find some quotes, find some varied quotes of yours that you have about traveling, reading knowledge creativity and put it inside the page to see how it fits inside that structure of the same page. I always do that. Most of my clients who had the knowledge of WordPress, admin panel, wanted to update the website by themselves, of course. Others wanted me to update the website. Some of my clients needed a short explanation of how to update the content by themselves in WordPress. Overall, good communication skills and cooperation are the most important. It's all very kinetic and energetic. The second step is discover. Discover or researching. Depending on the type of the project and the client's requirements, it could be finding the new responsive framework, new design inspiration, some new functionality, new code, a great color palette, code typography. In this step, I really always learn something because learning should be a lifelong endeavor, not just your current priority. After the first two steps, I create a concept of the website in my mind without any kind of mockups. After I get the idea of what the client wants, I start creating in my mind with all the updates, design functionalities, and so on. Free photo editing software that I use instead of Photoshop is PhotoPia.com. It's really, really great for images. A great software that I use for the creation of websites is Trim and Viver. So I opened Viver and I go straight into HTML and CSS because coding is fun. Grasp the unknown and create poetry because code is poetry. And please save the forests wherever you can plant a tree. So the next step is designing the browser. Designing the browser as the next step meets seeing the design in the browser as soon as possible. As soon as possible, see the design in the surrounding in which it will work. So I sent to the client index HTML page via my website or via their website, depending on who we agree. I create a folder test inside a test folder. I have all the pages and I send these pages via this link to the clients. And only they can see that, of course. Advantages of the designing in the browser. Design should be in the browser. Okay. You can easily show changes without having to alter the entire page. Design will be accurate. 90, 90 percents. You will be much faster and you will cut the development time. Isn't that the goal of, isn't it the goal of the whole process to cut the development time to be much faster? Overall, overall, what is essential is that your clients will have a better understanding of the design. Everything will be quite groovy. Excellent. Everybody will be happy. After a couple of days of reviewing the home page, I start working on inner pages as well. Within a week, I have a couple of pages already made. What designer is somebody who knows how to code and loves the design? And everything else groovy. Now, responsive frameworks. I started using Bootstrap since 2014, and I never stopped, definitely. I used other frameworks from responsive to foundation depending on what the client wanted, but I continued eternally with Bootstrap. So, for all of you out there, thank you again for watching. Thank you for listening. It's really always, I must say, it's kind of awkward to, you know, record yourself in the room and you know that people are watching you out there. It's awkward. But anyway, it's better always offline, but it's okay. I have to sit. It's crazy to imagine you to sit and not to see people. But for all of you out there again, feel free to download free Bootstrap teams online via this link, MariaSage.com, Slash, Work Slash. There are a couple of them, and they're ranging from one page for saloon team, one page for animalistic, simple studio creative agency team, cat shelter team and so on and so on. Feel free to download one, two, three or all of them for your future projects, or at least for learning HTML, CSS, Bootstrap, or to make them into Bootstrap teams, Bootstrap websites, or to make them into WordPress teams or small business websites from scratch in WordPress. Download and enjoy. Testing and testing. The next step is testing. Testing consists of a couple of ways. Online emulators, real devices, local stores. With online emulators, you can, I mean, there are lots of online emulators. I would say that with them you can test on the best range of devices very, very quickly. I cannot remember online, but you know just go into the Google and just put online emulators and that is it. With real devices, you can find all the bugs. Yeah, all the bugs. I really love this. Real bugs in the parks in the city everywhere. I want to record them. Local stores. At the beginning of learning Bootstrap, I went to the local stores because they have thousands of millions of the devices and I could test it on all these devices and see where is the issue and so on. Now I do it very rarely. The clients usually have a lot of devices and then if you have an issue, the client says, Maria, we have in this device, I never heard of that device, we have this issue. I open Dreamweaver, I go into CSS, into media queries and fix the issue just for that resolution for that device. And everything is fine. Really, you just get into the code and work design in the browser. All right. Love the bugs. Love the code, love the design, love PHP, love WordPress, love your cooperation with the clients, love it all. Finally, after we agree that everything is fine with the website, I start creating files for WordPress. These are all the files that you need from a small business website in WordPress from scratch. This is index PHP, that is for the home WordPress page, page PHP, it is for all inner WordPress pages. Heather PHP consists of everything that you want to see at the top of the website for the PHP it is for everything that you want to see at the bottom of the website and start CSS CSS for the design of the page. So we have index PHP, page PHP, Heather PHP, for the PHP and start CSS. Don't complicate things when you're creating a small business website from scratch. These are all the files that you need. Now, we'll go through two screenshots of index PHP and page PHP to see what it consists of. This is index PHP. Okay, let's see what it consists of. It starts with PHP template name home. It's very important to put this template name home. You'll see very fast by we have PHP get Heather. It calls Heather PHP. We have PHP while I have posts, the posts PHP the content PHP and while PHP the content is for the main content for the page. Actually, this whole loop is for the main content for the WordPress home page. With this loop, you're giving the possibility to the clients to update the content by themselves. Very simple. PHP get footer. It calls for PHP, everything that you want to see the normal the website and body HTML, it is closing of the whole page. It calls for index PHP for home WordPress page. Now we go to page PHP. It is for all inner WordPress pages. We have here PHP template name page. You should put that template name page. You will, you will know very soon why is that it's all the same. The whole script is the same in index PHP in page PHP except in index PHP we have template name home here we have template name page, but I'll go through it again. Now we have PHP PHP get Heather. It calls Heather PHP we have the same loop. The main content for WordPress inner pages get footer footer PHP it calls body HTML finishing the whole page. Very, very simple. Yes. Now, I installed the WordPress. Here's the installation of the WordPress very short. Download the latest version of WordPress, unzip the file and upload it to the public HTML or similar directory, create my SQL SQL database and user, configure the PHP file and run the WordPress and star. The installation is very, very easy. And after install the WordPress, I activate the team, and I start the creation of WordPress pages and WordPress admin panel. I'll show you two screenshots on my own website that I created from scratch. Just as an example. I get into WordPress admin panel and I start creating the page at the top you see the page name home. At the bottom, on the right side, you have template. What did we have the whole that is that calls index PHP that is that template name that I put home, and it calls that page. So that calls index PHP for the homepage. On the left side, I put the main content from HTML page index HTML to WordPress page. And that is all. I also took all the images from my computer to media library I put the images that I want into home WordPress page and that is it. And behind this main content lies that loop PHP loop with the content that, you know, gives it gives you the possibility to update the content by yourself or for the client to open the content themselves. Very, very easy. Let's go to through another stage in a page. Okay, page name by at the bottom template that is page that calls page PHP. On the left side, I also put the main content from bio HTML to WordPress page. And that is it. You can update the content by yourself the client can update the content by themselves and so on. For example, you're creating the services page put for the client page name services template page that goes page PHP on the left side you put the main content from services HTML to services WordPress page and the client can update it by themselves. Most of my clients wanted to update the main content something from homepage about us page services conflict contact. You can create a new speech you can make it as a block, but I very frequently created it as a page. So you put page name use template page on the left side you put all the main content from news HTML to WordPress page and the client can update it from time to time with their latest news and updates. So the same with other pages. As you can see, it's very simple to create some business website from scratch. When we talk about plugins, I usually used one plugin. When the plugin is updated, there are no problems at all. I automatically updated the WordPress. And nothing, you know, could happen, because with a small business website from scratch you're controlling the whole code everything, you know what could happen, you know, when you're creating a WordPress. You're using the WordPress teams with a lot of functionality something can go wrong. You don't know what is happening, but that is, if you are, you know, WordPress developer, you will know that web designer. This is enough for the web designer to know how to go to designing to create small business website from scratch like this. That could be enough. All right. Now, I hope this is all clear, really. What is very important people is to simplify your process to make the easiness of your process to make it more effective and productive. I think, you can just imagine, you can just imagine. Oh, no, please don't imagine start doing it down with some freedom of mind and start going through this whole process. Try it if you haven't already. Please simplify. And now, all of your finished finished project projects should be recycled as the templates for the future projects. So you took something of mine, you finished it, you finished it for the clients requirements. And now you leave it like that. So use it for your future project, other clients contacted you and says they want something you open dream lever or any other software that you use, go into HTML CSS updated according to the clients requirements and recycle it. Every, you know, like every finished project recycle for the future. So don't don't don't start from zero, you know, open some software and start from zero and each any HTML and CSS and, and so on and so on, don't don't again complicate stuff. Start from something regarding to HTML and CSS and bootstrap start from something some finished theme of yours some finished project of yours. And the whole goal is to to to make easiness of the whole process, not to complicate things. I've seen how people complicate things don't do, please. And now, for the French, and now a little bit of French, I have been learning French language in my primary and in my high school in my primary school my teacher. She was obsessed with the verbs, pondre venir, so on, I had to know, I mean, we all have to know the present tense, pondre venir, while and so on, and we knew it all. And in this city, in high school, my professor wanted all of us to, to, to speak French, which was very difficult, very, very, very difficult, very difficult. You know, it was interesting, but to speak a little bit, but we had, I must say, the wrong education from primary school we didn't talk in French in primary. So I couldn't talk in high school, but I know a little bit of it. As a great fan of sticker art and as a sticker artist myself. I have found this great, great profound thought in the city in a couple of places. It doesn't exist. It's very philosophical, philosophical thought, j'existe, I exist, we could talk about it really, very philosophical thought. People should connect with sticker, with sticker art in a personal, intellectual and creative way. And I should by saying, nothing is impossible, believe in these words. These are very motivated words. Motivating, motivated. Therefore, stay, stay motivated, be inspired, be what be awakened. Share, evolve, grow, respect and have fun. Thank you again. Merci beaucoup.