6 Lessons I Learned Building My First Website

You could say I was extremely over-confident.
But I wanted to put theory into practice.
I’d done many, many coding exercises and messed around with Dreamweaver til my eyes hurt.
I’d done pretend web pages for pretend businesses in simulated environments.
I was ready to plunge head first into my first portfolio project.

So I did.
And it was hard.

This is what I learned.

1. Make Regular Checks For Updates To Programming Languages, Software And Anything You Use For Development

Having done a lot of tutorials on the Bootstrap framework, I felt pretty sure of myself when I chose to use the framework for the site.
After all, all the documentation is available online and Dreamweaver allows you to select the framework with everything you need when you start a new HTML document.
Easy peasy.
So far. so good. I was happy with how the development was coming along.
Then one day I logged in and everything was wrong.
The menu seemed to have moved. The alignment was unaligned. The carousel was not going round. There were a lot of niggly little bugs that were not there yesterday.

What had I broken?
What I pressed?

 

 

I spent hours and hours poring over line after line of HTML and then CSS.

Nothing I did fixed the problem.

I emailed Adobe about Dreamweaver. I tried to contact the Bootstrap Developers. Stack Overflow provided little help.
In the end I hired some outside help and the problem was suddenly glaringly obvious.
I had been developing  the site with an old version of Bootstrap.
All that was required was a freshly downloaded up-to-date version to be installed and implemented were needed.  Then everything was working again.

I felt very foolish to have overlooked this. Of course new updates are brought out. Of course.
But at no stage had I actually been provided with this information, so how would I know?

The Lesson?

Make regular checks for updates to software and programming languages and development tools. Most things are completely downloadable.
Working with the latest version of whatever you need is imperative.
Do not rely on Dreamweaver, or whatever you use, to automatically implement these changes for your convenience.
Bootstrap, JQuery, Javascript etc. are all developed by different companies and it is up to you to ensure you’re on top the latest developments.

This was also a lesson in trusting my own code.
My immediate thought? I’ve broken it.
My actual code was totally workable, and I struggled to find a bug because there wasn’t really one.

This was a very positive learning experience for me, and while it might be seen as a rookie error I’m glad it’s an error I made.


2. Forms Are Not As Simple To Make As They Might Appear To Be

What I’d imagined to be a very straightforward bit of code for the Contact page turned into a huge head-scratcher.
I’d done a lot tutorials on the form element.
Always have an action attribute.
Is the input type appropriate for the information required? Are the form controls labelled correctly?

I could do this.

I did the markup and styled it with CSS.
Then it occurred to me. I had absolutely zero clues about how the submitted message was actually going to get submitted to where I wanted it go.

This part seemed to have been omitted from any exercises I’d done about Forms. There had been little sentences here or there about ‘the server processes the information’, ‘information may be stored in a database’ and ‘the server creates a new page to send back to the browser’ but no actual instruction how to do this.

Massive Information Gap.

I had designed and built a lovely form that was now totally redundant.

I needed a server-side scripting language for this job, only I had no idea which one or how.

 

Up until this point, the only thing I knew about PHP was that in my old job we sometimes recruited PHP developers and that a lot of our database pages ended in .php instead of .html.

Basically, I lacked the important knowledge needed to complete the form.
One option was to use an online form building such as Jotform.   And I tried several similar options but unless the client was willing to pay a premium (they didn’t have the budget) then I couldn’t produce a form that aesthetically fitted with the rest of the site.

That left option B.

Omit the form from the site for now. Which is what I did. Contact details are all there, but no form. I am not exactly over the moon about this but it was all I could do for now.

The Lesson?

Make sure I am actually able to follow through on what I’ve agreed to do before I start developing it.
I need to thoroughly check through what code is involved in any functionality before I plough on

I don’t take full responsibility for this lack of knowledge though. It should have been covered in my (paid-for) tutorials. There is literally no point in teaching your (paying) students about the form element if you leave out the very vital part at the end.

That particular contact form has now become a project all on it’s own and I am determined to be able to do it.
I’d love some more answers though – how do other web developers learn to implement the form element? PHP is seen as ‘back-end’ and web design is generally front-end. Where do they crossover? Do I need to work on becoming full-stack?
Any advice is much appreciated.


3. WordPress Blog Integration Does’t Just Happen At The Click Of A Button

More over-confidence, paired with a whole heap of ignorance.
In my head, it would be simple to integrate an existing WordPress blog into a newly developed site.
To my discredit again, I didn’t actually bother to research what would be involved at all.
I just made a massive assumption that it would be no problem.

I was wrong.

I found out there were 3 possible ways to do it.

1. The RSS method.
Great, and extremely simple. But the styling is not consistent with the rest of your website.
I tried bodging some CSS to style it up but it was quite clear that this was not going to cut it.

2. The Embed With An Iframe Method.
I honestly thought that this was going to be the answer.
It’s a pretty good hack to be honest. I implemented the code and it looked really quite good, after the blog had received it’s redesign with the new
company branding.
But further research showed me that displaying the blog in this format was terrible for SEO. It creates a content black hole.
And since blogs are created for content production and optimising SEO, the iframe element was basically going to render the blog unfit for purpose.

3. The Full WordPress Integration Method.
Definitely the most technologically-sound method. The Right Way.
Also: The Hard Way.

It sounded relatively simple to start with.
Downloading and installing WordPress itself into a sub-directory folder was not an issue.
It was also perfectly easy to copy and paste code snippets to transform the page to display the posts.
But I needed the blog to look like the rest of site.
Again more options!
Either make my own WordPress theme, or hack an existing theme via Dreamweaver.

 

