(Previous: HTML/CSS Part 1: Codecademy and W3schools)
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:
- 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.
- 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.
Pro 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:
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:
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.).
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.
(Next: Stuck in the Middle)