Marcus (and his sandwich)

By Markus Majub Angst

Learning web design from scratch can be hard in the beginning. Where should I start learning, which design Software should I use, which services should I offer, or even simpler, how I bring my website online?

Diary entries:

In our previous modules, we learned about the planning process and how we built a pleasing user experience. Then we moved on to the web design boot camp with the User Interface, teaching us the UI elements, design rules, and responsive web design. Module number 3 was about web development and taught us how to use HTML, CSS, and JavaScript.

With our acquired knowledge, we can plan an awesome website, with an accessible user experience, a cool user design, and even code it to perfection. But one important part was still missing! How do I get my website online, and how do I manage my content?

This blog, module number 4, is about domains, hosting, and WordPress.

cPanel

Many people, including myself, ask themselves when should I register my domain name? The easy answer is right away. Especially when you want to build a business or e-commerce shop, and you started already to bring up ideas and develop the brand elements, like the name, logo, colors, and more.

For example, if you want to sell gaming equipment, and your idea is to call yourself “www.gamingstore.com”, the website can be gone already. This can cost you extra money, which you could spend on more useful things, like a great web designer.

The cost for an available website is also not too expensive, at around $10 – $20 dollars per year.

Domain-name

Google example of domains

Buying hosting for our domain

After we found our domain, we need to have a server hosting our website to the World Wide Web. The range of services is huge, from Bluehost, Hostinger, GoDaddy, and so on.

We used SiteGround as our hosting service because they are reliable with high uptime of our page, trustworthy with more than two million users, and also easy to set up the free SSL Certificate. It is also integrating WordPress with one-click installation.

Our teacher, Cylis, explained to us every step and helped us to establish our first personal website. He assisted us with our domain registration, the hosting setup, and how to connect our domain name to the hosting service.

Cylis teaching the Web pro class

Cylis teaching the Web pro class

To receive all certifications of our web design boot camp from Web Courses Bangkok, we need to complete all projects and our own portfolio page.

After the class, everyone had their own page to work with and start with the design process.

Other Students' domains

Our introduction to WordPress

If you are not familiar with website building, you might ask yourself, what is WordPress?
WordPress is the most popular content management system, with more than 60 million websites built and maintained according to Wikipedia.

WordPress is so popular because it is open-source software that is free to download. It started as a blog page, but the developer itself to all kinds of websites with easy customization and plugins to use, which are mostly free as well. Additionally, it is easy to manage when you know the basics, and it is safe and secure to protect your website against spam or hacker.

To practice with WordPress, we used a local server, or also called localhost. We used MAMP to set up our new project, Happy Tours, which is a travel website featuring blog posts, testimonials, video header, gallery, contact form, and more.

NEW

WORDPRESS ESSENTIALS

Learn more about our industry focused course.
Choose the best schedule
to study ONLINE or at the school.

VIEW COURSE

All of the site data, like pictures, plugins, themes, will be saved to our computer and cannot be viewed on another device. This builds a perfect learning environment for our web design because mistakes can be made without negative consequences.

We started with a brief history of the software and what a content management system is and why we need it for our website and future career as a freelance web designer. As well, we learned small, but important, details about the difference between a page and a post, with default settings we need to adjust, and which plugins we can use.

WordPress Dashboard

Plugins in WordPress make your life a whole lotta easier!

Plugins are available for every important category in a web development process. Cylis gave us for every category minimum of two examples. I really liked that one recommendation was free or a freemium and another was a premium, so we really have been able to decide which one we prefer, what does it cost, and what features are available.

The recommended plugins include Multi-Language pages, Security, SEO, Image Optimization, Gallery, Membership, E-commerce, Backup, and page speedup.

For example, for SEO (Search engine optimization), which mostly ranks higher at Google’s search, he gave us two different plugins. Yoast SEO, which is a very popular freemium to optimize meta descriptions, keywords, and many more. The alternative is RankMath, which is also freemium.

Yoast SEO

All suggestions have been based on Cylis’s personal experience, working as a web designer and web developer, so he clearly stated the advantages and disadvantages, which was very helpful to get a clear picture of the applications and features.

Introduction to theme builders.

To build our project page, Happy Tours, we had the freedom to choose between two popular website builders, Elementor, and Divi. Both builders claim to be the best and ultimate website builders, but it really depends on the personal preferences of the web designer, and the plugin is easier to use.

Our Web Courses Bangkok Class choice was equally divided into 3 students using Divi and 4 students choosing Elementor.

Web Pro students with teachers outside school

Web Pro students and teachers outside the school

Another important WordPress feature in the website building process is the selection of the right theme. A theme provides you with more visual control of your website and can also be a factor in terms of page speed.

There are nearly 4,000 different themes in the directory of WordPress itself, and even more, are available all over the internet. Some of them are free and others are premium. The guidance on finding the right theme was very important because it is hard for a beginner to choose and match it to the current project.

Another, often overlooked factor is the creation of a child theme for your web design project. This is very important to keep the parent theme untouched if you need to adapt and modify it for your clients. If the theme gets an update by the developers, your site could crash, which is the worst-case scenario for an online business and a web developer.

Coding in HTML

Coding in HTML with my fellow web pro student

The Happy Tours project was our Introduction to WordPress. Same as the other projects did, the class started the website together and needed to finish it proactively as homework. For questions on our way, we always had the possibility to ask before and after classes for solutions to appearing problems.

Integrating WooCommerce with WordPress for our E-commerce website project

The second project, in our module 4, was the setup of an E-commerce page with WooCommerce. WooCommerce is also an open-source module that can be integrated into WordPress if you want to sell your Products or Services online.

The largest online retail industry is Fashion, equal to our new project, Miss T&G, which is also a fashion shop we create on WordPress with the support of WooCommerce and other plugins.

happy tours and miss t and g

At the start, WooCommerce looks very complicated, and after a quick overview, I had a lot of questions about it. Cyril really explained everything in detail, going with us through every tab of the settings and through every feature. My open questions have been answered during his class, which was really satisfying.

Learning about web design, E-Commerce, and in the next module about digital marketing, is creating even another possible career path for the students. We would have the possibility to open up our own online store with the knowledge we gained at WCB.

We would be able to plan and build our store website with Figma and WordPress. Additionally, we can individualize it with HTML, CSS, and some JavaScript. Using WooCommerce makes it possible to add products, variations, and payments. And with our newly gained digital marketing skills, we can share our products with the right target group.

If you want to know more about our Digital Marketing Module 5, in our Web design boot camp, stay tuned for the next article, with interesting topics covering SEO, Google Analytics, Social Media strategies, and more.

NEW

WEB DESIGN PROFESSIONAL

Learn more about our signature course.
Choose the best schedule
to study ONLINE or at the school.

VIEW COURSE

About The Author

Markus Majub Angst

Hello, I'm Markus. I am German and recently graduated from Stamford International School in Bangkok. I have three years of working experience as a travel agent and two years as a Marketing Manager for a small business. Currently doing a Digital Marketing Internship at Seven Peaks Software in Bangkok. I speak German and English.