It’s a bit difficult when you don’t know how to code! I freely admit that I take my coding experience for granted which is why this question took me off guard.
If I were to start learning how to code now, I would try hard to avoid spending a lot of money. I would use online resources. And my first stop would be to ask an AI to help me get started.
As a Designer just starting out learning how to code, here’s 7 things you should learn:
1. What is Code?
- Definition: Code is a set of instructions written in a programming language that a computer can understand and execute.
- Code is a recipe the browser understands.
- Read the Mozilla Developer Network documentation and search for help with the things you’re building and Create Your First Home Page.
2. Why is Code Important?
- Automation: Code allows us to automate repetitive tasks.
- Creation: It enables the creation of software, websites, apps, and more.
- Problem-Solving: Code helps solve complex problems by breaking them down into smaller, manageable steps.
- As designers, more often than not we are designing for code applications.
3. Basic Concepts
- Syntax: The rules and structure of a programming language, similar to grammar in human languages.
- Variables: Containers for storing data values, like boxes where you can keep different items.
- Functions: Blocks of code designed to perform specific tasks, like a function in math that takes input and gives output.
- Loops: Instructions that repeat a block of code multiple times, like a loop in a song chorus.
4. Real-World Examples
- Websites: HTML, CSS, and JavaScript code create and style web pages.
- Apps: Mobile apps are built using languages like Swift (for iOS) or Kotlin (for Android).
- Games: Video games use code to create interactive experiences.
- Use your browser inspector (Chrome, Edge, Firefox ) to see the code behind cool things you like on the web.
5. Interactive Learning
- Playground: Use platforms like Scratch for visual coding, where they can drag and drop code blocks to create animations and games.
- Simple Projects: Start with small projects like creating a basic webpage or a simple calculator. See the MDN Learn to Build a Web Page link above.
- Figma Developer Mode: As you design, switch to developer mode and start inspecting the code behind the design.
6. Search for code packages to use with AI
- Chart.js to make charts
- HTML5 Boilerplate to start a web page (not needed for things like codepen since this is already provided)
- Bootstrap or Foundation 6 to give your experiments a basic styling boost
- You can even use jQuery, Vanilla JavaScript (no JS framework), or a JS framework like React to prompt AI to make you an interactive web page.
7. Be Curious
- Explore: Explore and experiment with code using code playgrounds like codepen.io and JSFiddle.
- Ask Questions while building: Pick a project and work on it, and search for answers as you go. You can build a form or style a web page, for example.
Let me know how you get on!
