How to add RSS to your Website

If you want to take content that is somewhere else and “embed” it into your web page you can do this with an RSS feed.
Step 1: Locate the content you want to copy.
In my case, I chose to copy from ThinkGeek.com. I then went to Google Feedburner https://feedburner.google.com and logged in with my Gmail account.  I entered the URL of the website that I wanted to copy then clicked the Next button.
Create a Feed
After you click the button – this page will load that gives you the link to the feed and feed address.
Google Feed Burner
Step 2: Generate a code snippet of the feed that you’ll later insert into your web page.
Go to this website:  http://rssfeedwidget.com/
In the first field, type the Feed Address (the 3rd box in the image above.)

create rss feed

You can then change the color of the links, background, etc. and then click the Create Widget button at the bottom of the page. On the top right side of the page you will now see what the content will look like on your web page. If you want to adjust any of the colors or change the height and/or width of the area that will display the content, do so and then click the Create Widget button again.
creating the RSS Widget

Look at the bottom right side of the page – just under the Widget Preview and you’ll see a little box of code. Place your cursor inside this box and double-click until all of the content is highlighted then right-click and choose Copy.

copy paste code

Step 3: Insert the Code Snippet of the Widget into your Web Page.

Open up any of your existing web pages (or create a new one) and inside of the body tags, place your cursor and right-click then choose Paste.
paste code into website

Save your web page and you’ll now be able to see the RSS feed in your website. Here is a screenshot of what my web page looked like:

RSS feed on website
Now you know how to add content from other websites onto your own. There are many reasons why you might want to do that but this blog post is not going to cover that topic.

Next, I will work on converting the above to a mobile phone app using PhoneGap.

Advertisements

Getting Started

checklistSo you’ve decided you want to learn to code and build your own website but not sure where to begin? Below are suggestions of the web development tools you can use to get started.

Code Snippet Playground

If you just need a place to practice your front-end code, get a free account at codepen.io. Here you can use HTML, CSS, javaScript, jQuery and set up Frameworks like Bootstrap. I like using this website because I can start working on a project from home and then continue it on my lunch break while at work or at night from any location where I have access to a computer with internet access. Personally, I use this website as my “playground” where I put snippets of code to test and then later I can go back and copy/paste that code into a different website. I also use the site a lot for taking notes from books or other training courses.

Keep in mind codepen is not the place to build a complete website. This is more of a place for you to keep your code snippets of things you are trying to figure out how to accomplish.

I actually just started using codepen a few months ago. I started out with the free version but liked it so much I went ahead and got a paid version because it has a few extra features. You can follow me on codepen here: http://codepen.io/susanwinters/collections/popular/

If you want to build a complete website then you’ll need a place to hold all of your files for your projects. I suggest naming the folder the name of your future website then add a folder for images, styles, and scripts. You’ll keep your .html files at the root level.

Desktop IDEs

Now to open and work with those files on your computer, you will need an IDE (integrated development environment). An IDE is a software that helps you create websites. There are several free ones available and you can try out several of them to see which one you like using the best. Or like me, you may prefer to use a different IDE depending on your project.

I downloaded and installed Sublime Text when I was in college because this is the program that the instructor was using and it just made it easier for me to learn if I used the same IDE as she did. Sublime is a free download and available for both Windows and Mac.

Recently I downloaded a new IDE called ATOM.   I like it so far but really haven’t had a chance to use it much.

You might also want to check out Brackets.

My all time favorite IDE is Visual Studio! But that’s because I started using it over 10 years ago so I’m just used to the environment. You used to have to pay for it and there are versions you can buy but I just stick with the free version. You can download it here: https://www.visualstudio.com/vs-2015-product-editions

Web Hosting

At some point you are going to want to place your newly created website on a web host server for the world to see. You’ll use a web hosting company for this because frankly, trying to set up a connection for the world to see files on your personal computer is time consuming, risky and downright more trouble than its worth. The cheapest place I have found for this is PlanetSMB.com They have a basic account for only $2.95/month.

FTP Program

In order to transfer the files on your computer to a folder on your web hosting account, you will need an FTP service. FTP stands for file transfer protocol. In the settings, you create a connection to the IP address of your web hosting account along with your username and password (provided to you by your web hosting company once you set up an account) then click the connect button. My favorite FTP program is Filezilla and you can download it for free.

Client Side Code vs. Server Side Code

When you are first starting out, its best to just learn HTML first, CSS second and javaScript and/or jQuery third. You’ll probably find that HTML and CSS are pretty easy to learn. I admit javaScript is a little bit harder and will take you twice as long to learn. But you don’t have to learn all of it before you get started! Just start with getting down the basics of what you need to build a web page. You can always go back later and add animations and things like that later. Once you learn HTML, you can build a website. But to make it pretty by setting the font styles and colors you will learn CSS.

“Client Side” means that the browser (IE, Chrome, Firefox, Safari, etc) will interpret the code to something the end user can view. If you want to be a “Front-End Developer”, you will just focus on HTML, CSS and javaScript. If you want to be a programming language (java, PHP, C#, etc.) you’ll do this after first becoming a Front End Developer. Once you know how to run the front and the back, your job title will probably be “Full Stack Developer”. In order for the back end server code to run, you’ll obviously need to place your code on a web hosting server in order to test it – unless you want to set up a server environment on your computer. That’s a little advanced for a beginner so I don’t recommend you take that route until you’ve been a Front End Developer for at least a year. Just save yourself the frustration and just concentrate on getting good at writing HTML, CSS and javaScript.

There are a ton of things you could learn but you don’t have to learn them all right now! There are several places you can get free or cheap training and I’ll write about that in another post. The purpose of this post was just to provide links to the most common tools used to get started in web development. Good luck on your journey.