Don’t come to me with your questions about coding. I’m not your guy. My knowledge is limited.
But, my limited knowledge is what I hope makes this blog valuable.
Last month, I sat down and began building a website. I had never coded a website before, but in one weekend, I began abandoning the controlled design environments of Wix or SquareSpace and became exposed to the chaos and freedom of coding.
Here’s a look at what I did, step by step.
Find a good tutorial
I had been fooling around on tutorials for a month before I started building. The most helpful site, I think, was Codecademy. The website lets users jump back and forth between lessons, saves users’ progress and has an index they can reference. It’s super helpful.
Though I had spent a month on it, it did not have to take that long. It is not a time eater.
Sketch
I sketch everything out before I begin executing. It allows me to gain an understanding of possible steps and foresee potential problems.
So it embarrasses me to say I did not sketch before building the site. I was in class at the time, and I didn’t want to be rude to the professor! Don’t give me that look.
But I should have.
Just start writing
Open up a text editor and start spitting out beautiful lines of code. I just used my laptop’s TextEdit. To preview, I used cssdesk.com.
I began with the HTML. I asked myself, what’s at the top of the page? The menu. What’s in it? Links.
<div>
<div class=”navlinks”><a href=’#home’>Home</a></div>
<div class=”navlinks”><a href=’#designer’>Designer</a></div>
<div class=”navlinks”><a href=’#leader’>Leader</a></div>
<div class=”navlinks”><a href=’#contact’>Contact</a></div>
<div class=”navlinks”><a href=’http://adambaumgartner.weebly.com/uploads/9/8/9/0/9890545/baumgartnerresume.pdf’>Resume</a>
</div>
</div>
Then, I styled it with CSS.
I asked, what should the menu look like? What color? White. Is it stuck to the top of the page, or does it scroll with you? It scrolls.
.nav {
background-color:#ffffff;
text-align:center;
position:fixed;
width:100%;
top:0px;
left:0px;
box-shadow: 1px 2px 3px 0px #5E5E5E;
}
By breaking it down like this, piece by piece, I think the whole project became far more digestible.
I did some pretty wonky things. I think that’s visible even in the snippets of code above. I wasn’t using a road map, though. I had no pre-established model, I was making it up as I went, problem solving my way into creating what looked like a website.
I think that was the fun of it.
Now that it’s all over, I can say I would definitely do parts differently in the future. But we can get to that later.
Also, I will never use TextEdit again. It’s not intuitive when it comes to coding. It’s really not built for that purpose. I’ve heard good things about Sublime Text and Aptana Studio. I will be using one of these for my next project.
Publish
I had no idea what to do at this point. I had a .html and a .css file and no idea how to make them into a website.
So I phoned a friend. Andy Rossback is my buddy at the University of Oregon. He was formerly editor-in-chief of the Daily Emerald. In his free time, he creates things and helps me.
After making fun of me for a while, Rossback explained GitHub to me. And then I had a website.
Here’s what I did:
• Got a GitHub account
• Created a repository called adbaum.github.io
• Created a file, copy and pasted my HTML into it, and titled it index.html
• Did the same with my CSS, calling it stylesheet.css
• Made another file called CNAME and wrote only my desired URL in it
• On GoDaddy, I went to my administrative tab and copy and pasted 204.232.175.78 for the A record of my URL.
Boom. Website. Thanks, Andy.
Get feedback
Feedback is just always a good thing. I wanted to know if my website was functional. I wanted to know if it was working correctly for everyone. So I took to Twitter.
I got some really good tips. The most helpful advice, though, probably came from Kyle Ellis. He told me to always design for mobile first, then build up.
With his advice and that of others, I was able to make my website cleaner and more user friendly.
What I would do differently
This is not the last website I will build. As a matter of fact, I have a few friends asking me to build their portfolios for them. Cha-ching.
Moving forward, I will definitely design responsively from the getgo instead of trying to incorporate responsiveness later. I think it will be cleaner and more cohesive.
I would also do things to keep my code tidier. More classes and IDs means more code, and I think I have a lot of redundancies in mine.
In the near future, too, I plan to introduce a lightbox feature to view images after clicking them, instead of leading to a separate page. I refuse to do this, though, until I can write the code for it myself …
Problems I encountered
• When scaling from desktop to mobile, the menu initially stacked and took up half the mobile screen. To fix this, I had to copy, paste and customize some JavaScript. Proudly, I can say it’s the only bit of code I copy and pasted. Now, the menu bar collapses and is generally more functional.
• A younger, adorable me uploaded images at 300 ppi about a year ago. I was using these on my website initially. I fixed that quickly, after realizing how slow the load times were.
• A bunch of things I don’t need to bore you with.
So that’s it. That’s how I made a website. It took a total of three days split between homework and socializing. Not too shabby!
Coding can be intimidating, but it doesn’t have to be. Learn it piece by piece. Build it piece by piece. If you want to do something, but you don’t know how, cheat it.
It’s just that easy.
Here’s a look at the finished product!
(Adam Baumgartner is a student at Ball State University and editor in chief of the Ball State Daily News.)