QUICK AND RELIABLE LITE PACKAGE BUILD

The first step of this process consists of going to your project issue and to download all the project files attached. You will then open the ones that you need, the copy template, the design brief, and the logo which you will import inside Adobe Photoshop. Right now, you will be looking through the basic things that the website must include, and after that, those details will be placed on the website. This step is not at all about the design of the website but rather about setting up the most fundamentals things that don't require design. By now you should have created a blank template website and go straight into the "SETTINGS" tab.

SETTINGS:

From top to bottom we should go through every setting and complete the details that we need. The first is the “SITE ICONS“ here we must place the favicon. We have previously opened the logo inside photoshop, it's time to create the favicon and place it on the website. You can create an image of 200x200px and try to include the most important part of the logo.

The next setting is “SEO“. We should now get inside the copy template and scroll to the end of the document and get the main site title, paste it inside the SEO settings, and then also get the description and paste it. After you are done with this please don’t close the copy template nor scroll back up as we will need this again in a bit.

What remains to do is to select the site language from the “SITE LANGUAGE” tab. This will get selected accordingly to the business location. And this is all for the settings tab.

PAGES:

Right now we should create all the pages that the client specified. Go to pages and delete every page except the homepage. Now open the copy template at the very bottom of the document where the titles and descriptions are, and what you should do is the following: First of all, enable the "NO INDEX" option so that the pages are not google indexable. This is a very much required step. After this start copying the titles and descriptions and the page names.

If you do now have a dual monitor setup you can do this by using the shortcut keys ALT+TAB, switch between the document and the webpage, copy the title, and paste it into the title field, copy the description, and copy it into the description field. When copying the description you should also look for the next page's name and after pasting the description create the new page with the name you have seen in the copy template, then repeat the above process until all pages are done.

NOTE: Please take in mind that page names that have the "&" symbol in it will generate as broken links and you will have to manually change the links for this. For those pages click on the setting icon and then go to "PAGE URL" change the link with the name of the page and replace the symbol with the "and" word.

BUSINESS INFO: 

The next step is to complete the contact details inside the CONTENT SETTINGS > BUSINESS INFO. Right here we have to enter the name of the business, the location, phone number, email address, social media, opening hours, etc. Every detail that the client completed inside the design brief that has to do with the ones above should be inserted here. You can find this information on the design brief's "SITE OVERVIEW" tab. This will make so that when you complete phone numbers, email addresses, open hours, and so on.. your information will get autocompleted when linked.

FONT AWESOME:

Everybody uses font-awesome, thus this is the next step. To place the link to font awesome you have to go inside the "DEV MODE" in the top right of your Duda bar. To see that button you need to see in the "Edit mode". Copy the link from your font-awesome account and paste it to Site HTML/CSS - head-section.html

You don't have a font-awesome kit link? Here is one for you: <script src="https://kit.fontawesome.com/75bcbaf329.js" crossorigin="anonymous"></script>



PLACING CONTENT:

The process of inserting data steps are over and fun part beggins, pasting all the content inside the copy template. Yes, before designing and finding the perfect layout for your website you should paste all the titles, paragraphs, buttons, etc. You should divide everything into sections. What does this mean? Well, there should be a hero section, an about us section, the services section, etc. Each one of these should be on a separate row, and every section should have some distinctive features. You want your homepage to be a bit diverse so that you can have what to work with later on. You should create sections that can be reusable on other pages and this is how you create consistency.

Get inside the copy template first page and start to copy-pasting the sections as suggested above. Right now the only thing you should worry about is creating distinctive sections. For example, we know that the hero usually has an image on the background, a title, a paragraph, and a button so we should build a row with one column and the things mentioned above. The about section for example usually has an image in it so you should have a row with two columns one should be empty because you will place an image later on and the other should have a title, a paragraph, and a button. The services section usually has more columns with icons and so on. You should only think about this design-wise but not more. We do this to have a better image of how the content will look on a page. You can get a better idea of what to build if you already have a visual of how things fit together.

Here is how your website should look like after this step. This one is not very diverse but you will sometimes find websites that are not very complex and you will have to create elements on the other pages similar to what you have on the homepage. Here the most relevant element is the text along a long vertical image that will be placed on the left column. This element can be repeated through the website.

If you really want, in this step, you can place elements that were already created by our team. There are lots of premade sections, even for the header and the footer.