Have you ever wondered what sets web development apart from traditional programming?
In this post, I will share with you my personal experience when I started learning web development after graduating from college.
According to knowledgehut:
Programming: The process of writing, testing, and maintaining computer programs using a programming language.
Web Development: The process of creating and maintaining websites and web applications using various technologies and tools.
I remember that, when I initially began learning web development, I thought it was just a subset of programming. I naively believed that as long as I could write clean, functional code, I would be able to create amazing websites and web applications. Little did I know how wrong I was!
It didn't take long for me to realize that web development, particularly when it comes to building user interfaces (UI), requires a lot more than just coding prowess. It demands a keen eye for design, a deep understanding of user experience (UX) principles, and a strong grasp of visual aesthetics.
In my early days, the websites I built looked like they were stuck in the 90s – cluttered, I may say confusing, and ugly. That's when I realized the crucial difference between programming and web development, especially in the realm of UI design.
While programming is primarily focused on writing code to create software applications and systems, web development requires a delicate balance between coding and visual design. Creating a visually appealing and intuitive user interface is essential for the success of any web application or website. It's the first thing that users interact with, and a poorly designed UI can quickly turn them away, no matter how great the underlying functionality is.
How to excel in web development?
I think to truly excel in web development, especially in UI design, personally I had to step out of my programmer's mindset and start honing my visual skills. This involved learning principles of design, color theory, typography, layout, and more.
I spent countless hours studying well-designed websites and applications, analyzing what made them visually appealing and user-friendly. I practiced creating mockups and wireframes, experimenting with different layouts and design elements.
Gradually, my understanding of visual design grew, and I started incorporating these principles into my web development projects. My websites and applications began to look more polished, intuitive, and visually appealing.
Looking back, I can't emphasize enough how crucial visual skills are for web developers, especially those working on UI design. It's not just about writing code; it's about creating a seamless and engaging user experience that combines functionality with aesthetics.
If you're starting your journey in web development, here is a roadmap to follow.
Understand that Web development is not merely an extension of programming; it's a distinct field that requires a unique blend of coding and visual design skills. Embrace the importance of visual aesthetics from the get-go, and continuously work on improving your design sense.
Trust me it will pay off in the long run, and you'll be able to create truly exceptional web experiences that not only function well but also look and feel amazing.
Thank you!
References
https://www.knowledgehut.com/blog/web-development/programming-vs-web-development
Top comments (28)
Building a car and driving a car is also a very different task. I was always wandering, why so many webdev´s are using VScode. It is like they are trying to win a formula one race, but instead of a steering wheel they use a wrench.
What do you think should be used instead of VSCode?
What do you think the Mona Lisa would look like, if the only tool Leonardo Da Vinci had used was VSCode?
The Mona Lisa is a painting and VSCode is a text editor, what are you talking about?
Today, websites are more sophisticated graphic artworks with dynamic effects than simple text documents, so why do we use text editors to build them?
Hence the question I asked above: What do you think should be used instead of VSCode?
I disagree on websites being artworks though. They can be very pretty, and accessible, but that doesn't make all websites we build today works of art.
People once started programming using text editors only. But this was long long ago and people used sprintf to output some text.
After that software needed a graphical UI´s. This was possible to build using text editors, but very inconvenient. So most IDE´s had visual designers for the UI-part. This was different from no code solutions, as this editors worked hand in hand with the coding tools.
Web UI´s are much more demanding. But our tools are back to what we used in the first day´s of coding. So, where are the graphical editors to do the graphical work?
You mean tools like Figma? You can use it to create designs and animations, and then generate HTML/CSS based on those. Either by hand or using plugins.
UX/UI is a whole science in of itself, it's not directly a part of engineering. So it makes sense the tooling is separate.
Does Figma support you the whole way, or is this just a first shot and after that, you are thrown back to VScode after that?
Can you build a house by only using a paintbrush?
I think @efpage wants us to use more graphical editors like Codux.
But makes it look like he doesn't even work in this field at all.
Currently we only at the very beginning of visual editors, so no need to be like this trying to prove something you seemingly are not into.
Yeah, I got the same feeling.
Didn't know about Codux, thanks for mentioning it.
Hy Valery, nice to meet you.
The nice thing about dev.to is, that people of different profession talk to each other and take each other serious. It´s a place to share ideas.
Did you realize that the web is changing ? Ok, maybe not so much in the time your are working in this business :-) . I´m using the web as a programming platform, which makes absolute sense. If you are developing software for one of the big OS, your market is more and more limited. So - it was a logical step to develop for the web rather than for a certain platform. But does this mean, I´m not a web-developer, because I´m not creating nice homepages?
I suppose you never worked with a full featured IDE giving you more than one hand to support your work. Things people are struggling with - like tree shaking - have been a standard feature of all compilers for many years, and it worked effortless and far better than what people get with Rollup or Webpack. And yes: 20 years ago nobody would have used a text simple editor to write large applications, simply because would have paid for this waste of time. But this does not mean people used only "no code" solutions. The UI-tools just worked hand in hand, doing the graphical part of the work, while intelligent code editors where used to write, debug and refractor your code.
But man: This was 20 years ago. Why are "visual editors just at the very beginning?" Today we look back on about 50 years of history in software development. Just because self-proclaimed web engineers forgot all about this, it does not mean, it is irrelevant.
I actually tried to engage in a convo with you, but you just wanted to act like you're smarter than everyone else, without actually knowing what you're talking about.
Sorry to the OP for the long thread, I'll stop replying now.
@efpage Please forgive my hate and name one or several Supercharged IDE you're talking about.
The whole internet started to exist around 40 years ago, of course software development was there earlier, but it's much different from Web development, so actually saying web that we know was born around 20 years ago.
@efpage Could you also mention Visual Editors that were there 20 years ago? I'm really curious to know what they were. Maybe you're actually right.
Hello Valery,
thank you for your kind reply! I´m happy to share some thoughts and I´m learning new things every day.
The internet was initially designed only for sharing static documents, so the net as we know it today is indeed a different one. But it is not 20 years, but about 10 years that the browser war ended, which made the internet interesting as a programming platform.
I started relatively late to use web technology, about 5 yeras ago, so I´m still comparing it to what we had before. I have been working with different compiled languages like C and C++, but most of the time with Delphi, which still is a great environment. Some projects had about 100.000 lines of own code, and I had to update older projects after years. Most of the time, this was more or less effortless.
The Delphi IDE has a text part (like VS-code) with intellisense and a lot of tools that help you navigate through the code. Usually you use much more external code with Delphi, typically about 20 - 30 external libraries. Often you need to check out interfaces to see, which parameters are needed. You can click on any word in your code and jump to the library and line of code, where it is defined.
Running the debugger ist very similar to what you have in VS-code, but your can use a lot of extensions like profilers, Reporting generators etc.
Part of the IDE is a component library, which contains all the visual elements you can use to build your UI. This are the elements provided by the OS (like buttons, tables etc.), but can be extended it by your own elements.
Building your UI is mainly a graphical work using visual components. The interesting part: Every visual component comes with a property editor, so you can click on a component in the UI and set up the properties interactively (Things you need to do in CSS on the web). This is an interactive process.
IDE´s like Delphi provide a great DX, you can build your UI interactively and see changes immediately. Parts of your code will run during design time, so you can see your elements change even before the code ist compiled. If you compile your code (which often takes about 2-5 seconds), you can test your running application with the debugger running in the IDE.
Object Pascal has a strict typing, but there are much more elements to make your code reliable (like a well designed exception handling), so it is pretty easy to build large applications. The biggest part of the code is encapsulated in well tested class libraries and components, that are also base of your visual component lib.
Over the years I had to refractor some fairly old and large applications, but if your "style" was not too bad and your code is well designed, you get nearly no unwanted side effects. Changing the database of an application could be done in a day, if your application was well designed. So, from this perspective, the effort you need to spend to build a fairly simple web application was hard to understand.
Delphi (or RAD-studio) is still maintained and I´m still using it, but this limits me to Windows applications. Developing for the web allows to run your code on any platform, even mobile. So, this was the reason to step over.
I did not work much on C++-IDE´s, but I suppose, things will be similar there. This was "the standard" 20 years ago.
Yeah I'm not sure I understand the comparison, vscode provides a much more nuanced and integrated experience for UI developers than more standard code editors. Figma can be integrated allowing for up to date mocks and asset libraries; you can install any number of plugins to tailor the UI to your workflow. So as a basic editor, sure it may be a wrench instead of a steering wheel (to use your analogy), but if you take the time to customize it, I'd argue that it is probably one of the most powerful coding platforms available (for free I might add). I've been a front-end developer since before we called ourselves "front end developers", and I've used most of the tools and next big things over the years; I've been using vscode since it's release and I have multiple workspaces depending on what project I'm working on, there really isn't another product that brings that level of flexibility to a workflow.
I appreciate VScode very much as a programming platform. But Emmanuelbinen tried to point out the differences between programming and web development. You can establish some kind of visual feedback in VScode, but this is far from real visual interaction (like painting digitally in a paint program or writing text in a text editor). Most people will find it more convenient just to set some text to bold than writing "this is <strong>bold</strong> text".
Maybe I do not know all the tools, but to me it seems that many people just create code until it looks right.
So backend development is programming while frontend is web development?
I think every territory has a little extra. I'd say Map/Reduce is "programming + consolidation + calculation", in the same way WebDev is "programming + layouts + user-interaction".
It's not a sub-set, it's s super-set.
That seems to be a common notion here on Dev but also on the internet in general: webdev = FE
That “vs” in the title, and the thematic of the article is rubbing me off a tad for some reason 😅 without programming, you aren’t able to do web development, unless you use no-code tools, imo. It’s not like “what came first? The egg, or the chicken?” 😂 visual design skills, yeah, but it still is programming in its core foundation.
Yes and no, I think code fundamentals are at play for sure, but writing frontend code compared to backend or server side isn't nearly as structured in the implementation of those methodologies. Java is much more structured than JavaScript or Typescript, CSS has almost no recognizable fundamental structure to say C or .net other than it is using object syntax. I'd say the core foundation of code is the root language and then web development is a dialect that is derived from that root syntax.
Great article, I've also found that web development as well as mobile, and most other UI based layers of an application, have a few patterns that are not as common in other areas of an application.
It's not just the introduction of design to me, it's because there is no control on the order of events, and the need to respond to a changing interface, requires a different way of organizing the system.
Most server processes have a handle on when it starts and ends, user-interface work is far more cyclical and responsive.
Great read, thanks for writing it.
Web Dev is programming just like App Dev is programming.
Thanks for this article. it is like a wake-up call for me.
Apart from Vs code, you can use Sublime Text as your text editor for web development.
Sublime
What an experience you go ,thanks for sharing lessons learned.