How to Code a Personal Splash Page in Ruby on Rails, HTML & CSS in 30 mins
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 https://www.iconfinder.com/ 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/home.page.erb 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 http://littlevisuals.co/ 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(‘YourImage.xxx’);
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 https://www.google.com/fonts
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 http://splash2.herokuapp.com/
p.s
Read this From Zero to Programming Hero How I Learned Ruby on Rails
P.P.S
I’m teaching a new class on Ruby on Rails & Web API’s.
For an example of what you are building check out www.FindInsta.com .
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!
p.p.s
Please recommend & share this to anyone, who might find this useful.
p.p.p.s
For extra bonus points can you name the city used in the splash page?
Regards
Neil
