A plan for my journey toward full stack development. So that you can follow along, I will summarize each day's lessons for you.
It someone who write code for both the frontend that is the client side and the backend that is the server side. Client-side devices, such as a laptop, smartphone, or other device, are used to view websites.
- These days, full stack development is one of highly pay professions, and you can it without having a degree.
- Not just coding will help you get a job but networking yourself into it and the way you apply for job.
"Trough of sorrow" its a curve which show how peoples get frustrated in learning how to code and it also show why people remain in one spot without changing.
- Sent money buying many courses which they dont even start it. this is because they believe spending money in buying courses means you are progressing.
- Not having a community to help them when they are stock.
- Managing frustration by looking for a community to help you. I found 100Devs its a good community.
- Consistency: Putin at least 2hours daily for coding.
- Take care of yourself.
- connect with 3 individuals already in tech weekly using socail media.
- 2 coffee chats weekly with them.
These are the things I learned the first day.
You can become a full-stack developer consistently if you have a plan in place. I need to schedule my week so that I may accomplish my objective of becoming a full stack developer within the next 30 weeks. Planning out your day will help you be consistent because you won't just leap into it. So, starting this weekend, make plans for your week and for each day of the week so that you may accomplish your goals for the week.
Separating your code's elements or tags using comments or blank spaces can make it easier for you and others to read. This is known as separation of concerns. In order to make a website that is easy to read, we also divide the various languages into their own pages.
HTML use to create the content of a page.
CSS use to design the page.
JAVASCRIPT use for the interaction of a page.
HTML and CSS are not actually regarded as programming languages because they cannot respond to operations that are given to them. for instance, if you type 3 + 2 in HTML or CSS, you won't get 5. So markup languages refer to both HTML and CSS. They have a syntax that you must adhere to, which is why they are referred to as languages. Javascript will be the sole programming language I learn, and I'll utilize it on both the client and server sides of my applications.
I recently started learning HTML, and today I learned the 15 most crucial tags.
<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>
<p> Paragraph </p>
<span> Short text\
<br>
<hr>
<em> Stress Emphasis </em>
<strong> Strong Importance </strong>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
<img>
For more tags click here
You can check my github to see how I use the tags on the folder DAY TWO
I learned the html structure today that is
<!DOCTYPE html>
<html>
<head>
<!-- Stuff the browser needs -->
</head>
<body>
\<!-- Everything the user sees \-->
\<h1>Hello, Twitch! \</h1>
</body>
</html>
The <!DOCTPYE html> tell the brower the type of html its dealing with. other DOCTYPE were very long so this means the html5 DOCTYPE is the recent one. The <html> is the root tag that means all what you write in a html document is in the root tag. Any tag inside the html tag is a child e.g head and body. the <head> is everything the brower need to daplay the page. the <body> are the things we can see. The human being is one such instance. Being a human is similar to using HTML; the body of a person displays what we can see, while the head obscures our ability to understand what the person is thinking.
<nav>
The navigation tag outlines the types of activities that may be done on your website or how a user can move around it.
<form action="confirmation.html" method="post">
<!-- Data collection elements go here -->
</form> We use the form tag to collect info from user. We use input types like:
- Text
- Password
- Tel
- Button
You can check the codes here for day three
Today, I began studying CSS, starting with its syntax. The terms CSS means cascading style sheet and cascade signify that the content below can overrule the content above.
css codes can be written in 3 places that is;
-
inline(the html tag canbe style directlly).
-
In the head(written using the tag <style></style>).
-
Seperate file(create a new file for css codes).
It is best practice to put CSS in it's own file and link to it from the ! <link rel="stylesheet" href="css/style.css">. href="css/style.css" it describe the directory of the css file.
For instance;
P {
color: red;
}
P is referred to as the selector since it specifies which areas of the HTML document the declaration should style.
{ color: red;} is referred to as declaration and it is always inside curly braces.
color is the property and red is the value.
you can check the code for the DAY FOUR here
To select an element that is the direct descendent of another element use parent > child. For intsance <section>
<article>
<h1>Hello github<h2>
</article>
</section>
section > article { color: red; }
The color only in the article will be read that h1 will turn red inside the article not the one outside the article.
To select an element that is inside of another element without being directly descended use parent element parent child. For example:
Use section h1{
color: red;
}
Both the h1 in the article ans outside the article will turn red.
Here are my code for it
IDs are used for selecting distinct elements Only one id with the same value per document. Use the syntax #idName. For instances:
<section>
<p>Hello, Twitch!</p>
<p id="zebra">Hello, Youtube!</p>
</section>
#zebra { color: red; }
Classes are for selecting multiple elements Multiple with same value allowed per document. It uses the syntax .className. For Instances
<section>
<p class="bob">Hello, Twitch!</p>
<p class="bob">Hello, Youtube!</p>
<p class="bob">Goodbye, Mixer!</p>
</section>
.bob {
color: red;
}
All the p tags with class will be read.
Here are my codes for it
Here are some layouts I did using float property in css
Starting next week, I have to connect with 3 individuals already in tech not only software developers but in engineers of other departments, and at least 2 coffee chats with any of them.
The main goal of networking is to convert Stranger > Acquaintance > Friend > Referral > Coworker. The strangers you meet will be the ones to give you a referral to become a coworker in their company. Now if you don't know how to make friends, you can read this book #### "How to win friends and influence people".
One of the best ways to turn strangers into friends is by attending meetups or events. Now you can start them here:
- Meetup.com.
- Interest+conferences.
- Community Groups around you (local).
- App such as; lunch club and bumble bizz.
Meet > Email > Linkendin > Twitter After the meeting email, the person the next day and after the 3rd day connect with them on Linkendin and lastly, after the 6th day connect with them on Twitter. The reason for this is to practice spaced repetition. End up with a coffee chat.
Make a google sheet and in it, keep track of where you meet them e.g
- the event you meet them
- Their Name
- Where they work
- What they do
- spack(Things you remember about the person)
Create a google alert against the people you network with them.
For a website to be responsive, it must be view in a laptop screen, mobile view and other screen resoltions. The website should be view on different sent resolution without content lost.
3 factors are consider here.
- Fluid: Here, all the sizes of all the elements or tags are in percentages. This will make the site to be responsive at any screen size.
- Elastic: Setting font and text to use a responsive unit of measurement that is em which get font size from the parent element e.g a paragrah inside a section tag and rem which only get font size from the html element.
- Content decision: In each screen size will need to decide on what em font get size from the parent size. Media queries are use to accomplish this act.
Here are some examples