Ruby on Railsframework~30 mins

Public and assets folders in Ruby on Rails - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Using Public and Assets Folders in Rails

📖 Scenario: You are building a simple Rails web app that needs to serve a custom logo image and a CSS file for styling. You will organize these files properly using the public and app/assets folders.

🎯 Goal: Create a Rails project structure where a logo image is placed in the public folder for direct access, and a CSS file is placed in the app/assets/stylesheets folder to style the homepage.

📋 What You'll Learn

Place a logo image file named logo.png inside the public/images folder

Create a CSS file named home.css inside app/assets/stylesheets

Add a CSS rule in home.css to set the background color of the body to #f0f0f0

Reference the logo image in the homepage view using the correct path to the public folder

Include the home.css stylesheet in the homepage layout

💡 Why This Matters

🌍 Real World

Web developers often need to organize images, stylesheets, and scripts properly in Rails projects to ensure efficient loading and maintainability.

💼 Career

Understanding the public and assets folders is essential for Rails developers to manage static files and styles, a common task in web development jobs.

Progress0 / 4 steps

Create the logo image in the public folder

Create a folder named images inside the public folder and add a file named logo.png inside public/images.

Ruby on Rails

# Create the folder public/images and add logo.png inside it
# Your code here

Need a hint?

In Rails, files in the public folder are served directly. Place your image inside public/images.

Create the CSS file in assets

Create a CSS file named home.css inside app/assets/stylesheets.

Ruby on Rails

# Create app/assets/stylesheets/home.css
# Your code here

Need a hint?

Use a text editor to create home.css and add a CSS rule for the body background color.

Reference the logo image in the homepage view

In the homepage view file app/views/home/index.html.erb, add an <img> tag that references the logo image using the path /images/logo.png.

Ruby on Rails

 tag referencing /images/logo.png in app/views/home/index.html.erb -->
# Your code here

Need a hint?

Use the src attribute with the path starting with /images/ to access files in the public folder.

Include the CSS file in the homepage layout

In the homepage layout file app/views/layouts/application.html.erb, add a stylesheet link tag to include home.css using the Rails helper stylesheet_link_tag.

Ruby on Rails


# Your code here

Need a hint?

Use <%= stylesheet_link_tag "home", media: "all" %> inside the <head> section to include your CSS file.