“I learned how to design and launched a website in one day”, said no one ever. We will go over the four essentials that are needed to start web designing. Now, remember, these are the necessities required even to begin. Sure, other things could be added to make life easier, but this is to guide those that want to get started, and all for the low low price of free. Some elements will require additional research and some won't require any.
However, I can promise you this, once you finish this series you will be able to build your own site.
So, you’re going to need to learn code (that should be obvious). Many resources that are free, and in fact, you can get started learning this for absolutely nothing, the only thing it will cost you is time.
Are there ways to build a website without any coding whatsoever? There sure are! There’s, Wix, WordPress, Squarespace, and so on. You should investigate the pros and cons of using a website builder before you throw your hands up with a grin on your face and yell “Victory!”
For web design, we’re talking very basic here, and not those fancy color changing buttons you’ve been dreaming of creating when you press them. You’re going to need to know HTML and CSS.
Now when we say ‘HTML’ and ‘CSS’ we’re referring to the general languages, and not the different versions of each, but these are the two main, and basic languages you will need to know how to navigate even to make your website display ‘Hello World’, inside joke, you’ll get it later.
There are a TON of resources that you can use to learn these two languages. One of the best resources, especially just starting, is W3schools. This nifty little site can give you a ton of information and even provides you with a ‘Try it Yourself’ where you can see the code and work with it in a web-based IDE (integrated development environment). W3schools tells you what it does then you can make changes to the code to see how things operate and affect each other. Being able to see and understand how things work is imperative.
This one website can give you a pretty good idea of what you can expect, and whether coding will be for you.
If you need a website like…yesterday…this is not the path for you. Because when you start learning one thing, you’ll find out “oh I can't do that one thing until I learn this other thing. Shucks. (prepare for another two months of learning). Coding, in general, is a nonstop-constant environment of learning.
Let’s face it; you must decide what is most important to you. Time or money.
Time: If you just got back from a party telling everyone that you’ll build them a website tomorrow, and you got no experience you might want to tell them you’re going over to Fiji to do some philanthropic work for the next year or something (feel free to use that one), because you’re not even going to be able to build the most elementary looking website with no previous experience in a day.
Now if you sit at home all day seeing how many Frito chips you can throw into that empty Pringles can on your floor and don’t foresee this routine ending any time soon, you got plenty of time.
Our basic philosophy, and it seems simple to us, is that if your business is selling handmade wooden coasters (or whatever) why the heck would you spend any amount of time not focusing directly on your business. If learning to code is something you don’t want to do, and it’s taking up time you could be spending on creating a marketing strategy, creating a logo, putting your business plan together, designing your color palette or countless other tasks you must complete. You are wasting your time. You need to spend as little time learning to build technical aspects that require expertise that you don't have as possible, and this is especially true if your website isn’t going to need constant reinvention. Time is the most valuable commodity we have because it can never be replaced or bought.
So, keep that in mind.
Money: If you're drop dead broke well then it looks like we got no choice, now do we? So let's get to the learning and whip out that fancy new notebook!
If you’re sitting on a bundle of cash but are going to spend the next year to learn how to make a site that doesn’t look like complete trash,make sure that you have purposely aligned your priorities that way.
Think about how much time it is going to take you, and then double it. Yes, even you, you genius. 😊
An IDE is the software that is used to take your code from letters into what you’re building it to do. IDE’s can be as complex or as simple as you want and range from a simple notepad to ones that allow you to collaborate with other developers and allow you to use a range of different programming languages. Some are free and some, such as Microsoft Visual Studio, can range in price anywhere from $699 to $3,000.
However, paying for one isn’t necessary, especially at the beginner level. We suggest, Visual Studio Code by Microsoft. It’s free,it’s what we’ll be using on future tutorials, and it’s got a ton of plugins you can randomly install because you’re the type of person that just like to get ‘things.’
There is so much information that you can learn on YouTube(let alone the internet), and if this is something you wish to pursue you will definitely find yourself watching countless hours of tutorials, and bookmarking hundreds of videos for reference.
Those are the absolute 4 things that you need to begin playing around. Creating websites using code will take more effort than you expect.So don't expect it to take any amount of time. Because you will inevitably become very frustrated when you can't get that one div to go inside the other div when you've been messing with it for four hours. If you love learning and aren’t in a time crunch it can be lots of fun. We (at Zeus Forge) love it, and we’ll support you on your adventure if you choose to keep on trucking!
Building a responsive website is an essential part of web design, and considering the fact that people viewing websites on their phone is increasing dramatically from year to year.
The value of having a website that is responsive cannot be over emphasized. Websites are getting viewed more and more on mobile phone devices, and this can only be expected to increase dramatically in the coming years. This trend really demonstrates how technology and web design are almost directly correlated. As improvements in technology are made the bridge for viewing websites on phones decreases.
The term 'responsive' website is thrown around quite a lot. It's really come to mean one thing, and that is that a website looks good on various different types of platforms they are viewed on. So basically, it means that if someone is viewing your website on a phone it looks good, and if someone is viewing your website on a presentation that is 8 feet by 10 feet is still looks good.
However, there are really different kinds of responsive websites. There are 'responsive' websites and there are 'adaptive' websites.
The different between a responsive website and adaptive is pretty significant.
A responsive website is one that changes based upon the different devices it is viewed on. The website is laid out with various breakpoints that when the website senses a device is a specific size it displays the content in a way that has been specified by the web designer or developer.
A responsive website is one that provides optimal viewing no matter what type of device the user is on. This type of website results in easy navigation, minimum resizing, panning, and scrolling for a large variety of devices. It's ideal to have your website be made completely responsive.
Here is a video that shows 'responsive' elements within our website.
The main box with all of the content within it is responsive. As it moves it still maintains the space on the left and right regardless of the size of the browser.
Having an entire website that is completely responsive can be a challenge based on the way the content needs to be laid out. It's usually best to have both responsive and adaptive elements in order to have the maximum amount of flexibility when it comes to UI and everything looking good on multiple devices.
The majority of responsive web design uses percentages instead of pixels.
The first container or div, would be 100 vw (view width) and 100 vh (view height)
Then elements within the first container would be based off of percentages, and this is what gives the responsive layout it's power. Because when elements are based off of percentages they fluidly resize based upon the size of the parent element.
In order for an element to use percentages the parent element has to be positioned 'relative.'
An adaptive website is one that has several different layouts that are displayed at various breakpoints. When a website is viewed there is code that tells it to display in different ways based on the size of the device the website is being viewed on.
For example, we can see some typical breakpoints below that represent the different ways the site is laid out depending on the size:
So, as the size of the device the website is displayed on changes so does the layout of the website itself.
The video above shows how an 'adaptive' element within a website works. As the website gets smaller you see it go from three columns side by side to three rows vertically. So, once the viewing area gets to a certain 'breakpoints' the layout is modified to make the UI better and easier to navigate for the user. If we maintained it being responsive the columns would eventually get so small that it would become difficult for users to click on and so on.
So websites don't have to be 100% responsive or 100% adaptive. Usually a web designer will pick the best possible option that works for your goals.
So deciding on the layout you're going to use and what elements are going to be responsive and adaptive are important.