The Disconnect Between Website Design and Development

Updated: Jun 10


Vancouver Personal Training Sciences. Designed and Developed by: Stacy Schilling

Over the past 10 years, freelance and job opportunities in Website Design have increased as more people are conducting business online along with the endless amounts of software and development programs that are now available to everyone. Although some designers are using programs like Adobe Dreamweaver and XD to design and build websites, many others are using online coding platforms like Visual Studio Code, Glitch, CodePen, Brackets, and more just to name a few. There's nothing wrong with any of these options when it comes to building a website. However, the problem lies with the instructors that are hired to teach website design and development that don't fully have enough knowledge, education and experience in both the front and back-end of websites to really make things less complicated for their students. Which brings me back to what happened with Lisa during our tutoring sessions. Apparently, Lisa's instructor had the students read through an online book about website design and development, and then instructed them to design and build their own site as their final project. Students were able to purchase, download and use templates if they choose to, or they could build their website from scratch.


Sounds pretty easy, right?

Wrong!


What the teacher failed to do was first teach the students HTML, HTML5, CSS and CSS3 and the differences between each coding language. Yes, there are differences between HTML and HTML5, and it's super important to not only learn the tags, but be able to distinguish which ones are HTML and HTML5 tags, and how to use them. The same thing applies for CSS and CSS3. Last major step is to explain how HTML and CSS actually work together when it comes to building a website, or even being able to edit someone else's template, which is what happened with Lisa. Lisa purchased another designer's template to use for her final project, which normally is fine, but she didn't know and understand HTML and CSS to be able to edit the code on her own to make the website look like her design. Precious time was wasted and running out trying to figure out which HTML page was the one that needed to be edited along with where was the correct CSS style sheet. Since Lisa wasn't taught HTML and CSS, it was very difficult to work on the website without my help, which leads me to believe that her website instructor didn't do a good job of teaching students the basics between website design and website development.


What is Website Design aka "The Pretty Side"


In simple terms, it's how the website looks to your online viewers complete with a design, text, graphics, photos, forms, etc. So, when they type in your website address, www.whateveryourdomainis.com, viewers will see the complete design, not the back-end coding that was used to bring the website to life.


The Wedgwood Society of Southern California. Designed and Developed by: Stacy Schilling

What is Website Development aka "The Ugly Side"

The back-end of your website, or "the ugly side" is the coding languages used to make your website function and operate on the Web. Most websites have the basics: HTML and CSS, but they can also include JavaScript, Node, React, JSQuery, and more depending on the size and complexity of the website.

For example, if you were design and build a basic standard five-page website for a small new business, the site might only need to use HTML and CSS to bring it to life. While a website the size of Amazon would also include other coding languages like Java, C++ and Perl. (https://www.quora.com/What-programming-languages-are-used-at-Amazon)


So, when it comes to teaching website design and development to students, it's super vital to help them understand how entire website functions from the front to the back.

Unfortunately, Lisa's teacher skipped this major step among many others, which is why I spent over 17.5 hours in one week helping her to finish her website. Two of those days turned into five hour lessons!


How to Prevent the Disconnect


It's really not rocket science or super complicated as some people would like you to believe. You start at the beginning and teach the basics. They can and should include everything from color, typography, images including resolution, color and format, the process of creating a website from start to finish (the idea in your head to a functioning online website), coding languages, and the most important piece, where is the website going, which I'll cover in another post.


Too many teachers are giving out website assignments with very little or no direction, and also not teaching the differences between UX and UI design along with basic coding languages, HTML and CSS. Or, many teachers are using an online platform where they have students read and follow step-by-step directions to design and building a website. Kinda of a like a math formula. When we are taught math in school, we're shown a formula on how to find the correct answer. A great example of a math formula is algebra where you have to solve the equation to find X. Then you can put X back into the problem to check your work and make sure both sides are balanced.


Unfortunately, that's not how website design and development work.


There is a structure for how HTML, CSS and other coding languages need to be written, but it's now always so cookie cutter-based and we certainly don't teach students to read a book to figure out how to write the code correctly so it works online.


When it comes to learning coding languages, instructors should always teach HTML and HTML5 first because that is the basic one you master before moving onto CSS, Bootstrap, JavaScript and the rest of the languages. You start with the basics and then move up from there kind of like learning a new language.


If you wanted to learn Arabic, you wouldn't start reading and writing full sentences because the language is unfamiliar to you. Instead, you would first learn the alphabet or characters, numbers, colors, shapes, etc. the very basics. As you improved in the language, you would then start learning short words: jump, water, milk, table, coffee, ocean, etc. before moving onto basic short sentences. Eventually, as your knowledge of the language improved, you would learn how to read, write and speak in longer sentences until you started to become proficient. The same concept applies to learning website coding languages. HTML can be used alone, but it will also work with CSS and JavaScript.


So, Lisa's teacher really should have had the students learn all the basic coding languages first, before requiring them to create and complete a functioning website as their final project.


Your students will fail when you fail to teach them the basics and help them to understand why they need to learn them.


As an instructor, I would rather see my students master the coding languages first before getting hung up on a well-designed website. For example, when Raneisha came to me for help in her Web Technology class, she was failing, completely lost and overwhelmed. Before we even started working on her website, I taught her the basics of what makes a good website design vs a bad website design. We discussed color, fonts, images, and design before moving onto code.


Once we went through the "pretty side" of website design, I had her start creating concepts on paper while we went through HTML and CSS.


Then, I made her build her website from scratch using HTML and CSS. It wasn't a pretty site and I was okay with it because I wanted to make sure she could do the work herself. She was able to read, write and understand basic code and built the website on her own with my assistance. I even sent a few recording of our lesson to her teacher so she would know that Raneisha built the website on her own.


Raneisha managed to pass the class with a B and had more self-confidence in her abilities to push through something that was hard and finish.


Stacy


If you need tutoring help with art, design, English or homework assistance in your design courses, please contact Stacy for online remote lessons.

Recent Posts

See All