So you wanna build a website…

You’ve conquered the basics of Ruby and you’re ready to move onto the next challenge. Building a fully-functioning website. It may seem like a stretch but you have very tool you need to begin building web applications. Ruby On Rails is your new best friend and while it is a complex system, it will undoubtedly click for you in no time. You are, after all, a Ruby Black Belt at this point.

Photo by Thao Le Hoang on Unsplash

Ruby On Rails

By now you’ve undoubtedly heard about Ruby On Rails, how powerful it is and how it can help build dynamic web applications. In fact, some of your favorite websites may be running on a RoR backend. And now you’re about to begin using the Rails Framework! How exciting!

Photo by ThisisEngineering RAEng on Unsplash

Rails new, Rails who?

Running “rails new” for the first time is definitely overwhelming. Watching all of these files be built and all of these processes run for you just by typing two words! It’s really a site to be seen (see what i did there?). Rails builds out an entire application for you so you can get started by just typing a few lines of code and you’ll see it right there in the browser. To view your progress towards website mastery in the browser you can run “rails s” or “rails server” and it will start up a local server on your machine! Wow! You have a website with just a line or two of code and while it isn’t much just yet, it is certainly, technically, a web application! Congratulations on taking your next big step into becoming a web application expert! Or software engineer, whatever, same difference..

Embedding those Rubies

So far all you’ve learned in your programming journey is code and now you’re being tasked with building a website and it may seem like all you’ve learned thus far is useless as you can’t really use Ruby to write a website.. but ahh. You can! Embedded Ruby exists to help us write HTML with the help of Ruby. We can write a line of code we’re ace keen at in Ruby and it will give us some of the information we need to print to the screen through HTML. Need to iterate through an array and puts specific items? No problem, write your ruby code and wrap it in ERB tags (<% %> or <%=%>). You can combine this with HTML tags to take your website to an even higher level.

Serving Style

You’ve got a working website, it may seem basic right now but we’re about to bring you into the gorgeous world of CSS. CSS is a stylistic companion to HTML and it can take websites from bland to beautiful. CSS can be placed in a few locations throughout your application, it can be placed inline, internally or externally. Externally is the most popular and for good reason! External Stylesheets are way easier to read, when you open it, its clear and readable what you are looking at, you are seeing pure CSS, no HTML, no embedded Ruby used to create HTML code. This can help make changes so much easier by having all of your CSS in one place. You can also use naming devices called class and id to declare what HTML you’re targeting with your CSS. The class selector is used when you are targeting multiple items throughout your document with the same type of CSS. The id selector is used when you want to target one specific element with some CSS and this selector is the most specific, meaning that is an element has both a class and an id selector, the id selectors styling will take precedence over the class selector or the tag name.

Photo by freestocks on Unsplash

Put a bow on it

You’ve written your code, HTML, CSS and Ruby and you have a website that looks pretty darn good! The websites you build with these tools will only continue to grow in power and beauty, truly making you into a web application master. Basically our entire world today runs through the internet, its where we spend most of our time so making it both beautiful and simple and easy to use is essential and that is up to software engineers to make our web as easy to use and as beautiful as possible. So keep building those sites and let’s continue to make the web more and more beautiful!

Software Engineering Student at Flatiron School

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store