Photo by Glenn Carstens-Peters on Unsplash
New Beginning: My path to Frontend Development
A Journey of a thousand miles, begins with a step.
Hi, I am David Bayode. A Nigerian and aspiring Frontend-Developer who has spent the last five months on this journey.
Where it Started -
In my Medium post that goes a bit more into how I got started on this journey, I narrated how but will summarize it all to say, I love tinkering, it gives me joy to see the result of ingenuity.
First Months -
The first few months were tenuous, HTML and CSS though I've interacted with in times long past I had problems remembering input types and some other minor mistakes.
This did not deter me though as I had been exposing myself to veteran Developer content like Stephan Mischook(I hope I didn't butcher his name :) ) on YouTube.
His advice in one of his videos was, "You want to expose yourself to coding principles constantly, to reinforce how to learn to program so your brain builds new neural pathways dedicated to learning whatever language you're focused on learning".
I took this to heart and practiced and even sketched the normal flow of semantic HTML, starting with the -
<!DOCTYPE html>
That signified the declaration of a new HTML-5 Document and then we have -
<html lang="en"></html>
tags that enclose the document and house the head tags which hold meta information instructing bots and devices on what the content is about(S.E.O - Search Engine Optimization).
The body tags are where the structure of the text document is declared and this as previously said follows a semantic structure where headings have the tags <header></header> and which can house an <h1></h1> tag, holding content to be emphasized in bold font-weight(not to be confused with the <b></b> tags which do the same but are used for texts within the Document).
We can also specify things like buttons and references using hyperlinks <a href="#"></a> and lots more( even video tags for video content which you can add controls as attributes to add a control UI).
I learned this much from reading Jon Ducketts Book that covers HTML & CSS and other content on the web.
Little did I know CSS was where it would quickly get complicated. I made this progress in 1 and a half months.
CSS - Where centering content becomes the most googled CSS content -
CSS I enjoyed, it brought me back to how the web used to look 10-ish years ago, strong colorful fonts and eye-blinding backgrounds, those were the days, haha.
CSS which stands for Cascading StyleSheet is a technology which as the name says is used to style content created by the HTML Document, be it the background, texts, video, you name it. One could write CSS in 3 ways. Inline, in <style></style> tags or in its own file(my preferred way).
Examples -
Inline :
<header style="color:red;></header>Style tags :
<style>p { color: green; }</style>On its own file :
This is done by creating a text file with the extension .css
Where it can become tricky for a lot of Developers is when you want to position content, there are a lot of ways to do that, but it all stems from understanding a concept that dictates the document flow of the webpage.
This is of course **drumroll**, the "Box Model", this concept is summarised as viewing every element of the webpage as a box(yes, really).
So each tag is a little box that dictates how that content is displayed.
The possibilities are truly endless for positioning as we have flexbox positioning which allows a one-dimensional way for content to move to and be displayed, then we have the more declarative grid method which takes content placement into grid-template-rows, grid-template-columns and even explicitly declares the areas each content should move to with grid-template-areas.
Though centering was initially difficult, I passed the challenge and find very little difficulty in specifying content position to what I wished.
My favorite css property is the linear-gradient property, this creates a color gradient that is applied to whatever selector you choose through the background property of that element( Note, background and background-color are different).
This was learned starting from the half of the first month to the second month.
JavaScript -
JavaScript(not to be confused with Java) was born in the '90s (1995) as a programming language to add pop-ups and client-side prompts to webpages.
Its creation, famously made in 10 days(or a week, I've read a lot of differences), is often scoffed at for its dynamic nature and weak typing(variables can implicitly carry numbers, strings etc and work correctly), for its type coercion(converting strings to numbers and vice versa implicitly) which can affect you in various ways if you don't explicitly use the strict equality operator and more.
I found it difficult as it had concepts that I found weird for my first real programming language study.
The fact that you could declare a string variable and that primitives certain characteristics were immutable, like -
var hello = "hello world!";
hello[0] = "b";
console.log(hello); // hello world!
As you saw above, changing the property of the first index string variable did not modify the whole variable(certain features are immutable).
And other things like loops which I found difficult initially but later understood to simply imply that one runs the code a specified number of times, performing whatever action is in the code block. we have several types of loops -
FOR LOOPS -let's say we had an array:const arr = [1, 2, 3, 4]; for (let i = 0; i < arr.length; i++) { /* this is a code block for code statement */}WHILE LOOPS -Using the same array :while (i < arr.length) { /* code block */}DO WHILE LOOPS -do { /* code block */ } while (i < arr.length)
There are more loops but these are the most common, the first is mostly used for iterating along the length of an array and then applying a block of code for whatever amount you want(through the length of the said array).
The first array runs until the condition put in brackets returns false i.e to say the code runs until "i" is greater than the length of the array and then it stops.
Meanwhile, the While loop runs until its condition(in brackets) is false.
The third loop is weird in the sense that it runs the last condition even if it were false(I've read it was made intentionally for debug purposes but who knows), which means if (let i = 0; i < 5; i++) it would run for 6 times(starting from index 0), which means one would need to be careful when using it.
I also learned about destructuring, which in my understanding is how to store objects and arrays values using destructuring syntax. Confused? I was too. Take an object -
const obj = {
name : "Mike",
age : 43,
location : {
state : "Kogi State",
LGA : "Ogori Magongo"
}}
How do we access the "state" value? There are two ways of accessing objects, dot-notation and bracket-notation or combined.
obj.name; // Mikeobj["name"]; // Mikeobj.location["state"]; // Kogi State
Now, destructuring makes things a step easier where we can house a key-value pair like
const { location : { state : x, LGA : y }} = obj;
console.log(x, y);
// Kogi State, Ogori Magongo
This was fun to use and I had an interesting idea if this could be used to destructure JSON data which i haven't gotten to learning.
Next is the "this" keyword, to be honest, all I know is it's used to implicitly refer to the object it references and is used in constructor functions -
function Dog(name, age) = {
this.name = name;
this.age = age;
}
let mutt = new Dog("Spike", 4);
/* mutt = {
name : "Spike",
age : 4
} */
This was all fun to learn for the remainder of the months.
I used a variety of sources to plan out a curriculum and I'm still learning while building a few projects and plotting future ones. I used FreeCodeCamp, sololearn, MDN, GeekforGeeks, w3schools, YouTube Videos and anything I could find that was helpful even coding books. Gladly I completed the "Responsive Web Design" and "JavaScript Data Structures and Algorithms" courses, earning their respective certificates.
I am still learning, the technologies I've learned so far are SASS(scss), jQuery, DOM API and Bootstrap.
Of the projects I've planned, I've written the code for my calculator web app, using HTML, CSS(scss) and JavaScript(DOM).
Future actions on it would be to add a second display apart from the page to save answers and also attach an Event Listener to the mouse movement that changes the linear-gradient applied around the web app.
My advice to newbies would be to not be overwhelmed, as Stephan Mischook says, take it a bit at a time, if you learn for 5 minutes and get a headache, take a walk, come back when refreshed, be it that day or the next but don't abandon learning for something like a week.
I'll post about more projects or tutorials as i continue to learn.
Thank you for reading.