Development apps in the works take what users ask of them and create software. What's next for an aspiring developer? Learning to write good prompts? I'd argue, emphatically, no, because as much as A.I. impresses us, it can only ever learn from what humans have already created. I catch A.I. adding bugs as much as taking care of dreary boilerplate nearly every time I ask it to help me code something. If I didn't understand how code worked, how would I do this? How would a developer working on more than a hobby project catch malicious code inserted from a "bad" robot?
Should you still learn the nuts and bolts? Absolutely you should.
Watch the below videos, read the linked content, and complete the exercises to start your journey to becoming an amazing web developer.
Note, you will not find complex algorithmic puzzles or tricky math problems here. Great developers are craftspersons who enjoy making things. Try to watch these in order, so you can build up upon basics. Think about the general problem being solved first—the purpose of the particular tool, technique, or process—before getting into details. Strive to attain the 30,000 foot view before you dive deep.
After you're familiar with the industry tools and standards, and how to solve problems on your own, take time to learn about the buzzwords in A.I. and what they mean.
Take some more time to learn linear algebra; these models are, at heart, "just" multi-variable (this is the same as high-dimensional) math formulas with some iteration thrown in.
Over the next ten years, A.I. will likely learn to mimic what we do well, that is, with fewer and fewer errors. But then might come big changes. We may be able to start asking our A.I. to improve technology at a fundamental level. Imagine existing paradigms undergoing significant improvements, for everything from the hierarchy of signaling protocols and the common software patterns presented in the videos below, to the physical engineering itself of our tools and the materials we use to make them. Perhaps A.I. will explain that the best computer we could hope to devise is already there, between our ears. Perhaps A.I. will "wake up", and help us understand how the wetware of our nervous system, as it processes vast inputs of information from our senses, manifests the mentality of red, the smell of mint, our fears and joys, those mysteries that give meaning and substance to life. The potential of A.I. makes learning how it works valuable.
You must master the command line to become a proficient contributor to a software team.
- https://youtu.be/cQ81k1vXvcU
- https://www.udemy.com/course/linux-shell-scripting-free/
- https://youtu.be/lZAoFs75_cs
- https://youtu.be/wBp0Rb-ZJak
- https://youtu.be/oyc_6UfoW3w
- https://youtu.be/pIL5LZQn3W8
- https://youtu.be/Vbu8rfVaABw
- https://youtu.be/AI6Ccfno6Pk
- https://linuxhandbook.com/bash-arguments/
- https://youtu.be/utk8yEpyy7A
- https://youtu.be/ugA8OxaCoo8
- https://youtu.be/E2h2ECEiTo4
- https://youtu.be/vDOVEDl2z84
- https://youtu.be/mA08E59-zo8
- https://learn-regex.com
- https://regexone.com/
- https://regexcrossword.com
You must understand the client-server model of web application design.
- https://www.omnisci.com/technical-glossary/client-server
- https://youtu.be/pGGDdKZvYpI
- https://support.microsoft.com/en-us/office/database-design-basics-eb2159cf-1e30-401a-8084-bd4f9c9ca1f5
- https://www.vertabelo.com/blog/a-database-model-for-action-games/
- https://www.essentialsql.com/database-normalization/
- https://learn.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description
- https://www.javaguicodexample.com/normalizationnotes.pdf
- https://www.mongodb.com/nosql-explained/data-modeling
- https://www.slideshare.net/mongodb/schema-design-by-example
- https://youtu.be/Hf0rjtnwC9A
You must understand how network protocols work to encode information for routing requests from clients to servers, and responses from servers to clients.
README: Data flows in digital communications as small, managable packets of binary data, much like railroad cars on a choo-choo-train. Such train-car-packets have "header" carts at the front, strings of ones and zeros expressing the protocol, type of data, and information about the sender and receiver. Next comes the primary data package, or "payload" cart, in the middle of the packet. Trailing zeros make up the caboose, or "footer" are at the end of the packet to signal termination. Information transmitted in this manner provides the internet its vaunted resiliency. Routing and assembling packets is the core task of networking software and hardware.
- https://youtu.be/1Vq1lrWQAyg
- https://youtu.be/v8aYhOxZuNg
- https://youtu.be/Ilk7UXzV_Qc
- https://youtu.be/QrNnRJqTMO8
- https://youtu.be/MVihcigDlbA
- https://youtu.be/nomyRJehhnM
- https://youtu.be/6sUbt-Qp6Pg
- https://youtu.be/7YcW25PHnAA
- https://youtu.be/c9gqtjMaFHA
- https://youtu.be/GrNrcmD6HLA
- https://youtu.be/wJa5CTIFj7U
- https://youtu.be/cA9ZJdqzOoU
- https://youtu.be/yBB2VKG1_X4
- https://youtu.be/8ARodQ4Wlf4
You should understand the concepts Virtual Private Network (VPN), TOR / onion routing, and have a basic grasp of various network topologies.
You must understand the basic security strategies used for encrypting data for network communications.
- https://youtu.be/cczlpiiu42M
- https://youtu.be/GSIDS_lvRv4
- https://youtu.be/84sO-0JxoHU
- https://youtu.be/KyUTuwz_b7Q
- https://youtu.be/vKpqYSyRZck
- https://youtu.be/0TLDTodL7Lc
- https://youtu.be/E_wX40fQwEA
- https://www.youtube.com/watch?v=86cQJ0MMses
- http://www.moserware.com/2009/06/first-few-milliseconds-of-https.html
You must become proficient, over time, with an array of skills to be able to build and deploy client-server software.
- https://medium.com/swlh/my-software-engineer-roadmap-2fb0c02b8a08
- https://github.com/kamranahmedse/developer-roadmap
- https://thevalleyofcode.com/
You must master programming fundamentals to be able to efficiently implement ideas in code. You must understand how to construct applications using established software design patterns and common software development tools including Interactive Development Environments(IDEs), Version Control Systems(VCSs), and formatting and debugging tools.
- https://youtu.be/quW5dAGpXiU
- https://youtu.be/Us4LwTjWFaY
- https://youtu.be/7oS1i-IWp1Q
- https://youtu.be/azcrPFhaY9k
- https://www.youtube.com/c/cs50
- https://www.youtube.com/watch?v=9-cyC6O81Bk
- https://youtu.be/FKTxC9pl-WM
You must grasp common professional software development design patterns.
- https://eakansh.hashnode.dev/design-patterns-for-software-design-and-development
- https://youtu.be/hQE8lQk9ikE
- https://youtu.be/IRxOTkFduT8
- https://youtu.be/a5JWrd7Y_14
- http://aroma.vn/web/wp-content/uploads/2016/11/code-complete-2nd-edition-v413hav.pdf
You must understand how to use IDEs, VCSs, and Debugging Tools.
- https://www.codecademy.com/articles/what-is-an-ide
- https://youtu.be/W2V-TjHV5SM
- https://youtu.be/UZMmpav62rY
- https://youtu.be/USjZcfj8yxE
- https://youtu.be/RGOj5yH7evk
- https://youtu.be/ilZnwY-gYcI
- https://youtu.be/ZtHqwzslcYA
- https://youtu.be/llx5djJmXXw
- https://youtu.be/AnTX2mtOl9Q
- https://semver.org
- https://www.freshconsulting.com/insights/blog/atomic-commits/
- https://youtu.be/Uszj_k0DGsg
- https://mokkapps.de/blog/how-to-automatically-generate-a-helpful-changelog-from-your-git-commit-messages/
- https://opendev.org
You must understand how to use automated code checking and styling (a.k.a. linting) tools.
- https://stackoverflow.com/questions/8503559/what-is-linting#8503586
- https://youtu.be/St1YSNoB36Y
- https://github.com/airbnb/javascript
You must understand HTML, CSS, & JavaScript.
README: Web browsers interpret three frontend languages to display and manipulate client application data, HTML, CSS, and JavaScript. HTML describes the client's layout structure and meta-data (used by search engines). CSS styles and animates HTML elements. JavaScript creates complex interactivity by manipulating HTML & CSS and accessing special browser APIs. A web developer can do many cool things on the client with HTML, CSS, & JavaScript. Strive to improve your proficiency in all three.
- https://www.freecodecamp.org/news/a-practical-guide-to-learning-front-end-development-for-beginners-da6516505e41/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
- https://www.w3schools.com/html/default.asp
- https://www.w3schools.com/js/default.asp
- https://www.w3schools.com/css/default.asp
README: Technically, the client part of a web app can be written in HTML, without CSS, or JavaScript; however, doing so severely constrains the application's user experience. Try this out to help yourself only if you're having trouble grasping fundamentals.
README: You need to understand the concept of code frameworks. Frameworks, in general, are software tools developers use to reduce development time. Frameworks simplify code structures and separate concerns, making teamwork easier and improving source maintainability.
README: Professional web developers usually master at least one web client framework. You should make this your goal, too.
README: Some popular frontend (client) frameworks include React / NextJS, Vue / Nuxt, Svelte / SvelteKit, Remix, and Angular. The unique syntax of a web client framework, no matter how idiosyncratic, always compiles to HTML, CSS and JavaScript.
README: TypeScript is a popular JavaScript-superset designed to make it easier to compose and debug JavaScript. TypeScript compiles to regular JavaScript for running on the browser, your local PC, or a web server. TypeScript can be auto-formatted ("linted"), like most programming languages.
README: Sass is a CSS-compatible language designed to make it easier to write and maintain CSS styling code. Sass compiles to browser-readable CSS.
README: Some programs, including Cordova (commercially implemented as Capacitor & Ionic) and Electron, allow developers to bundle web applications as native apps that can run outside of the browser. A hidden, mini-browser is deployed to contain the app. VSCode is a popular "web app" built using Electron. The advantage of Cordova and Electron is they allow developers to deploy one code base to multiple platforms, reducing development and maintenance costs.
README: Other languages that are used to make client apps include React-Native, Dart/Flutter, Swift, Objective C, Java, C, C++, C#, GDScript, Lua, Unity / C#, Rust, and others. These languages compile code to native binary or byte-code executables for running on a desktop or mobile device; React-Native, Flutter, GoDot, and Unity can also compile code so it runs in a web browser.
What is the advantage of using a web browser as a client?
You must understand how to use at least one server-side language.
README: Developers use multiple backend languages to handle server-side operations (e.g., updating a database, performing an API service, serving whole or part of the web client, or responding to client requests with data or error messages). These backend languages include, but are not limited to, PHP, JavaScript (known as "NodeJS" on the backend), C#, Python, C, C++, Rust, Java, Erlang, Bash, and others:
README: Some web development frameworks handle the full stack, that is, both web client and server, with one primary "language", e.g., Meteor (JS), .Net (C#) and Laravel (PHP). Full stack frameworks abstract away common client-server application tasks using opinionated syntaxes, APIs and structures, that, while imposing a new learning curve on the developer, once learned, make development more efficient; some full stack frameworks allow developers to interchange the "frontend" portion of the framework, like the ones listed under Web Client Software above, so the developer can use a preferred tool for delivering the HTML, CSS, & Javascript client pages.
README: Some frameworks work better than others in certain situations due to a number of factors, including web application architecture, business requirements, team size, developer skill-level, and team preferences:
- https://www.scnsoft.com/blog/web-application-architecture
- https://hackernoon.com/how-to-choose-a-web-application-framework
- https://floverfelt.org/posts/software-best-practices.html
README: Software developers, no matter what language they're using, take advantage of libraries of pre-built code (often available as FOSS) to speed things up. Web developers use special libraries for JavaScript programs known as "packages". Packages can be downloaded from one of two popular package repositories, npm and yarn (using the eponymous command line tools, npm install
and yarn install
).
Note 1: Developers also add pre-built JavaScript libraries directly using special HTML links (script tags) and JavaScript includes (modules).
Note 2: Developers also use bundlers, like Webpack / Parcel / Snowpack, to minify and combine web application code so it can be delivered to browsers more efficiently.
README: No developer can master every language, framework, library or tool. Familiarize yourself with what you need to reach your goals. Start simple, move to complex.
You should know what software tests do. Many professional production environments require developers to write "unit tests" as a foundation of Quality Assurance. Besides unit tests, there are also "integration" and "functional" tests.:
- https://www.tutorialspoint.com/agile_testing/agile_testing_quadrants.htm
- https://youtu.be/Eu35xM76kKY
- https://stackoverflow.com/questions/398004/do-you-write-your-unit-tests-before-or-after-coding-a-piece-of-functionality
- https://www.youtube.com/watch?v=VS6EEUVZGLE
- https://www.youtube.com/watch?v=ydddSkVz_a8
- https://en.m.wikipedia.org/wiki/Behavior-driven_development
README: When developing client / server software you will build and run both the client and server on your local machine. When testing, you will test your work locally and on a remote development server. Prior to release, you and your colleagues will conduct user-acceptance, security, and stress testing with remote servers and remote clients.
You must understand the request / response cycle in client-server applications. You must understand how to:
- Send a request to a server from a client
- Proxy (forward) requests using a webserver program like Apache or Nginx, from the HTTP port to a process port or program executable
- Action client requests to a server using a server script listening on a port
- Action client requests to a server using a server script to communicate to a hosted or remote database
- Action client requests to a server using a server script to communicate to a 3rd party API, microservice, or Lambda compute service
- Action client requests to a server using a server script and output from a native application executable or shell script
- Store data uploaded from the client to the server on the server's file system, in a database, or via a 3rd party service (like AWS S3)
- Generate a proper response, with data payload and appropriate headers, to the client
- Use the term API to refer to a library, function, script, or remote app that accepts requests (inputs), and sends responses (outputs): https://free-apis.github.io/#/
- Use a CDN: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
Read:
- https://en.wikipedia.org/wiki/Common_Gateway_Interface
- http://stackoverflow.com/questions/152457/ddg#152863
You should know what a "technology stack" means. A client-server app's tech stack refers to the set of commercial and free tools used to build, deploy, and host the app. Junior developers often struggle to decide what tech stack tools to use. It's best to learn tools suited to complete one critical part of the project at a time, in order from simple to complex (e.g., web client, server app, database, 3rd party API integrations, CI/CD pipelines / staging, QA / testing). You will avoid becoming paralyzed by choice when you understand that web application development can be as complex as you decide it has to be. You can make a web app with a few lines of PHP. You can also build out a complex automated deployment system with thousands of lines of code, using multiple languages and a diverse array of supporting software tools that in toto work like a factory to update and release your app.
Tech stack advice: Learn a stack that has deep roots and support from a big vendor as a safe bet, then engage with newer tools and stacks from open source communities, academia, and emerging tech providers, to broaden your skills.
Still struggling with stacks? Ask yourself, what is the motivation for this tool? What specific problem does it solve? Understand the problem first before you start learning solutions.
Watch these videos and complete the exercises within.
- https://youtu.be/gNmrGZSGK1k
- https://youtu.be/bf8L9tQi_MQ
- https://youtu.be/vrj9AohVhPA
- https://youtu.be/APM1mcKbK7o
- https://youtu.be/Dorf8i6lCuk
- https://youtu.be/GU-2T7k9NfI
- https://youtu.be/BcuktRvUe0Q
- https://youtu.be/txGL-Ld9zD8
- https://youtu.be/NMTEfaPEYB8
- https://youtu.be/UU7MgYIbtAk
- https://youtu.be/ytsWZlpyoSU
- https://youtu.be/eCZhz0JCVx0
- https://youtu.be/NmwtF0fAUfI
- https://youtu.be/5IG4UmULyoA
- https://blog.warrant.dev/implementing-role-based-access-control
- https://www.npmjs.com/package/i18next
- https://web.dev/accessibility-auditing-react/
You show know about A Records, MX Records, and other Domain Name System (DNS) records. You should understand how the internet associates human-readable names with machine-readable IP addresses. You should understand how DNS servers and DNS applications work in concert with other key server-based applications to provide internet services.
- https://youtu.be/uOfonONtIuk
- https://youtu.be/dE4rsNuG0aw
- https://youtu.be/By7N3nuQc7w
- https://www.youtube.com/watch?v=NijONS9gMZ0
- https://www.nslookup.io/learning/dns-record-types/
- https://youtu.be/m1mhaC5NH7s
- https://www.joshmcguigan.com/blog/run-your-own-dns-servers/
Cloudflare provides valuable DNS services free for web application developers:
By now, if you haven't already, you should learn the concept of virtualization, and know the use cases for different types of virtualization, e.g., how Virtual Private Servers (VPSs) power the internet, how software like DevOps tools, IoT software, operating systems, and even game emulators utilize virtualization layers to function.
You should become proficient in DevOps.
README: DevOps in practice means utilizing two main skills to automate tasks:
- Writing scripts to set up virtual machines (VMs) with the operating systems, databases and programs you want pre-installed and configured. These scripts can also set up services that help you scale your application, so it can manage many thousands, or even millions, of users.
- Writing scripts to automate CICD (Continuous Integration / Deployment): This is automating the hosting of new versions of your app / game / tool via scripts that talk to your Github (or self-hosted) repo and your servers.
README: You find the scripts and programs you want for DevOps "orchestration" hosted online at different “hubs”, e.g.:
- Ansible (set up programs on existing servers): https://galaxy.ansible.com/search?deprecated=false&keywords=penetration%20&order_by=-relevance&page=1
- Vagrant (set up preconfigured servers / VMs): https://app.vagrantup.com/boxes/search?utf8=✓&sort=downloads&provider=&q=kali
- Docker (set up “containers“ a.k.a. "microservices" - OSs and programs running inside their own little VM-like processes): https://hub.docker.com/search?q=kali&type=image ; https://kubernetes.io/docs/concepts/containers/
- Kubernetes (set up a "cluster" of containers grouped into "pods" across multiple "nodes" - VPSs (VMs) or bare metal machines — so that the application components hosted in the containers (DBs, MQs, clients, servers, monitoring tools, networking tools, etc.) scale and change automatically in response to network demand and application state): https://helm.sh
README: DevOps is also called Infrastructure as Code (IaC). Like most standardization processes, DevOps reduces the fragility of systems by improving the reproducability and maintainablity of component parts. Client-server infrastructure scripts, for example, describe and deploy not only your app builds, but also infrastructure dependencies, including, but not limited to, hosts (VMs where your code runs), operating systems (programs that manage VM resources), web servers (programs to help forward requests to your software), load balancers (programs to help manage request-response traffic), message queues (programs to help manage sending messages like email password resets and in-app notifications to your clients), caches, search indexes, databases, block storage tools, logging tools, monitoring tools, and more.
From the ground up: Vagrant and Ansible (or Terraform, or other competitor) let you write scripts / manifests / serialization configs that can create, provision and update your VM servers, where your application runs in containers composed with Docker (or Containerd, or other competitor), which are coordinated and managed in a cluster by Kubernetes (using a Kubernetes management program like Keel).
There are many programs on the market that help tie together and manage DevOps infrastructures with GUI systems and YAML-inspired scripts. Learn what meets your needs. E.g., after you finish your first simple client-server-database app, write a docker-compose
script that builds the app's infrastructure in steps as separate containers linked and hosted on your local machine. Then use K3s to simulate locally how your app will be orchestrated and managed on a "cloud" host, and view your handiwork in a GUI-supported container management system like Portainer or Rancher.
You may be thinking this is quite a lot of ceremony for a web app! Do you really need to master advanced DevOps pipelining and orchestration tools to become an amazing web developer?
No, you don't.
How deep you want to go into DevOps depends on where you may work, or what you may want to do as an individual developer. You should learn the problems DevOps tools solve first, then decide if you need those solutions now, or if you're happier to acquire DevOps implementation details for your use cases as they become necessary to know. In the meantime, you can and should take advantage of services that solve common DevOps problems for you, like Netlify, Laravel Vapor, Meteor Cloud, Azure, Vercel and Amplify.
What problems, after all, does a multinode manager like Kubernetes (or Titus) actually solve?
Well, big ones, mostly. If you're building a web service that requires hundreds of nodes to support millions of customers, you may need to learn a tool like Kubernetes and a cloud management system like OpenStack. If you want to make an AI tool that must run on thousands of nodes to crunch petabytes of data with precision and thrift as demand scales, you will need to master DevOps software and scripting.
A media streaming service like Netflix, e.g., must utilize DevOps tools, because of the amount of data and bandwidth the service provides: Millions of users watch 4K videos on demand using Netflix. Video and music streaming companies like Netflix, Disney+, HBO Max, Spotify, Pandora, etc. can ill-afford downtime and will always need skilled DevOps engineers.
Scale determines needs. A simple web app will do just fine on a single node VPS host; but bigger problems require more complex solutions.
- https://12factor.net
- https://youtu.be/yIVXjl4SwVo
- https://youtu.be/wX75Z-4MEoM
- https://youtu.be/KxxRl6VEBxI
- https://youtu.be/POPP2WTJ8es
- https://www.youtube.com/watch?v=jyW3D74I3_w
- https://devopscube.com/become-devops-engineer/
- https://youtu.be/OXE2a8dqIAI
- https://www.youtube.com/watch?v=j5Zsa_eOXeY
- https://www.youtube.com/watch?v=hQcFE0RD0cQ
- https://youtu.be/PwSZpcl7vUE
- https://youtu.be/xhva6DeKqVU
- https://youtu.be/DZRG2sezIl4
- https://digital.ai/periodic-table-of-devops-tools
- https://youtu.be/UmdVsXr5eak
- https://youtu.be/oq1fOr6Ryws
- https://youtu.be/7MLXuG83Fsw
- https://youtu.be/J-xqz_ZM9Wg
- https://www.sentinelone.com/blog/function-as-a-service-faas/
- https://docs.aws.amazon.com/lambda/latest/dg/getting-started-create-function.html
- https://kubernetes.io/case-studies/
- https://www.varonis.com/blog/docker-vs-kubernetes
- https://www.linkedin.com/pulse/learn-yaml-devops-easy-way-sandip-das/
- https://opensource.com/article/21/11/cicd-pipeline-kubernetes-tekton
- https://www.appvia.io/blog/tutorial-deploy-kubernetes-cluster
- https://youtu.be/_gWfFEuert8
- https://docs.openstack.org/openstack-ansible/newton/developer-docs/quickstart-aio.html
- https://erik-ekberg.medium.com/how-to-test-aws-lambda-locally-6f07bd36abd9
- https://docs.microsoft.com/en-us/azure/cloud-services/cloud-services-performance-testing-visual-studio-profiler
- https://www.youtube.com/playlist?list=PLkWRCY_kK0GgrU0L2nnRtzef8HPVsJp0r (optional)
- HAProxy / Traefik
- "Edge" Computing
You should understand the purpose of automating security tools to test your software against exploits and hacks.
README: For development security ops, e.g., you will use DevOps tools to spin up and test an application’s full server structure (all the VMs, services and containers) on your home PC (a machine with 32-64GB ram would be ideal for this, min. 16GB ram).
- https://geekflare.com/port-scanner-server/
- https://youtu.be/ng1bvXsp9ZA
- https://youtu.be/7UG8wE58vU8
- https://cybersguards.com/list-of-hacking-tools/
- https://www.offensive-security.com/metasploit-unleashed/
- https://software.af.mil/wp-content/uploads/2021/05/DoD-Enterprise-DevSecOps-2.0-Fundamentals.pdf
DevSecOps with Github Built In Tools:
Security Checks
By now you will have set up and run a few different Linux VMs on your PC or Mac dev machine. Here's another one to try:
Over two decades ago, in the late 90s, distributed technology and torrent protocols made large-file media sharing inexpensive, fast and easy for users over peer-to-peer networks. The rise and consolidation of big-tech services in the 00s brought back the heavyweight client-server paradigm. However, the emergence of inexpensive local storage, 5G tech and blockchain, could re-value nimble products that leverage mesh, ad-hoc, and peer-to-peer networks. We may realize the "democratization" of communication and trade foreshadowed by technologies of the past. You should understand how the concept of decentralization influences contemporary software development.
- https://youtu.be/7VbL89mKK3M
- https://youtu.be/LFZDpF_A-BE
- https://www.section.io/engineering-education/how-to-create-a-blockchain-in-python/
- https://youtu.be/i9e4g7SV244
- https://moxie.org/2022/01/07/web3-first-impressions.html
You must have basic user interface design skills, and understand what interfaces work best for a given set of user input requirements.
- https://www.w3schools.com/html/html_form_input_types.asp
- https://www.w3schools.com/html/html_blocks.asp
- https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
- Manufacturer standards: https://developer.apple.com/design/human-interface-guidelines/
- Dashboards: https://pixinvent.com/demo/vuexy-vuejs-laravel-admin-template/demo-1/dashboard/ecommerce
- Design innovation: https://www.awwwards.com
- Design inspiration: https://tympanus.net/codrops/
You must understand the importance of prototyping.
Just as it's wise to plan, sketch, design, and finalize an architectural drawing before building a physical structure, so it is also smart to undertake preliminary steps before coding a software application. The build phase of software development, as with construction, is time, money, and labor intensive, and consequential. Whereas a sketch, detailed design, or mock up can be done and redone in minutes to hours, coding can take days and also requires debugging, versioning, testing, staging, deployment, QA, and maintenance after completion.
There are many tools and design systems to help designers and developers create interactive mockups prior to commiting the work to code, or avoid coding altogether. Developers are encouraged to learn a few of these to save time and money.
Also stongly consider using a no code / low code platform or form builder to rapidly prototype a working application before coding. This will help you discover and fix UI hiccups early on.
You may, in fact, find a platform or builder that delivers an acceptable solution to the problem you were going to solve with a time-consuming, custom application, with little to no coding at all, freeing you and your business to expend efforts on other valuable pursuits.
- https://www.turing.com/blog/ten-best-low-code-platforms-for-2022/
- https://hcsimulator.com
- https://swf2js.com/en/
- https://www.joget.org
- https://powerapps.microsoft.com
- https://www.honeycode.aws
- https://www.makerpad.co
- https://appian.com
You will be more employable at traditionally structured corporations and better prepared to contribute to OSS projects if you are comfortable working with other developers and other teams of developers. You should familiarize yourself with "agile" software development processes and learn to communicate via Github and Gitlab issues. Experiment on a group project with friends, or consider taking on a Github or Gitlab issue on an OSS project.