Life happens, but we still have to grind, even if there's no time available to post, then you make some. That's what I did here, I've been trying to get as best as I can when it comes to JavaScript coding and some times I forget about posting to Hive - even though it is like my third priority overall -, but here I am.
I still don't have a job, but that's because I haven't even began searching. Not yet, I gotta be ready and feel ready.
Soon.
Grinding, grinding, grinding. When we are talking code, it all comes down to grinding. The more you grind, practice your skills, find out about new tweaks, practice what you should already know by heart, and just putting your code to work... the more you will learn.
So that's what I am doing. I am already pretty efficient with my HTML and CSS code, I still need a lot of practice and a hell lot to learn regarding JavaScript - and don't worry, I've been taking my lessons religiously even though I haven't posted about JavaScript for something like two weeks; but the point is, these little projects are mainly about HTML and CSS and grinding my skills.
This is eight post already about little projects based off online ideas and my plan is to join all of these ideas once I am ready and create my own CV website of my own where I'll showcase all that I've learned in a sort of interactive website. Heads up, I'm getting there, slowly but steady, more slowly than steady to be honest but what the hell, slow and steady wins the race.
In the meantime, I will leave you with one project Idea based off on Brad Traversy's paid course on Udemy. Credit at the bottom and links btw.
Note: The code is based off someone else's ideas, all the comments and doc are mine as this is supposed to be a teaching kind of post, and even though the main concept is not mine, all the code has been tweaked and modified to align with my own ideas.
Responsive Navigation Bar
In this project I'll create something simple as hell but usefull as fuck: A navigation bar that sticks to the top with a lot of style and swag.
HTML Code
<body>
<nav class="nav">
<div class="container">
<h1 class="logo"><a href="index.html">Anomad's Landing Page
About
Blog
Pictures
Get in Touch
Anomadsoul: A story
There's so much to tell about a solo traveler, but you have to begin
somewhere.
</p>
</div>
</div>
<section class="container content">
<h2>The Greater Fool Economy</h2>
<p>
Right now, I consider the NFT economics to be nothing more than a
Greater Fool Economy. Don't get me wrong, once there are incredible use
cases this will no longer be the case, but right now and if I can be
blunt and raw, NFTs are here to overhype an idea that is not here yet,
to launder money, and to take hard earned cash from the hands of fools.
That being said, I will leave you with a simple story:
"Bitcoin's price is often cited as an example of the greater fool
theory. The cryptocurrency doesn't appear to have intrinsic value
(although this is an area of debate), consumes massive amounts of
energy, and consists simply of lines of code stored in a computer
network. Despite these concerns, the price of bitcoin has skyrocketed
over the years.
</p>
</section>
</body>
CSS Code
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open-Sans", sans-serif;
color: #222;
padding-bottom: 50px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.hero {
background-image: url("bakgrounderic.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
/*We position the hero relative because we'll add an overlay inside that will be positioned absoulte*/
margin-bottom: 20px;
z-index: -2;
}
For the overlay, we could add it in the HTML directly but doing so in the CSS file is better, just so that I can learn how to do it and then show it to you.
The overlay will be there simply to give contrast between the background image and the text, making the text more readable
.hero::before {
/* Using the *before* pseudo element, we can add layers and objects directly on the CSS File */
content: "";
position: absolute;
justify-content: center;
align-items: center;
width: 70%;
height: 30%;
background-color: rgb(255, 255, 255, 0.3);
/* But this background is set on top of everything, and we want to bring the text to the front */
z-index: -1;
}
.hero h1 {
font-size: 40px;
margin: -20px 0 20px;
}
.hero p {
font-size: 20px;
letter-spacing: 1px;
margin-left: 17.5%;
margin-right: 17.5%;
}
.content h2,
.content h3 {
font-size: 150%;
margin: 10px 0;
}
.content p {
color: #555;
line-height: 30px;
letter-spacing: 1.2px;
}
This is the Nav Bar, which is what we actually care about for this mini project.
.nav {
position: fixed;
background-color: #222;
top: 0;
left: 0;
right: 0;
/* I'm going to add a transition so that when we scroll, the nav bar changes color and will lessen its padding */
transition: all 2s ease-in-out; /* *All* means every element that can be transitioned */
}
.nav .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
transition: all 2s ease-in-out;
}
.nav ul {
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
}
.nav a {
color: white;
text-decoration: none;
padding: 7px 15px;
transition: all 2s ease-in-out;
}
.nav.active {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0 0.3);
}
.nav.active a {
color: #000;
}
.nav.active .container {
padding: 10px 0;
}
.nav a.current,
.nav a:hover {
color: #c0392b;
font-weight: bold;
}
JavaScript Code
const nav = document.querySelector(".nav");
window.addEventListener("scroll", fixNav);
function fixNav() {
if (window.scrollY > nav.offsetHeight + 150) {
nav.classList.add("active");
} else {
nav.classList.remove("active");
}
}