GETTING STARTED WITH WEB DESIGN

So, you want to get started with web design and development! Truth be told, I was hoping that you will hire me to build your site or app, but I'm okay with this as well. In fact, I have decided to write this article because I thought that you may be interested in seeing how I work. So, let's get started!

You should begin the process by drawing a few website sketches on paper. I know that there are lots of online mockup tools, but paper-based designs rule, because they provide unmatched flexibility. With paper, the only limit is your imagination, and not some pre-programmed shapes and labels. Create sketches of your key pages.

Then, get all the content that's needed for them together. You will need content for all the text and image blocks, and you should definitely stay away from those "lorem ipsum" samples, which won't help you understand how the actual site will look like.

Get lots of high-quality stock images or hire a professional photographer if you need great pictures of your products. Resist the temptation to take pictures of them using your new phone; they will look much worse in comparison with what can be achieved by a professional who utilizes pro equipment.

It's time to plan the site architecture. What pages will be linked to from the main menu? And where will these pages/categories lead? Create the entire site structure, and then get ready to write some code.

If you design sites my way, you will need to code them using HTML, CSS and JavaScript. Actually, you may get away with HTML and CSS alone, but your site will miss some key features – a search function, for example. Hypertext Markup Language (HTML) is the standard web programming language for website pages; web browsers receive these pages/files from servers, and then render them.

CSS, the acronym for "Cascading Style Sheets", makes HTML more powerful by allowing the web developer to specify font colors, button sizes, table styles, element animations, and much more.

What web design/development tools will you need? First of all, you will need a code editor. Don't worry, even Notepad will do, though I recommend Notepad++, a 100% free, feature-rich alternative. Get it from here: https://notepad-plus-plus.org/downloads/

Then, you will want to install and use an image editor. If you prefer the free route, choose the Paint.net application, which can be downloaded from here: https://www.getpaint.net/. This application will allow you to open images, resize them, convert them to a different format, create logos and icons, optimize image sizes, add special effects, and much more.

Once that your site is ready, you must test it using all the important web browsers; think Google Chrome, Mozilla Firefox, Microsoft Edge, and so on. You want to make sure that all the pages are rendered properly. For some strange reason, certain tables look weird in some browsers, some fonts don't have the proper size and/or style, and so on. The good news is that most web development tools have a "Preview" button which will launch the default browser, and then open the page you're currently tweaking.

Don't forget that more and more people use mobile devices to browse the web, so it is essential to test your site on as many smartphones and tablets as possible. Install Chrome, Firefox, Opera and Samsung's mobile browsers, and then test your site extensively.

Web design is an iterative process. If something doesn't feel right, it must go. And even after you've finished the site, you may notice that it doesn't work as expected, or that some of the required functionality is missing.

So, be sure to test everything. Ask your friends to test the site, and then let you know what doesn't work as expected. I know it's a lot of work, so you may want to hire me instead of wasting so much of your precious time :)