The very basics of programming on the internet starts with HTML and CSS. These can be learned quickly. They are best understood once you already understand the concept of a key-value pair. Below is a brief note on key-value pairs and then two resources to get you started programming.
- Note on Key-Value Pairs
- Link to Crash Courses
- Note on Development Tools
A Key-Value pair is basically two parts that work together to create meaning. A key is like a word, and a value is like it’s definition. You can say a list of key-value pairs is like a dictionary.
HTML and CSS each have their own special words or keys that you can assign values to. By writing your own definitions to these words (i.e assigning a value to the key) you can create special meanings within your website.
Just like you write a paragraph by putting words together, you can build a website through putting key-value pairs together.
Both HTML and CSS have special types of key-value pairs.
HTML lets you define the structure and content of your website. In other words, it lets you decide the what and the where of the things you want on your website. Like a title at the top and text in the middle and you can define what that title and text are.
CSS lets you define the style of your website. In other words, how it looks. Like a blue title and black text.
Accordingly, HTML has ‘keys’ called ‘tags’ that look like . You then write the value inside these tags.
CSS has keys too. One of them is called color and it lets you say something like “color:blue”
By using HTML and CSS together you can define the where, what, and how of your website. You’re on your own for the why ;)
Key-value pairs are any two things which are linked to each other. Like a word and a definition. They can be written many ways. For example, any of the below are all key-value pairs.
- value
- key = “value”
- key:value
- key{ value }
These four formats are NOT interchangeable. Different situations or languages require different formatting for the computer to understand. Pay close attention to this
HTML: https://www.youtube.com/watch?v=UB1O30fR-EE
CSS: https://www.youtube.com/watch?v=yfoY53QXEnI
All development happens through editing text. This means you will need a good text editor. There are many out there. I recommend only one: Visual Studio Code (https://code.visualstudio.com)
Built by Microsoft, it is very easy to use and has great extensions. My favorite extension is Github Co-Pilot which adds AI to your text editor to autocomplete some of your code. (https://copilot.github.com)
Visual Studio Code + CoPilot = EZ Programming