Now that I know WHAT I am going to do (read last week’s blog post here), I need to learn HOW to do it. The world of coding can be overwhelming if you try to learn too much at once. Like school, you have to learn the basics before you can learn more advanced concepts. In this instance, I need to learn basic languages, skills, and concepts first and not get consumed by the many, many advanced concepts of coding.
First, I need to establish what tools I will use. Think of coding as language acquisition. I can’t try to learn Latin, Spanish, French, and Mandarin all at once and expect to be successful - I mean you could, but it would be REALLY hard for the average person. Did you know you can code in over 700 different languages? Therefore, I need to pick just a few simple languages to learn first before I add other languages to the mix. The two languages I will focus on for this project are HTML and CSS. (Some coders would even debate these are not “true” coding languages, despite the fact that the “L” in HTML stands for language, but I digress… the most important thing is to just get started!) I should mention there is a third core language that is often used alongside HTML and CSS for websites: Javascript. HTML and CSS are static languages, but Javascript allows for more dynamic, interactive elements. For this project, however, we are sticking to the basics of just HTML and CSS.
Simply stated, HTML (HyperText Markup Language) is the language used to create the actual text of a web page. Think of HTML as the foundation (every house has one). When writing in HTML, I would alert an element or text by tags, so when typing the heading for my holiday card, I would say <h1>Happy Holidays!</h1>. Notice how I used a / in my closing tag. Adding the symbols and characters allows my text to be displayed in the way I intended; in this case, I want a heading. So, where do I find these HTML tags? It’s simple! Use your online resources. There are so many videos online that talk about HTML tags. Here is a list of many of the tags that can be used for reference.
The second language I will be using is CSS (Cascading Style Sheets). CSS controls how HTML looks (for example, a mid-century modern house and a Victorian mansion both have foundations, but on the outside, they look totally different). CSS makes your project aesthetically pleasing by allowing you to add color, modify sizes, add background images, and it makes your design work on both mobile and desktop. Just like when using HTML, there are selectors in CSS that are used to change the text’s color or size. For example, let’s say I want my heading from above <h1>Happy Holidays!</h1> to be written in green and bolded text.
Here’s how it would work:
h1 {
color: green;
font-weight: bold;
}All that is to say, HTML is the content (foundation, frames, and walls) supporting your web page, while CSS is the look (paint color, landscaping, and styling) that comes after. You have to set the foundation first, and then you can add some style!
Now broken down individually those two languages don’t seem too hard, but then where do you go to start coding? And how do you get your code to show up on the web? This is where Repl.it comes into play. Repl.it will allow you to easily make a free account and start making a website. Repl.it will preview your webpage as you code, so you know exactly what your webpage will end up looking like. It’ll host the website too. (What exactly is a website host? It’s basically the land on the world wide web that you are renting to house your website.) And you can code in 50+ other languages too if you want to keep learning and creating!
Ok, so this week I set up my free account with Repl.it (which was super easy by the way) and I got to choose my skill level and what languages I want to learn. I only focused on diving into HTML this week.
Repl.it also has built-in tutorials so you can learn whatever language you are excited about. So, I searched in tutorials for HTML and found this one. There are many more, but this tutorial focuses on the very basics.
Pro Tip: I opened my tutorial in a separate window from my new Repl so I could switch between screens.
It is super easy to start a new Repl. Click “new repl” and then select the language. In this case, I selected HTML, CSS, JS and then gave it a name.
I used the tutorial to just play around and get a hang of how things work. Repl.it is great because it will predict many of the tags for you so you don’t have to go find them all on your own. Everything is built-in and easy.
Now that I have a better understanding of these two languages (more on CSS to come later) and have poked around with repls, next week I will start on my actual project, a holiday e-card.
I hope you’re as excited as I am to see this all come together. Thanks for following my journey and please share with anyone you know who’s just getting started coding! It’s easy, I promise!
Follow @Replit