Learn HTML, CSS, and Ruby on Rails: Build Your First Blog
3.8 (42 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,985 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn HTML, CSS, and Ruby on Rails: Build Your First Blog to your Wishlist.

Add to Wishlist

Learn HTML, CSS, and Ruby on Rails: Build Your First Blog

Learn How to Code with HTML, CSS, JavaScript, and Ruby on Rails. Build and Launch Your First Blog.
3.8 (42 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,985 students enrolled
Created by Daniel Kalish
Last updated 11/2016
Current price: $12 Original price: $20 Discount: 40% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 50 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Learn HTML, CSS, & Bootstrap.
  • App Development With Ruby on Rails.
  • Deploy a Rails Application Using Heroku.
  • Embed youtube videos.
  • All Students Will Have Access to Precise and Complete Code Downloads.
  • Learn to Use Git and Github for Version Control.
  • Streamlined Instruction for Ease and Efficiency.
  • Add a Facebook like button.
View Curriculum
  • No Previous Programming Experience Required.
  • Any Computer Can Be Used.

As coding and web-development becomes increasingly essential to our day-to-day lives, ranging from significant professional practices down to personal blog spaces and websites, the idea of personally building and designing a website becomes more and more desirable. Unfortunately, finding a mix of the right tools and drive can be challenging, and leaves a lot of potential coders overwhelmed in the face of programs without concrete results. 

In this course we'll be facilitating these very essential concrete results.

By introducing and breaking down HTML and CSS in a practical, functional manner, you'll see the direct results of better understanding the basic building blocks of almost any website. This course is perfect for beginners, as it aims to remove overly technical details in favour of result oriented understanding. 

We'll be developing a fully functional and presentable blog. In doing so we'll highlight the common elements of HTML to structure a page, and CSS to stylize it. 

You will also learn how to: Implement Bootstrap with HTML templates, build a web application with Ruby on Rails, and deploy your application with Heroku.

Hopefully the tangible output provided will give you the momentum you need to continue to pursue valuable coding skills!

Who is the target audience?
  • Web Development Beginners
  • Entrepreneurs
  • Front-end developers
  • Designers
Compare to Other Ruby On Rails Courses
Curriculum For This Course
27 Lectures
HTML and CSS Fundamentals
5 Lectures 14:29
  • Project Overview.
  • The Difference Between Frontend and Backend Web Development.
  • How to Install the Text Editor Sublime Text.
Preview 02:16

  • Start building the homepage.
  • Create your index HTML file.
  • Use your browser to open your index file.
  • See your first web page display the words hello world.
Preview 02:33

  • In the head, add your style tags.
  • Add CSS to change the background colour and font size.
  • Learn how to apply CSS to different HTML elements.
  • Learn to use your text editor to help find code errors.
Use CSS to Add Some Style

  • Use Javascript to add a popup message.
  • Use CSS to adjust the Style of the homepage.
  • Display two photos using image tags.
  • Learn how to set the image source path.
  • Learn how to navigate through directories.
Add an Image

  • Start making an about page.
  • Outline the basic structure of an HTML page
  • Add some CSS that will only be applied to the div class called container.
Link to a Stylesheet
Make Your First Homepage
11 Lectures 30:53
  • Make a new sublime text project.
  • Opening and closing HTML tags explained.

  • Add a youtube video link to the homepage.
  • Display social media images for Facebook, Twitter, and Github.
  • Use an a tag to turn the social media icons into working links.
Link to Your Social Media

  • Add some CSS that will be selectively applied to the div called container.
  • Change the container’s background colour.
  • Make the text in the body white.
  • Add some margin around the container.
Use CSS to Customize the Homepage

  • Use CSS to add a background image.
  • Hexadecimal colour system explained.
Add a Background Image

  • Use the RGBA colour system to make the background transparent.
  • Use CSS to apply different web fonts to your project.
  • Make rounded corners with CSS border-radius.
Transparency, Fonts, and Rounded Borders

  • Learn how to embed a youtube video into your homepage.
  • Learn about online resources that could help you fix coding errors.
Embed a Youtube Video

  • Learn how to center different HTML Elements like text and div.
  • Learn how to add a Facebook like button to your homepage.
How to Center HTML Elements & Add a Facebook Like Button

  • Set up a page with a main section, sidebar, header, and footer.
  • Add HTML to create the layout of the site.
  • Add an image and paragraph tag.
Use Divs to Layout Your Page

  • Apply CSS to visualize the header, main, footer, and container divs.
  • Centre the content on the homepage.
  • Add a sidebar.
Use CSS to Visualize the Layout

  • Move the sidebar to the correct location.
  • Use CSS to decrease the width of the main section to create space on the right.
  • Use CSS to float the main section and sidebar
  • Add another HTML div to prevent the footer from floating.
Float the Sidebar

  • The difference between HTML IDs and classes.
  • When to use a HTML ID.
  • When to use a HTML class.
  • Add more margin to the image tag.
  • CSS Margin and padding explained.
HTML IDs and Classes Explained
Learn Ruby on Rails: Create and Launch a Responsive Blog
5 Lectures 17:06
  • An overview, of the website that we will create in this course.
  • Make sure you have rails installed.
  • Follow the installation guide for the operating system you are using.
  • Check what version of ruby you have installed.
  • Check what version of git you have installed.
Preview 01:53

  • Start Terminal.
  • Create a directory.
  • Use "cd" to change the directory.
  • Generate a rails app.
  • Learn the commands to start and stop the Rails server.
  • Create a git repository.
  • Use git to commit code changes.
Preview 02:42

  • Create a new sublime text project.
  • Make a new route.
  • Create a new controller.
  • Define a new method called home.
  • Create the home view.
  • Save the code changes in git.
Start Making the Homepage

  • Check what version of ruby you're using.
  • Add the postgresql gem to the gemfile.
  • Set sqlite3 as the database for test and development.
  • Set postgres as the production database.
  • Add the rails 12 factor gem.
  • Run bundle install.
  • Sign up for a free Heroku account.
  • Download the Heroku Command Line Interface.
  • In Terminal, login to Heroku.
  • Create an Heroku application.
  • Use git, to push the local app to Heroku’s servers.
  • Go to your new Heroku URL.
Use Heroku to Get Your App Online

  • Create a free Github account.
  • Make a new repository.
  • Run git remote add origin.
  • Push your code to Github by running git push -u origin master.
Use Github to Save Code Changes
Add Twitter Bootstrap
6 Lectures 14:31
  • Add bootstrap’s gem to the gemfile.
  • Have rails install the gems and their dependencies by running bundle install.  
  • Add some css to the project.
Preview 02:07

  • To make the app look better, add some Javascript, CSS, and HTML.
  • Start meshing the design with the rails app.
  • Structure the home view correctly.
Improve How the Homepage Looks

  • Make the homepage look more like the design.
  • Add more CSS.
  • Commit the code changes to Git.
Update the Homepage CSS

  • Add Bootstrap’s javascript.
  • Update the layout of home.html.erb.
  • Push the updated app to Github and Heroku.
Update the Layout

  • Make the about page.
  • Make a new route for about.
  • Create a new method for about.
  • Create a new view for about.
  • Transfer shared code from home.html.erb into application.html.erb
Create the About Page

  • Use the ruby helper function link to.
  • Make the navbar about link work.
  • Push the updated app to Github and Heroku
Preview 02:14
About the Instructor
Daniel Kalish
4.0 Average rating
282 Reviews
30,484 Students
3 Courses
Web Developer

I’m a self-taught web developer and veterinarian. I want to use technology to make veterinary medicine more efficient.

Building something and watching it succeed is extremely gratifying. I’m here to teach you some of today’s most in demand skills. I want you to experience the joy of building something from nothing.

My background: I have been coding for 9 years. I was first motivated to learn how to program because I wanted to build a super Mario bros fan site. It was a simple static HTML and CSS website. Although that website never got traction my interest in coding did.

In high school, a friend showed me how to build dynamic websites with a PHP framework. I grew frustrated with PHP because the community was fragmented between many frameworks.
In university I saw a video where a developer makes a blog with Django, in 15 minutes. I loved the fact that Django is quick and powerful.I love Django because it has a english like syntax and a strong community of developers. After becoming comfortable developing with Django, I volunteered to build websites for friends and family. Eventually I was referred to my first paying client.