Let's play with HTML & CSS!
Tags: html, css, vscode, github
Published: 2020-10-20 07:20:46

##WELCOME!

OK, so you are starting to expand your horizons with programming and thought about touching base with your HTML/CSS game.
<img src="https://media.giphy.com/media/TIRlx3Fzi1A7L2d5z7/giphy.gif">
 Sounds a little daunting if you think about where to begin right?

This blog is meant for people who wants to start practicing or playing with CSS and maybe somewhat familiar of the tags(_commands_) that works with it. If not, here are sources you can refer to in learning in detail about [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [CSS](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics).I'll have more resources for you at the end of this blog. This will hopefully help you start on making an HTML file as well as a CSS file and have them work together. Well thanks to the flexibility of code, we can play around with it and control how a webpage is gonna look!

We can start by making our own repository for our portfolio. For this example, I'll use **Github** to create a repo but you can definitely use other websites like **Gitlab, Bitbucket, SourceForge**.

GitHub allows remote Git repositories. This enables you to host your repos in an environment that lets you share your code with the public and allows others to contribute or refer to your project in parallel.

Please don't be shy to share what you ended up finishing or what you’ve built just because you don’t think you or your projects aren’t “good enough.” Remember, this is for learning what works for you! For sure there would be someone who would find your discoveries useful!

So back to making a repo..
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jwf2os7ucdc6efu2bk3r.png)
On your Github profile, press that _+_ button on the corner and make a new repository. You can name it anything you want, then just follow the prompt. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4n098p4shqboz2xear63.png)
When initializing, the first set of code is commonly used. So copy that and paste it on your terminal.
######There are more customization available when you make your repo, like licenses, wikis and etc. You can find a more in depth tutorial for git repos in [here](https://yourbrainoncomputers.com/using-github-to-build-a-portfolio-ultimate-guide/#Create_a_Repository).

After initializing and cloning that repo to your system, it is now time to use your text editor program. I’m using VsCode.

When you open the file on VsCode, it would only have a _README.md_ file. That’s okay! A clean slate for our practice is good.

Now let’s make an HTML and a CSS file. You could run _touch index.html_ and _touch style.css_ on your terminal or use the new file button up in the folder name;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hk4xi5vnev3udjchd71s.png)

What to put on your those files you say?

Try putting these lines of code on your _index.html_ file;

```ruby
<html>
   <head>
      <link rel="stylesheet" href=“style.css">
   </head>
   <body>
      <h1> WELCOME TO THE PLAYGROUND! </h1>
      <p>Scroll down for more cool stuff!</p>
   </body>
</html>
```
You see that `<link rel="stylesheet" href=“style.css”>` inside our `<head>` tags? It's purpose is to call or link our CSS file to be used as a stylesheet for this html file. Neat right?

Now put these lines of code to your _style.css_ file;

```ruby
body {
  background-color: teal;
}
h1 {
 color: gold;
 }
p {
 color: orange;
 }
```

Alright! We have made progress with our playground! If you wanna see how it looks like, there are multiple ways to fulfill that. You can either run `open index.html` on your VsCode terminal to pull up your browser, or install an extension called **HTML Viewer** on VsCode and click the icon on top right to enable it.
<img src="https://media.giphy.com/media/PqMTE3jpTKxXi/giphy.gif">

Our mock webpage should look like this..
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uqjdz4ykso8bt6gqbvv3.png)

Looking good! But looking a little empty too. You can add more paragraphs for a bio or maybe an intro. 
Any interest on adding images? Got you covered! 
But first, before we go farther on this, if you're familiar with git add & commit, this is your sign to do so now :).

For this example we are going to use an image off of the internet. So first look up a photo you wanna see up on your webpage. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uywk8135s17xl0yjv29r.png)
Copy the image URL of that photo you want, in my case I got the photos from a google search but you can definitely use some from other sites like Flickr and many more.

To add it to your webpage, we need to paste that image URL into a tag called `<img>`. It is a self-closing tag so we don't need to put a `</img>. Your _index.html_ should look more like this;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v02f3gfds6kkpausjij1.png)

On your CSS file, you can adjust the alignment of elements on your webpage. Try to tinker and add a couple of these properties on your CSS.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xjfappd7pzfxwf3bqqkm.png)

This shows the _text-align_ property is gonna be applied towards the body. The _#bacon_ you see there is selecting the tag with the _"bacon"_ id which can be found on your html file. Putting an `id` is a neat way for us to be able to individually style each of our element on the webpage.

TAKE A LOOK AT THE FRUITS OF YOUR LABOR!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2sknzk4qljje9wwe6tsc.png)

OH! Don't forget to save and run _git add_ commands to get your repo that you made freshly updated.

Until our next HTML CSS practice!

Here are more sources:

[Starting with HTML](https://www.w3.org/Style/Examples/011/firstcss.en.html)
[CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
[Color Picker](https://www.google.com/search?hl=en&source=hp&ei=rfKQX9SCNIO4tQWXzobACA&q=color+picker&oq=color+pi&gs_lcp=CgZwc3ktYWIQARgAMggIABCxAxDJAzICCAAyAggAMgUIABCxAzIFCAAQsQMyBQgAELEDMgUIABCxAzICCAAyAggAMgIIADoOCC4QsQMQxwEQowIQkwI6CAgAELEDEIMBOgUILhCxAzoICC4QxwEQowI6CwgAELEDEIMBEMkDOgIILjoLCC4QsQMQxwEQowI6BQgAEMkDOggILhDHARCvAToHCAAQsQMQCjoECAAQClD-DFiHGmDXKmgBcAB4AIABgwaIAdQXkgENMC4xLjIuMS4xLjAuMpgBAKABAaoBB2d3cy13aXqwAQA&sclient=psy-ab)
[Video tutorial for beginners](https://www.youtube.com/watch?v=J35jug1uHzE)
[CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)