My Software Development Journey

#angular #react #javascript #docker

Scope: This short article stipulates my training goals in HNG Internship 8.0 Program. It is rather a documentation of a young developer's journey in software development. Read it, enjoy it and don't fail to drop your comments below.

The Journey of a Thousand Miles Starts with a Step
The Journey of a thousand miles always start with one step in the right direction. My quest for software development has been on the increase since I discovered how robust software applications can make life more easy and enjoyable.

I commenced my journey in software development some months ago. Indeed, it has been very exciting one. One interesting thing to know is that there is no limit to what one can achieve in the field of software development. I have always searched for a training opportunity where I can learn more about software development. Finally, I enrolled for Zuri HNG 8.0 internship program. At the end of the 8 weeks training, I hope to achieve the following:

1).Design good software interfaces using tools like Figma.

2).Design good website templates.

3).Develop functional and dynamic websites as a Front End Developer using HTML, CSS and JavaScript.

4).Use modern technologies such as React Js, Angular and Vue to build robust websites.

5). Be comfortable in using Python, GO and Flutter in developing Applications

Tutorials and Sources
As a beginner in the journey of software development, I have been able to go through some tutorials that has made my learning process very easy and interesting. Feel free to consult these sources

GIT - Git and GitHub for Beginners - Crash Course By freecodecamp. See the Link

JavaScript - The Web Developer Bootcamp by Colt Steele. See the Link

Node Js - The complete JavaScript Course by Jonas Schmedtmann. See the Link

HTML,CSS and Python - W3Schools.com. See the Link

First Point of my Journey
The first point in my software development journey is to learn HTML. HTML means Hyper Text Markup Language. It is the Skeleton or frame on which every other programming language is built on in order to have a wonderful website.

HTML deals primarily with tags(<>). Below are some of the commonly used HTML5 tags and their functions.

<main></main> - Used to describe the dominant content of the document.

<nav></nav> - Used to describe the part of navigation links.

<article></article> -Used to describe an article in the document.

<aside></aside> - Used to describe a contents that are slightly related to the main content of the document.

<footer></footer> - Used to describe footer section of a document.

Working with Cascading Style Sheet
CSS stands for cascading style sheet. It is used to create design of how the web page will look like. It is also used to make your interface and template colorful and beautiful.There are three key ways to include CSS in your document.

First Approach: This involves insertion of CSS styles inside HTML tags. This is also called Inline Styling. Example is done below where we want the color of h1 tag to become 'red'.

<h1 style ='color:red';></h1>

Second Approach: This involves the inclusion of style tag in the head section of the HTML document. The element to be styled is called by its tag name, id or class name.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document || Styling</title>

<style>
#idName{ background-color: green; }

.className{ color: yellow;}

p{font-size: 20px; }
</style>

</head>
<body>
<h1 id="idName">I contain ID</h1>

<div class="className">I contain Class </div>

<p>I am a Paragraph Tag </p> 
</body>
</html>

Code Explanation
In the body tag, the code above contains h1 tag with an id of value "idName". It also contains a div tag with a class of value "className" and a paragraph tag ("p").

Styling The Tags
In the head tag, open and close style tag as indicated in the code.
<style> styling code Here ... </style>

Next,between the style tag where you have "styling code here", call the h1 tag by its id value "idName" and include "#" in front of the id value. i.e you will have "#idName".

Next, insert open and close curly braces in front of "#idName". Between the curly braces, include the attribute you want the tag to have and its value separated by a colon (:).Finally, put a semi-colon (;).

NOTE: Repeat the procedure explained above for other two examples involving class of value "className". Ensure that you include "." instead of "#" for class and "p" for paragraph as shown in the codes above.

Third Approach: The third approach is to create a different CSS file. Then, include all your styles there and link it to head section of the HTML file using the format below:

<link rel="stylesheet" href="css_fileName.css">

Conclusion
This is part of my journey so far, I will keep updating you on the progress.I am very optimistic that after this training, I will be well exposed to carryout robust front end development projects. I am open to collaboration and mentorship. Connect to me on Github and Figma via the link below:

Github:
Link

Figma:
Link

Connet to Zuri Team
https://training.zuri.team
https://internship.zuri.team
https://zuri.team