ROADMAP full stack development

ROADMAP full stack development

Day two(plan)

Make a plan

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.

Golden rule

Speration of concerns

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.

Languages

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.

START

I recently started learning HTML, and today I learned the 15 most crucial tags.

Heading Elements (tags)

<h1> MOST IMPORTANT </h1>
<h2> .............. </h2>
<h3> .............. </h3>
<h4> .............. </h4>
<h5> .............. </h5>
<h6> .............. </h6>

Other Text Elements

<p> Paragraph </p>
<span> Short text </span>

Nerd Fights

<br>
<hr>

Elements

<em> Stress Emphasis </em>
<strong> Strong Importance </strong>

Ordered List

<ol>
 <li> Item 1 </li>
  <li> Item 2 </li>
</ol>

Unordered List

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>

Containing Elements

<div> </div>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>

Image

<img>

For more tags click here

You can check here to see how I use the tags in my Github

DAY 3

HTML structure

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 !DOCTYPE tells the browser the type of HTML it's dealing with. another DOCTYPE was very long so this means the html5 DOCTYPE is the recent one.

The \html is the root tag which means all that you write in an 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 browser needs to display the page.

the body tag is 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.

New tags

<nav></nav>

The navigation tag outlines the types of activities that may be done on your website or how a user can move around it.

Info from users

<form action="confirmation.html" method="post">
  <!-- Data collection elements go here -->
</form>

We use the form tag to collect info from users. We use input types like:

  • Text
  • Password
  • Tel
  • Email
  • Button

    You can check the codes here for day three

    DAY FOUR

    CSS

    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.

    Where does CSS go?

    CSS codes can be written in 3 places that are;

    • inline(the HTML tag can be styled directly).

    • In the head(written using the tag \).

    • Separate file(create a new file for CSS codes).

    Separate file

    It is best practice to put CSS in its own file and link to it from the !

<link rel="stylesheet" href="css/style.css">

href="css/style.css" describes the directory of the CSS file.

CSS rules

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