WELCOME!
OK, so you are starting to expand your horizons with programming and thought about touching base with your HTML/CSS game.
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 and CSS.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..
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.
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.
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;
What to put on your those files you say?
Try putting these lines of code on your index.html file;
<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;
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.
Our mock webpage should look like this..
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.
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 `. Your index.html should look more like this;
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.
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!
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
CSS basics
Color Picker
Video tutorial for beginners
CSS Properties
Top comments (0)