Code your own personal splash page in 30 mins

How to Code a Personal Splash Page in Ruby on Rails, HTML & CSS in 30 mins

Neil Patel
6 min readNov 4, 2014


This lesson is for Ruby on Rails beginners who have a basic understanding of HTML & CSS. This was done using Mac 0s x v.9.4 and rails version 4.0.4

27/07/2015 — see update at the bottom

Step 1: Lets Start!

Go to the command line and create a new rails application and call it splash

Open up your command line

Type rails new splash

Next type cd splash

Restart your server rails s

Go to localhost:3000 in your browser and you should see this page!

Step 2: Create your page

Still on the command line CMD-T (if you are using a mac) to open a new command line window

Type rails generate controller Pages home

Restart your server type rails s

Type http://localhost:3000/pages/home in your browser, you should see this page

Step 3: Update the text on your home page

Open up sublime and open your application

Go to app/views/pages/home.html.erb

Edit <h1>Pages#home</h1> and change to <h1>Your Name </h1>

Edit <p>Find me in app/views/pages/home.html.erb</p> and change to <p> Your job title</p>

On the next line add <p> Add something interesting text here!</p>

15. Go to http://localhost:3000/pages/home in your browser, you should see this page

Step 4: Add social media icons

Go to and download the social media icons your want to use. I am using twitter , github and facebook with an icon size of 32 x 32 pixels. Download and copy the icons into your app/assets/image folder.

Add line break <br /> underneath your interesting text

Go to your app/pages/home.html.erb page and add your icons and links to your social media networks -see below. target=”blank”> means it will open a new window within your browser.

Step 5: Add Bootstrap

Go to your Gemfile and add gem ‘bootstrap-sass’

Go to your command line and type bundle install

Restart your server rails s if you need to

Create a new file under app/style/stylesheets and call it bootstrap_and_customisation.css.scss

Add @import ‘bootstrap’; and save the file

Go to app/layout/application.html.erb and in your <head> add the line to

<meta name=”viewport” content=”width=device-width, initial-scale=1"> this should make the browser render the width of the page on different sized devices.

Next go to your app/views/ and add a <div class=”container”> around the whole of your text

Go to your browser , enter localhost:3000 and refresh your screen

Step 6: Add a Root

To change the root go to app/config/routes.rb file and change get “pages/home” to root ‘pages#home’ Go to localhost3000/pages/home it should give you an error because the routing has change to localhost:3000

Step 7: Add basic styling to the container

To add basic styling go to your container, go to app/stylesheets/bootstrap_and_customisation.css.scss and create a container and add the following

.container { width: 350px; margin: 200px; padding: 20px; background: black; }

Make sure you have the . after the container. this code creates a black rectangle around your content.

Step 8: Centre the container , add transparency , add rounded borders and centre the text

To centre the container , change the margin to margin:100px auto;

Add the transparency insert the line background-color: rgba(0,0,0,0.6);

For rounded borders add the line border-radius: 40px;

to center the text add text-align: center;

.container { width: 350px; margin: 100px auto; padding: 20px; background: black; background-color: rgba(0,0,0,0.6); text-align: center; border-radius: 40px;

Go to your browser enter localhost:3000 and refresh your screen

Step 9: Add Full Page Background

Go to a free stock image website, and select a suitable background, download and copy the file to your app/assets/images folder.

Go to app/stylesheets/css/file and add the following text to add a background to your page

body {background: url(‘’);
background-size: cover;
background-position: center;
background-attachment: fixed;}

Don’t forget the closing tag at the end

Step 10: Change colour of the font and line height

within the body element add the colour and line height

body {

line-height: 1.5;
color: white;


35. Save all changes , go to localhost:3000 in your browser and refresh your page

Step 11: Change the <h1> font type and size

Using the same stylesheet, under the container element. Create a new h1 element in the stylesheets and add the following.

h1 { font-family: ‘Helvetica Neue’, Helvetica; font-weight: 100; <- this makes the font thinner font-size: 60px;

Step 12: Change the <p> font type and weight

p { font-family: arial, Helvetica; font-weight: 200;

Step 13: Add Google fonts

To make your fonts look nicer , go to

Select the font you want in this example I have chosen Lato.

Click on Add to Collection and underneath that click on use. This will go to another screen where you can choose the styles you want. Go to step 3 and click on import

Copy and paste the highlighted text and add this to your css.scss file

Step 14: Integrate your fonts into CSS

create a p selector in your css.scss file as shown below and add the Lato font to the font-family

p { font-family: ‘Lato’, Helvetica; font-weight: 200; font-size: 16px;

Save all changes

Refresh your screen and hey presto!

You have created your own personal splash page.

Here is the finished splash page


Read this From Zero to Programming Hero How I Learned Ruby on Rails


I’m teaching a new class on Ruby on Rails & Web API’s.

For an example of what you are building check out .

A photo search app that allows anyone to search for images using data using Instagram API. No need to be a technical wiz!

Use discount code medium5 for $5 off!


Please recommend & share this to anyone, who might find this useful.


For extra bonus points can you name the city used in the splash page?






Neil Patel

Screenwriter/Podcast host & Producer. Fast learner, Passionate about storytelling. Good sense of humour, & Enjoy challenges!