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.
4.7 (7 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.
1,434 students enrolled
Free
Start Learning Now
  • Lectures 27
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2016 English

Course Description

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!

What are the requirements?

  • No Previous Programming Experience Required.
  • Any Computer Can Be Used.

What am I going to get from this course?

  • 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.

What is the target audience?

  • Web Development Beginners
  • Entrepreneurs
  • Front-end developers
  • Designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: HTML and CSS Fundamentals
02:16
  • Project Overview.
  • The Difference Between Frontend and Backend Web Development.
  • How to Install the Text Editor Sublime Text.
02:33
  • 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.
02:36
  • 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.
03:44
  • 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.
03:20
  • 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.
Section 2: Make Your First Homepage
01:58
  • Make a new sublime text project.
  • Opening and closing HTML tags explained.
04:19
  • 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.
02:15
  • 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.
03:28
  • Use CSS to add a background image.
  • Hexadecimal colour system explained.
03:14
  • 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.
01:55
  • Learn how to embed a youtube video into your homepage.
  • Learn about online resources that could help you fix coding errors.
02:17
  • Learn how to center different HTML Elements like text and div.
  • Learn how to add a Facebook like button to your homepage.
02:49
  • 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.
02:29
  • Apply CSS to visualize the header, main, footer, and container divs.
  • Centre the content on the homepage.
  • Add a sidebar.
03:23
  • 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.
02:46
  • 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.
Section 3: Learn Ruby on Rails: Create and Launch a Responsive Blog
01:53
  • 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.
02:42
  • 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.
04:39
  • 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.
05:41
  • 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.
02:11
  • 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.
Section 4: Add Twitter Bootstrap
02:07
  • 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.
02:08
  • 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.
01:56
  • Make the homepage look more like the design.
  • Add more CSS.
  • Commit the code changes to Git.
02:26
  • Add Bootstrap’s javascript.
  • Update the layout of home.html.erb.
  • Push the updated app to Github and Heroku.
03:40
  • 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
02:14
  • Use the ruby helper function link to.
  • Make the navbar about link work.
  • Push the updated app to Github and Heroku

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniel Kalish, 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.

Ready to start learning?
Start Learning Now