Process for Creating HTML templates on StackSavings.com

Introduction Work for us as an HTML layout developer to create customized layouts that are able to be used on StackSavings.com. Our process provides a way to create layouts that can be re-used for different pages easily. Objective The objective for this initial task is to create a layout that is responsive, meaning it works on both Desktop and Mobile view. You should already have good experience with CSS and HTML to work with us on these types of tasks. This layout should be one that has text and images content and an objective to get a user to signup, by inputting their email address. An example layout is this: http://stacksavings.com/detail-post/stand-out-and-get-better-landing-page-conversions-1DlwG7/en (this is not necessarily of high quality in terms of the design, rather just an example of a page that is similar in functionality for what we want to do) Ok to do Use open source code / templates as a starting point, if a template is open source, it is ok to use it as part of your design. Not ok to do Do not use code that is not open source or owned by you. For example, you should not take a proprietary theme that cost money to purchase as a starting point, as this would cause legal issues. How we pay you We can discuss payment in more detail via email, please review this page for initial information about the payment methods that we offer: https://stacksavings.com/detail-post/Our-payment-Information-and-methods-17ST2c/en Step 1 Create an account: http://stacksavings.com/register/en if you have not already and login. If you do not yet have a GitHub account, create one at: https://github.com/join Then provide us with your username so we can add you onto our repository: Step 2 Checkout the code from our GitHub repository for our layouts here: https://github.com/StackSavingsTeam/stacksavings.com_templates Then provide us with your username so we can add you onto our repository: https://github.com/StackSavingsTeam/stacksavings.com_templates Step 3 - Beginning work on your new layout Once we have added you to the GitHub project, You should upload any CSS files, images, etc that form the base components of the layout into the repository. You can do this by going to https://github.com/StackSavingsTeam/stacksavings.com_templates and then choosing the button for "Upload Files". Make sure to upload a whole folder here, do not upload individual files. You should pick a name for the folder that describes your layout. Once you have uploaded these, the files should be viewable using a url like this: https://layouts.herokuapp.com// Please check that the path is working so that you can see your files. The names of the repositories should not have any type of separator in case it has more than one word, for example: custom-layouts, instead use camelcase: customLayouts, since the browser will replace the separators with strange symbols. Step 4 - Working on your layout in the StackSavings editor The StackSavings editor is used to create a new post and to integrate this with the files you uploaded to GitHub. On the create / edit post screen, you will want to go to the "Code" tab, then notice the three fields below: Edit JSON This field is used for creating a JSON structure that holds variables for the page. This makes it so that the layout can be re-used for different content easily. These variables that are defined here can be used then in the Custom CSS and Write your Post fields Custom CSS This field is for CSS that can be customized using the values from the Edit JSON field. For example, if CSS is used to show an image on a page, then it should be defined here and use a JSON variable, such as ${someImage} so that this can easily be changed. Write your Post This field will hold the HTML for the layout and also should use the JSON variables for any text that shows on the page, as well as images, etc so that they can be changed within the JSON field easily. Example: This post shows an example of content for each of the three fields so you can get an idea of how this works. http://stacksavings.com/detail-post/example-post-json-css-and-html-for-layout-developers-2qzmDb/en Notice how variables like ${header.image} are used and how they correspond to values in the Edit JSON field. Remember: To add the link tag with the url of the css files and the script tags, these URLs are to the name of the layout, for example: https://layouts.herokuapp.com/customlayout/css/style.css or https://layouts.herokuapp.com/customlayout/js/jquery.min.css To make the changes of these urls in each call to these files, this includes the ones imported into the css files, example: before: @import('../css/master.css') after: @import('https://layouts.herokuapp.com/customlayout/css/master.css') In the Post field you can add head and body tags:

... ... It is not necessary to add the Doctype, we recommend you delete it. The files or libraries of third parties like jquery, bootstrap.min.css, it is advisable to always use the original cdn of them and leave only the js and css files of the layout, you can search the libraries at https://cdnjs.com. Step 5 You can work to customize your layout and make it so that all of the text and images are defined in the Edit JSON field. Once you feel you have completed the layout, please email us to update us on the status with a url to your layout. Make sure to check the box for "Disable template by default" as this is necessary when using custom HTML for the page to display properly. If you came across this page and have not yet been in touch with us, and are interested to potentially work with us, please submit the form below: