When you code your own website, it can be very rewarding. It allows for more customization and for you to be in more control of the website. Now, this does not come as easy as drag-and-drop websites but will create a more professional and customized website as your skills grow. Whether it is for fun or professional, coding a website is a skill that can be very rewarding. It can also pay very well if you are interested in going that route.
Unfortunately, this part of the development can be often overlooked. But it is important to make sure your website is built to its full potential through proper planning before coding a website. If you are doing client work, this stage is even more important, as it can save you from a lot of headaches down the road. Before you go to code or design your website, all the planning should be done. This way, you will have a clear-cut picture of what you need to do.
Having a clear goal of the website, before coding, will significantly improve the design and functionality of your website. Without a clear goal, many websites are missing direction and intuition for the user. Figuring out what the intended user is going to your website for, is key to developing your goal.
If I create a website centered on photography, I will make it as easy as possible for the user to navigate to the information centered on photography. I might have subsections of editing photos, and maybe even a spot to sell lightroom presets, etc. Knowing the goal of the website is photography and the user is there for my information, I would never steer away from this information talking about something else; because this is not what the user came to the site for.
Content is key to any website. Without content, a website really is just blank space on the internet. Today, websites are image-heavy and videos are a great asset as well! Text content is important, but should be limited and is better off being created graphically. Most people will read a few sentences, but if a site becomes too wordy; it will lose a lot of engagement. Gathering content now will make the design process a lot smoother.
Mapping out what features the website will need, will make your design process easier. Will they be using carousels, sliders, contact forms, e-commerce, testimonials, etc. You get the idea. Figure out what the client or your specific needs will be. This way you can design with features and content in mind to keep it in focus.
A site map is used for Google and other search bots to navigate your site. This is mostly for SEO, but larger sites have a use for them. For a site that is so large that normal means of navigation does not cover all the pages; it may need a site map. This is usually put in the footer and is more or less a links page that
To visually give you an idea of a site map this is it!
They are a top-down method that leads to all of your pages. In the real world, this can vary on how you display it. A good example of one could be Apple’s site map. You could theoretically do this yourself and create one. But most people use plugins such as Yoast or go to generators such as this.
Now that we have thoroughly planned out your website, how do we start the design process? The design process really depends on your personal needs and if you are working with a client.
If I am building a small website for just general practice, I might do a quick planning process and follow up with very generic designs to get an idea of what I will code.
If I am building this for a client, I will go more detailed into the process depending on their needs of the website. Whereas, if it is a very large website, and the client is specific on how they want the site to look, it might be best to build out some templates with Indesign, Sketch, Photoshop, or your design tool of choice. Presenting designs before the development will decrease the amount of back-and-forth changes to the website so your code will be cleaner. The less code the better, as there is less room for error and problems; and if changes need to be made and your code is dynamic (more on this later) you only have to change it in one spot.
While your solution may not need complete wireframes, a good example of a design process to send your client would be this below!
As you can see, it covers a lot of elements such as cards, login screen, reviews, and a general overall look at how the information would be displayed on the website. It gives the client a chance to look and see what they like. Changing colors, layout, images, and major changes such as structure here is a lot easier in the design process and can be noted for when you go on to actual development. If done properly, and with a bit of luck, when you are getting feedback on the website it should just be specifics and minor tweaks.
Depending on the design process, some people/companies will use InVision or similar software. A similar free version of this is Figma, but I do not have as much experience with it. They allow you to design and create a mockup of the website and allow for comments to be made from the client.
My personal take on design and what you should do comes down to this:
HTML is a markup language. This is because it creates the content of the website. For example, this paragraph I am writing would be considered basic markup for a paragraph, and the title above it would be a heading. When you see images, videos, text, and other forms of content on a website, HTML is what puts it on the screen.
Breaking down this very basic example of HTML:
This declares that the document you are coding in is HTML.
These are the opening and ending brackets for html that allow you to put in mark up. And the lang=”en”‘ signifies that the document is going to be written in English.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title>
We won’t go super into specifics, but just know UTF-8 is letting us use the most common characters involved in the English language, the viewport is the screen the user will see your content on, the scale is being set to “normal 1x”. Our <title>Document</title> puts the name of tab people will see when they are on this page. For example, in your web browser for this article, you will see “How to Code Your Own Website”. That is what the title tags “<title>This is the document name</title>” are for.
<h1>This is a Title</h1>
<p>This is a paragraph.</p>
Finally, where actual content comes in. The body tags, “<body></body>”, are where the main content of your HTML code for your website will be held. In the example, we have basic Heading 1 and paragraph tags; respectively “<h1>This is a Title</h1>” & “<p>This is a paragraph.</p>”. When the code is ran, we come up with:
Now if only web development was this simple, and we called it a day. But there is significantly more to web development when coding your own site that goes into this than shown in this example.
This is where we can style and customize your website. With CSS it turns your plain boring markup of just a title and paragraph into something more. CSS gets trickier than HTML, but should not be something that is intimidating. Personally, when I started learning CSS, this is the part where I started to get excited about web development and coding my own websites. This is where, when coding your own website, it feels you are making progress.
For this blog, we are not going to deep dive into CSS. When taking web development step by step it becomes an easier process. The biggest thing to remember is, 99% of the time, any problem you are running into can be found online. It just takes proper searching. Coding a website can be simple if you break it down step by step.
With basic CSS for a website, connecting your CSS to your HTML is as simple as creating a stylesheet file called “style.css” and adding this <link> code to your header section. The “rel” is letting the HTML know it is a stylesheet, the “type” tells the document it will be a text-based CSS document, and the “href” is the location of where the file is. Since everything is in the same folder, nothing more than “style.css” is needed in this case.
Now when you hear WordPress, many people think themes and drag-and-drop websites. Which, yes there are so many options for that, but we are not interested in that here. Building a custom theme would be the goal for a web developer. This, in WordPress’s case, requires the knowledge and use of some PHP. We won’t go into that here, but keep this in mind for your web development journey.
As of right now, other popular CMSs include; Joomla, Drupal, CodeIgnitor, Shopify, & many others. There are a lot of options for CMSs but which one you use will depend on the needs for the website. For example, Shopify is purely for e-commerce websites, while code ignitor might be a better option for company that doesn’t plan on updating their content themselves. Do your research, but I recommend learning WordPress first as a good starting point. So many websites run off of it, and PHP is a good language to get your feet wet in back end development.
The domain name of a website is fairly important. It should be something that isn’t too long that people forget it. It also shouldn’t be something that is so hard to spell that people can’t get there. When creating a website domain, keep these in mind.
Personally, I have used namecheap for all of my sites and have loved it! It typically has the cheapest intro offer for the first years of your website. I have also had no issues with them, so I love recommending them! But there are so many options out there for domain purchasing.
Those are just a few, but do your research and find what works best for you.
Recently I have fallen in love with cloudways (big scary affiliate link) for all of my hosting needs. They handle a lot of the server-side of web development that makes it significantly easier for you to get websites up. They work especially well for WordPress based websites but also work for a lot of options. Cloudways has options for custom PHP applications, Laravel, Magento, Drupal, OpenCart, PrestaShop, & Joomla!
When creating a server you get loads of options such as:
So you kind of get the best of everything when you do cloudways, as you get to choose multiple options of where you want to host your website! Pricing typically varies, but I usually stick to DigitalOcean around $10-12/mth+/server depending on traffic.
If you ever had any server related questions, the server is super quick and helpful at any time of day. They have a live chat option where you can talk to someone right away!
But there are many other options available, so figure out your needs.
Other hosting options include:
Definitely do your research and find what works best for you!
Accessibility is becoming increasingly important as technology advances. Unfortunately, this gets ignored. Technologies, such as screen readers, are used to access websites for those who are visually impaired. They use your alt tags and various accessibility features in HTML to communicate with the user. Keep this in mind while during your web development, as you should try to keep it as clean and accessible friendly as possible!
Other than it being the right thing to do, there are other reasons to implement accessibility into your site. It will help your efforts with SEO. Following the guidelines for accessibility will typically have small SEO boosts. It will also prevent you from potential lawsuits. It can be expensive, many companies have been recently sued for not following these guidelines. When coding your website, you have a responsibility to make it accessible to everyone.m
For more information about accessibility and how you can properly set it up, check out its official toolkits and guidelines here. It is a very important process within web development that is highly overlooked.
SEO is search engine optimization. When coding your website, yes you should. Optimizing and getting your page to rank in search engines is important to bringing traffic to your site. If you are using WordPress, nothing is more simple than using Yoast. But if you aren’t the main thing is to be mindful of your meta tags, titles, and keywords & phrases. Obviously, there is a lot more to this than just those things, but I will explain this more at a later date. For now, I highly recommend you check out Neil Patel, I will link his tool Ubersuggest as well for free keyword research.
At its core, there are only three types of websites: e-commerce, entertainment, information. In all cases, these have different needs for SEO. An e-commerce website will need to be optimized for its niche and products. While, an entertainment website will need to be optimized for its services/information. Similarly, an information website will need to rank for the, ideally niched, information it writes about.
Generally yes, but there are cases where SEO might not be the right solution. If your company has a product or service that people are not searching for or know of, it will be a waste. A product could be groundbreaking and change lives, but if people are not aware of it and are not searching; it will be all for naught. I would recommend an awareness campaign for this situation. Compared to an awareness campaign, spending money on SEO would be a waste.
Event based websites will struggle to handle results from SEO as well. By the time it is properly indexed and getting traffic, the event will probably be over.
While in both cases here, SEO would be useful in the long run, it does not provide the short turn return an awareness campaign would. This is where social media and other useful tactics would come into play. The main thing to know here is that SEO does not provide quick results or short-term returns. It is a game for the long haul that will pay off after indexing. So you have to figure out if people are searching for your niche through keyword research. From there, you can decide on which path you should take.
If you are interested in more about web development and my journey, check out my story here!