Starting out can be discouraging and mind numbing. If you haven't checked out 5 Ways to Break into a Technology Career with NO prior experience, check that out and get an idea of some practical ways to enter this industry. And don't forget to subscribe!
SUBSCRIBEIf you truly have little to no experience, it can be difficult to conceptualize and see what the future could hold for your creativity.
In this tutorial, I hope to get you rolling with a quick HTML/CSS portfolio addition.To see what we are building, checkout this demo. It includes a home and about page, with a CSS animation using Keyframes.Check out the video at scottyfullstack and be sure to subscribe!My project folder looks like the following
1. Open new files called main.html, main.css, and about.html and open main in the browser*the following is for use in the terminal with VSCode as my editor, if you are not familiar with this, open a notepad and use the file system to create and save new files.
2. In main.html, start out by creating the structure we will fill inHere we define our html document, our head tags (where we will link our css file and document title), the header tags for our navigation, and the body for our content div. All of these with closing (</>) tags.
3. Let's fill in the <head> tagHere we have two tags within <head>, the title and link tags.The <title> will show up in your browsers tab and be readable by crawlers for SEO. So make sure it makes sense. The <link> is to attach our stylesheet to this document. Rel let's our doc know this is a stylesheet, and href is the path to our stylesheet. In this case, it is in the same path as our main.html
4. Let's add some navigationPretty straight forward here. Within our <header> tags we have a <nav> tag that then includes two inline <a> tags. As seen in our <link> tag about, the href here is the path to the html doc we want the browser to display. In between the <a> tags we have visible text for the link (i.e. Home, About)
5. The Body - Both the main.html and about.html./main.html./about.html - Literally a copy of main but with content updates.We have three types of tags here between the files: <div>, <h1> and <p>. The <div> is a "divider" that will contain other elements. We are targeting this with a "class" called "content". The <h1> is a formatted heading that is bold and large, while the <p> is a paragraph tag for standard text.
6. Refresh your Browser Page:
Well this sucks...Because we need styling.
7. Open main.css and let's add our css targeting specific elementsThere is a lot going on here if you don't know css. If you need a commentary on this section, check out the youtube video walkthrough../main.cssAt this point if you refresh you may notice the text isn't quite right, even though we set font-family to Monoton under .content h1. Let's fix that now.
8. Import a google fontHead to https://fonts.google.com and search for "Monoton".Click it and then on the right click on the "Embed" tab:
Grab that reference from inside <script> tags and paste it at the top of your css:
You did it! This is a simple example that should give you some pretty cool tools to study and expand on. Check out my youtube channel for a more detailed walkthrough.Don't forget to sign up on the site for coming info!
Disclosure: scottyfullstack.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.