HTML/CSS Part 2: XAMPP

(Previous: HTML/CSS Part 1: Codecademy and W3schools)

xampp

Learning HTML/CSS from tutorials was a good start to get an idea of what types of things they can do, but I find I always learn more from practicing in less controlled conditions.

Enter XAMPP. With this tool, you can host your own HTML/CSS pages from your own computer, so you can see how they look. Can you hear my excitement?

Here’s why I love this:

  1. No actual risk. Hosting the pages from your computer that with the click of a button, you can put up a page, make some changes, refresh the page and see what happened, then click a button that takes the page back down. Repeat as necessary.
  2. Total freedom of experimentation. In tutorials, there are often limits to how many pages are posted, or what they are allowed to do (individually, or in combination). Not here! You can experiment with HTML, CSS, Bootstrap, Javascript, JQuery, and pretty much whatever else, as long as you know how to save the files in the right place.
  3. Limitless DIY challenges. Do you like how Pinterest’s homepage looks? How about the jumbotron display on Mint? Or the menu on Airbnb? From the privacy of your own home, you can try to get as close as possible to any and every homepage you see… creating navigation bars, buttons, and menus just like the ones you already like.

pointerPro tip: If you want to see how an element is created, you can use F12 to view the code, and the little pointer thing on the left to point to specific elements you’re curious about. Try it out!)

Are you convinced yet? If so, you probably want to know a little more about XAMPP…

For starters, you can download it here (make sure you get the right version). I’m starting to see that a lot of programming is knowing the right tools to download and how they work together.

When you’ve installed it and opened it, you’ll see a control panel kind of like this:

xamp control

When you click on the Apache Start button, that starts the local hosting. When you click Stop, it stops.

But I’m getting ahead of myself. There is one other important step that you’ll need to do first: create and save your HTML/CSS files in the right place! If you didn’t change the default settings when you installed XAMPP, that means you will probably save your practice HTML/CSS files here:

path

So open up your xampp folder, then your htdocs folder. Then create a new folder with a name you’ll remember (mine is called “PracticeWebsite”. Very creative.).

Then, inside of that folder, save everything that you want to see in your practice website as individual documents. Remember, html files end in .html, css files end in .css, javascript files end in .js, and if you want to link to any pictures, you can put those here too (they probably end in .jpg or.png). If you are creating new files in Notepad++ or another text editor, remember to always save your file as the right type.

Once you’ve saved your files, open up XAMPP and click on the Start button on the Apache line. When you see that the log says “running”, open up your web browser and type in http://localhost/PracticeWebsite (or whatever your folder is called). If you have an index.html page, it will go there first.

To access specific files from your PracticeWebsite folder, you can add them to your URL. So, for example, if you made an HTML page called “about.html”, and saved it in your PracticeWebsite folder, you would type http://localhost/PracticeWebsite/about.html (note: the .html is important! If you forget it, you won’t see your page).

If you want to see how changing your HTML or CSS code affects your webpage, try changing it, then refreshing the page to see what happens. Fun, right?

When you’re done experimenting, just hit the Stop button on the Apache line, and it will all go away. And make sure to exit from XAMPP so you don’t get errors the next time you try to run it.

Obviously, there’s a lot more to discover in the world of HTML and CSS, but playing around with them and seeing how much I could do made me interested in how to create sliding photo galleries, dropdown menus, and other more complicated pieces of a website.

I’ll talk about those more in the next post: JQuery and Javascript.

(Next: Stuck in the Middle)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s