Aquasar
  • Home
  • Portfolio
  • Articles
  • Pricing
  • About
  • Contact
WEB DEVELOPMENT |SEO |DIGITAL ADS

Getting up a stunning html5 landing page fast

Jun 22nd, 2019

Alex Quasar

web development

It is often not cost or time effective to redesign everything from scratch, especially for Freelance Developers. For quick, simple and beautiful landing pages customizing an existing template a client wants is often a good cost effect solution, especially when it comes to quick Landing Pages.

In this tutorial, I will show you how this can be done via html5up. Html5 up has some awesome landing pages than can get up the skeleton for your Website or landing page without using wordpress in record time.

Prerequisites: Basic web development knowledge. Have nodejs installed on your computer, a code editor (ie. vs code) and familiarity with git/github, Live Server extension. Also basic some CSS/SCSS knowledge.

Step 1: Downloading and Running on localhost

I went to html5 and picked out the Paradigm Shift template. The following steps were done:

  1. Open up in VS Code.

  2. In terminal run: npm init to create a new package.json file and open with live server.

I opened up this index.html file with Live Server. In VS Code you can do this my installing the popular extension Live Server, which will run your html files on localhost: 5500.

This already gives me the site that is on the demo. Couple things I noticed. The form does not work. Form submission will be linked with Netlify later on when we host this site. It will also send a form submission to an email.

The other thing I noticed is that the styles are in sass/scss not css. This is actually a wonderful thing since it is much easier to maintain styling with sass/scss rather than css. To apply a custom style we need node to install a package and run a little script.

Step 2: Customizing the Theme.

SET UP

In VS Code integrated terminal I ran: npm i node-sass which is a popular library that compiles our scss/sass code into plain old css. I then added the following script in the package.json file. See below:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1 blah blah blah",
    "scss": "node-sass --watch assets/sass -o assets/css"
  },

Inside your terminal run this script using npm run scss. This will compile and watch for changes in the sass folder and compile them into the css folder. Here all the sccs files are brought into the `main.scss` file and compiled into the `main.css` file. For other projects you need to be cognisant of the location of your input sass or scss folder and your output css folder relative to your package.json file.

For example:

  • node-sass - This is the package we installed using npm

  • --watch - Anything with `--` is a flag. This is a flag that watches for changes in the sass folder

  • -o - is the output flag that says `output the sass into the folder assets/css`

Sometimes the assets folder will be called something else or there might not be an assets folder. You will need to adjust the sccs script accordingly.

STYLING

To make edits to the theme you usually have to do a bit of poking around. However, it is common convention to have all the main colors stored in a variable. Inside the _var.scss file I see the themes colors. For illustration purposes, I will change the $palette colors from green to a light blue and the font-family to cursive. This will change the overall theme colors and fonts right away.

PICTURES

Inside the images folder we can simply replace the pictures with some nice pictures found on unsplashed.com. I Find a picture that is not too big and optimize it using tinypng.com so the page does still loads fast. I name this newly downloaded picture the same as the one in the images folder, delete than one and then move the new one in. I typically crop and use pictures that are under 1 mb in a production site.

Step 3: Creating a Working Form Submission

Once the rest of your customizations are complete, the last thing we need to do is to have a working contact form before publishing the site and hosting it. To this easily we are going to be using Netlify. In the form tag we need to add the following properties.

  1. method = "POST"

  2. data-netlify = "true"

We can also add a recaptcha for spam filtering:

  1. data-netlify-recaptcha = "true"

The final form will look like this:

<form
  method = "POST"
  data-netlify = "true"

>
  <div class="fields">
	<div class="field half">
		<input type="text" name="name" id="name" placeholder="Name" />
	</div>
	<div class="field half">
		<input type="email" name="email" id="email" placeholder="Email" />
	</div>
	<div class="field">
		<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
	</div>
	<div class="field">
		<input type = "file" name="myfile" id="myfile" placeholder="Upload your file" rows="7"></input>
	</div>
	<div class="field">
	<div data-netlify-recaptcha = "true" ></div>
	<!-- will only see recpatch upon deployment -->
	</div>
	</div>
	<ul class="actions">
		<li><input type="submit" value="Send Message" class="button primary" /></li>
	</ul>
</form>

Step 4: Git and Hosting

To publish to your site create a repository.

Create a GIT REPO

In github.com select a new repo and follow the steps OR In the integrated terminal:

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin master

Create A Netlify Account

Create a Netlify account for hosting and select your new site from git and choose the repo you created. Under domain settings you can specify a custom domain. Under forms you can add an form notification to slack or your email

Finally we in Netlify we can go to deploy, trigger deploy, and deploy site our site should be deployed and up and running for the world to see in about under 1 minute.

Here is the final version: https://dash-intel-demos-001.netlify.com