Time was most definitely not on my side by now, and both options were going to be pretty time-consuming as well as looking like they were both beyond my current capabilities.
The solution we eventually settled on was to create a Blog page and link to each blog post on a separate WordPress site, rather than settle for the less effective options.
I’m happy with how the page looks, but this is not the ideal end result.
Full blog integration is now a separate project for the site, one which I am going to enjoy getting stuck into.

The Lesson?

AGAIN, check what is involved in a project before throwing myself in head first.
Make absolutely no assumptions about anything when it comes to web development.
Some things are ten times easier than you’d imagined.
Other things are deceptively difficult.


4. Find Working Solutions For Project Elements Before You Begin The Project

I already knew that I was going to use Lightboxes to display the showcase images on the Portfolio pages of the website.
It was clearly the obvious choice. I was keen to get started.
What I hadn’t envisioned was that it was going involve using Javascript.
At this point, I had completed only very rudimentary Javascript exercises. HTML and CSS now seemed remarkably uncomplicated by comparison.
Algebra, Functions and Logic were things I had not given a second thought since my Maths G.C.S.E. and now here they were, demanding I get to grips with them.
I was not deterred. I could see how Javascript fitted in, even if I didn’t fully understand how to use it yet. Programming seems to involve quite a lot of that.

I quickly found out that the code I planned to use to develop the Lightbox wasn’t going to work for me. I could make it work for one singular Lightbox, but not multiple.
No problem, I thought.
There are lots of other tutorials, step-by-step guides and code templates out there.

Here are some of the solutions I tried:

It was a struggle. I really COULD NOT get them to work. Some would partially function. Some I couldn’t get working at all.
I don’t blame the code, I blame the inexperienced coder.

Eventually, I had a breakthrough.
The Lightbox by Lokesh Dhakar was my saviour.
The project was running short on time and I was on the verge of calling in the professionals but I managed to get working Lightboxes across the Portfolio pages.
I still feel a huge sense of accomplishment about this. It’s very hard not to let the self-doubt chip away at your determination to understand something difficult.
You have to silence those little voices and power through.

The Lesson?

ALWAYS try to have workable external solutions to website features before commencing a new development.
This was such a time-waster of mistake for me.
I definitely spent waaaaaay more time researching and trying out any plugins or templates than actually implementing anything.
On the plus side, I know what to do in future.
I have a solution that works, even if it took hours and hours to find.


5. Do Not Underestimate The Importance Of A Local Server

Up until this point, servers were not something I had really any experience of.
They seemed like mysterious omnipotent entities that would either  unexpectedly break down or require complex updates.
In my last workplace, the local servers lived in a locked, air-conditioned greenhouse in the corner of the office and the remote servers were, well, remote.

In any case, I didn’t think I was going to have to worry about servers until the time came to actually launch the website.
And to further highlight my ignorance, it was only after installing WordPress that I discovered just how vital a local server is.
PHP, MySQL and any server side languages won’t work without one.

Thankfully, MAMP is fantasically simple to install and run.
And actually, this all helped further my understanding of the internet and what programming languages fit where and to my satisfaction, it made the whole testing and debugging stage far, far easier.

 

The Lesson?

Bascially, I do not know anywhere near enough about servers.
And knowing about servers is going to be an absolute necessity if I’m going to make it as a web developer.
More tutorials and a lot more reading and experimenting is on my radar.
I’m really glad that HowStuffWorks  exists to help fill in my knowledge in the mean time.


6. Transferring Website Hosting Is A Bit Confusing

Despite neglecting to plan for a lot of things during this project, I actually knew I was going to be doing this and how it was going to happen.
But it was still a bit mind-boggling for me. At one stage I had to use props to work through the process with tangible objects.
The development project was a managed WordPress.com site. With a bespoke development, it was no longer going to be a suitable host.
In short, the domain was pointed at WordPress.com and I needed to point it somewhere else.

It was a simple process.

I unlocked the domain name with your current registrar and got an authorisation code ready for transfer.

Next step was to purchase a Domain Name Transfer from GoDaddy, where the new site was to be hosted. So I unlocked the domain, entered the code and waited. It could take 7-10 days to complete.

When I did check back, things were not as they were supposed to be.
The problem?
I was having DNS (Domain Name Server) issues.
Completely unknown territory for me, something the I.T. Big Guns used to handle in my last workplace.
After the initial panic I took a step back and read through everything I needed to know.
I managed to diagnose and fix the problem myself.

This whole process deserves a whole post all on it’s own, but it all came down to the DNS Zone files.
The and NS records were somewhat jumbled between WordPress, GoDaddy and where the Domain Name was originally registered. This stalled propagation and confused the hosts, so to speak.
This point was were the props came into use as I navigated new terminology and mechanisms that I couldn’t actually see or touch.
I will definitely use props again.

The Lesson?

To have confidence in my abilities!
The genuine shock I felt over solving my DNS issues, really shouldn’t be a shock at all.
It was only the fact that it was a technical problem and I’m still fighting those demons that tell me I’m not technical.
This proved that I am.

Summing Up

I am so glad I decided to just do it.
The first website development was total baptism of fire.  But also like giving the finger to those past experiences that stunted my creativity and growth.

All  my mistakes have been excellent learning experiences.
I think I made waaaay more progress by just doing it myself and not having my metaphorical hand held through each phase.
Hindsight is already making wince at some of the code I’ve written but it works and that’s the whole point.
Concise code will come in time.

Making note of all the gaps in my knowledge has provided me with plenty of things to get stuck into and learn.

One of the most challenging things I’ve ever done.
100% worth every minute.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *