Step One: Learn how to code.
I'm going to be painfully honest here: prior to this project, I had never used HTML before. Never. Not once in my life. Not even a little. It's one of those things that would have been useful that I just never did. Thankfully, it's 2014 and the internet flourishes. I tried out a couple of different online tutorials, and by far the best one was the Codecademy: Make a Website tutorial, covering HTML and CSS. It's straightforward, it's fast (I did an hour here and there over a week and finished easily), and it's what I needed to know.
Even later, when I actually started coding, I could check the Codeacademy HTML and CSS glossaries, which made for handy cheat sheets, and had everything covered in the course, and more.
A word of warning though: The website recommends the javascript-based "Build an Interactive Website" tutorial immediately after the one I took. For that tutorial, you really do need to have a decent understanding of Javascript before you take the plunge. I left it pretty thoroughly confused after the first few problems. I started the Javascript tutorial a few days ago, and it's pretty basic stuff, but I'm hoping when I finish I can take another stab at it.
Step Two: Get a good editor to work in.
For most of my day-to-day programming, I use Textmate. But I got a good recommendation from a friend as far as a good Wed-Design specific text editor: Brackets.
And I have to agree: Brackets is the best.
There are two things that make Brackets really useful:
One, it keeps all your files organized in the sidebar, where they're easily accessible without making you go dig through folders and directories. All of them. Pictures, HTML, CSS, add-on libraries. I'm not very organized on my own, so this was a LIFE CHANGING revelation, and the second most useful thing about the program.
Two, it comes with a way of previewing your website live as you make changes. It comes with the download, and you need Google Chrome to use it. But there was nothing better than being able to tap away on my keyboard and see the elements of the website come to life in front of me. It's not always perfect. I usually had to reload the page on chrome after any big changes. But it was helpful both in designing the page and understanding the code I was designing with.
Step Three: Start Designing!
I'm working specifically on the Portfolio website right now. I have a plan drawn out (which I'll upload once I redraw on something that isn't my English HW). Once I figured out how everything fit together , it was really fun to manipulate. I used Bootstrap to make the designing a little easier, which was super handy, and there's a lot of support out there for it. This was what I had at the end of the day:
The idea is to have each project organized on the timeline from most to least recent. Each one will be contained in a box with it's title, a short description, a picture, and a link to a page with more information. What's here isn't quite right either - I want the red timeline thinner, but that's a challenge for another day.
I think I want to try and use Rails to make adding and updating projects easier. I tried the Rails for Zombies tutorial a few months ago, but I never felt really comfortable with the material. I guess it's time to retry, maybe with the Codecademy tutorial as well? I figure that will be useful for a blog design too! At least I don't need anything solid to turn in until April.
So that's my Thanksgiving break plan. I'll also be working on my Makerspace plans (Look for a post! I promise!), school work (bleck), and an interesting proposal I got from my Tech Director about using robots to move set pieces for this year's musical (More on that later, I hope). Not much of a break, but I'm just happy to have a few days I don't have to get up at 7 am if I don't want to. How about you guys? What are your plans?
No comments:
Post a Comment