DEV Community: milky121

GROWING AND SHRINKING

milky121 — Sat, 18 Dec 2021 11:36:08 +0000

The Flex Shorthand

      The flex declaration is actually a shorthand for 3 properties that you can set on a flex item.

         Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using this property,you can write more concise stylesheets,saving time and energy.

   So, flex is actually a shorthand for flex-grow,flex-shrink and flex-basis.

  The default value of the flex property is shown in the above:flex-grow: 0,flex-shrink: 1,flex-basis: 0%.

Flex-Grow

It expects a single number as its value,and that number is used as the flex-item's "growth factor" . When we applied flex: 1 to every div inside our container,we telling every div to grow the same amount.

Flex-Shrink

It is to flex-grow, but sets the "SHRINK FACTOR" of a flex item. flex-shrink only ends up being applied if the size of all flex items is larger than their parent container.
The default shrink factor is flex-shrink: 1,you can also specify higher numbers to make certain items shrink at a higher rate than normal

note

An important application to notice here is that when you specify flex-grow or flex-shrink,flex items do not necessarily respect your given values for width because when their parents is big enough, they grow to fill space.

Flex-Basis

flex-basis simply sets the initial size of a flex item,so any sort of flex-growing or flex-shrinking starts from that baseline size. Shorthand value defaults to flex-basis: 0%

IMPORTANT NOTE

 The actual default value for flex-basis is auto,but when you easily flex: 1 on an element, it interprets that as flex: 1 1 0. If you want to only adjust an item's flex-grow, you can simply do so directly, without the shorthand.

thank you..

INTRODUCTION TO FLEXBOX

milky121 — Thu, 16 Dec 2021 10:35:13 +0000

INTRODUCTION

As we see,there are many ways to move elements around on a webpage
but FLEXBOX is a relatively new way of manipulating elements in css and when it was introduced, it was revolutionary.

           The FLEXBOX layout used today is very different what was first proposed, the CSS WORKING GROUP had proposed the idea of a flex layout in 2008 and publishing the first working draft in 2009.
           But nowadays, flexbox become the default way of positioning elements for many developers.It will be one of the most used tools in your toolbox.

FLEXBOX

It is a way to arrange items into rows or columns, where those items will flex(i.e grow or shrink)based on simple rule.

         <div class="flex-container>
            <div class="one"></div>
            <div class="two"></div>
            <div class="three></div>
       </div>

If you add another div to the HTML, inside of .flex-container, it will show up alongside the others and everything will flex to make it fit.

FLEX CONTAINERS AND FLEX ITEMS

A flex containers is any elements that has display:flex on it.
A flex item is any element that lives directly inside of a flex container.

   Somewhat confusingly, any element can be both a container and a item.

       This method of creating and nesting multiple flex, containers and items is a primary way we will be building up complex layouts.Hence FLEXBOX is a very powerful tool...

thank you...

CSS Foundations.

milky121 — Tue, 14 Dec 2021 12:01:01 +0000

CSS Foundations

CSS(cascading style sheet),so what is the use of css?.The answer of this question is we use this for style our pages,add colors i.e it's all about to make our page attractive .

But at first level,it has various rules.These rules are made up of a selector and a semi-colon separated list of declarations, with each of those declarations being made up of a property:value pair.

SELECTORS

It is a advanced way to select things instead of just looking at h1 h2 paragraph.

NOTE- 'div' this is used for making a straight blank line on you text.

Suppose, you wrote many paragraphs and you just wanted to change color of only the first paragraph so, by using 'selectors' you can easily do this.

CLASS SELECTORS

Class selectors is used when you want to add color to the single div.Don't worry we will take an example to clear all these.

  Let's move on to our first example.......

1.first of all u have to create a separate file named"styles.css"

2.use HTML elements

3.go to the style.css file

4.write".box1" now you can add background color etc etc separately into your paragraph.

IMAGES HEIGHT AND WIDTH

If you want to make your image size in your own choice you can do this by using image height and width.

    img{
   width= 50px
   height=auto
   }

EXTERNAL CSS

     It is the most common method and it involves creating a separate file for the css and linking it inside of an HTML's opening and closing tags with a self-closing <link> element.

INTERNAL CSS

  It adds css with the html file itself instead of creating a completely separate file.

INSPECTING HTML AND CSS

If you have created a webpage,then click on right button of your mouse and go to the inspect option,you can see the entire HTML structure of your page.
Something like this-

THE BOX MODEL

In this section, you will learn how to put your page where you want or at a right place.

                     It includes---

MARGIN
It is a empty space around your element.

PADDING
It is a stroke around your element.

BORDER
It is a empty space with background in your element.

BLOCK V/S INLINE

First I am going to tell you what does block means OK.

##BLOCK##

1.It always starts with a new line.
2.Always takes up the full width available.
3.It has a top and a bottom margin.

INLINE

1.It doesn't start on a new line.
2.It only takes up as much width necessary.
3.It doesn't have top and bottom margin.

thank you

WORKING WITH TEXT.

milky121 — Sun, 05 Dec 2021 13:12:02 +0000

In this summary, we will know about the text based elements you are likely to use the most.

~PARAGRAPH ELEMENT:

If you want to create paragraph in HTML, we need to use the paragraph element, which will add a newline after each of our paragraph. A paragraph element is defined by wrapping text content with

tag.

                 <html>
                   <head>
                   </head>
                  <body>
                    <p>juhueiryhuiedjkwmdxLksj</p>
                    <p>iuyhr8w3yr9ijeqkwmsqo</p>
                  </body>
                 </html>

~HEADINGS ELEMENT:

There are six different levels of heading tag represents that heading's level. h1 is the most important and is larger than the other headings,and h6 is the lowest level and therefore the smallest of the headings.
For example, to create an h1 heading, we wrap our heading text in a

tag.

     <html>
       <head>
        </head>
         <body>
           <h1>........</h1>
           <h2>........</h2>
           <h3>........</h3>
           <h4>........</h4>
           <h5>........</h5>
           <h6>........</h6>
         </body>
      </html>

~STRONG ELEMENT:

The element makes the text bold.It also marks semantically marks text as important.

       <html>
         <head>
           </head>
             <body>
               <strong> this is dev community</strong>
             </body>
       </html>

~Em Element:

This makes text italic. It also semantically place emphasis on the text, which again affects things like screen readers.

    <html>
      <head>
       </head>
         <body>
           <em>some emphasized text</em>
         </body>
   </html>

~NESTING AND INDENTATION:

When we indent any elements, that are within other elements known as nesting element.
When we nest any elements within other elements, we create a parent and child relationship between them. The nested element are the children and the elements they are nested within is the parent.

*We use indentation to make the level of nesting clear and readable for ourselves and other developers who will work with our html in the future.
It is recommended to intent any child elements by two spaces.

~HTML COMMENTS:

HTML comments are not visible to the browser; they allow us to comment on our code that so that other developers or our future selves can read them and get some context about something that might not be clear in the code.

  <html>
   <head>
    </head>
      <body>
       <h1>View the html to see the hidden comments</h1>
       <!--I am a html comment -->
       <p>yfyrgjhliuouoiujkljlkjo</p>
       <!--I am another html comment -->
    </body>
  </html


USE THESE HTML ELEMENTS AND CREATE A NEW WEBPAGE.
         THANK YOU......

HTML BOILERPLATE.

milky121 — Sat, 04 Dec 2021 15:29:01 +0000

All HTML documents have the same basic structure or boilerplate that needs to be in place before anything useful can be done.

~CREATING A HTML FILE:

first of all,create a new folder on your computer "html-boilerplate"

2.now, within folder create a new file and named "index.html"

*THE DOCTYPE:

Every html page starts with a doctype declaration.The doctype's purpose is to tell the browser what version of html it should use to render the document.
The latest verSion HTML5 and the doctype for that version is simply <!DOCTYPE html> .

Now, open the index.html file created and add <!DOCTYPE html> to the very first line.

~HTML ELEMENTS:

After studying doctype, we need to provide an elements. This becomes more important later on when we learn about manipulating HTML with javascript.
For now, just know that the HTML elements should be induced on every document.

Back in the index.html lets add the elements by typing out its opening and closing tags line.
```
            <!DOCTYPE html>
            <html>
            </html>
```

~HEAD ELEMENTS:

The

elements is where we put important meta-information about our webpages and stuffs required for our webpages to render correctly in the browser.

NOTE: Anything included within the head elements will not be displayed to the user.

~TITLE ELEMENTS:

One elements we should use always include in the head of an html document is the title element.

My FIRST WEBPAGE

~THE CHARSET META ELEMENTS:

Another important element we should always have in the head element is the meta tag for the CHARSET ENCODING OF WEBPAGE.

*Back in the index.html,let's add a head element with a title and a charset meta element within it.

                <!DOCTYPE html>
            <html>
               <head>
                 <title>My First Webpage</title>
                 <meta charset="UTF-8">
                 </head>
            </html>

~BODY ELEMENTS:

        It is the final element needed to complete the html boilerplate is the <body> element.This is where all the content that will be displayed to users will go-the text, images, lists, links etc.
           <body>
           </body>
           </html>

*Back in the index.html file , let's add a heading to the body and save the file.

                 <!DOCTYPE html>
                 <html>
                   <head>
                     <title>My First Webpage</title>
                     <meta charset="UTF-8">
                    </head>

                  <body> 
                       <h1>HELLO WORLD!</h1>
                  </body>
                 </html>

Now, finally save all of this...

~HOW TO VIEW HTML FILES IN THE BROWSER:

you can drag and drop the html file from your text editor into the address bar of your favourite browser.
you can find the html file in your file system and then double click it. This will open up the file in the default browser of your system user.
you can use the terminal to open the file in your browser.
```
         thank you..........    
```

INTRODUCTION TO HTML AND CSS.

milky121 — Thu, 02 Dec 2021 14:25:56 +0000

*HTML and CSS are two languages that work together to create everything that we see when we look at something on internet.
HTML is the raw data that a web is built out of. All the text, links, cards, lists and buttons are created in HTML.

*CSS is used to add styles to those plain elements, give it color, change the font and make it look great.

                            They are not a programming languages because they are only concerned with presenting information.
       Let's take a simple look of differences b/w HTML,CSS and JAVASCRIPT.

~HTML(Hypertext Markup Language): 1. a language that determine,how documents and web pages

are displayed.
2.controls the layout of the content.
3.provides structure for web page design.
4.the fundamental building block of any web page.

~CSS(cascading style sheet): 1.a popular style sheet language
that determines how document
created in html is styled.
2.it adds color, fonts, style to the
webpage.
~JAVASCRIPT: 1. allows us change CSS and HTML elements on our
website.
2. adds interactivity to a webpage.
3. handles complex functions and features.

                                                      thank you...........

COMMAND LINE BASICS

milky121 — Mon, 29 Nov 2021 13:49:45 +0000

The black screen or window that appear on our system is the COMMAND LINE INTERFACE(CLI),where we are able to enter commands that our computer will run for us.
Working with it is a critical skill for us to learn as a developer.

_The command line is like our base of operations, from which we can launch other program and interact with them.If you will be entering the same command dozens of time, you'll quickly pick up the commands you needs the most.

~TEST DRIVE YOUR TERMINAL

*Open a terminal on your computer linux:open the program menu and search for "TERMINAL"
*you can also open 'TERMINAL'by pressing "CTRL+ALT+T"

   BEFORE THIS TAKE A LOOK HERE---

$whoami.This is a terminal command because it begins with $.$ is saying"hey!Enter what follows in your terminal.
It means we must exclude $ when entering a command.In the above example, we would only enter "whoami"in our terminal.
Now try it out and make sure your terminal is open, type the command mentioned and press ENTER.

~WHY COMMAND LINE:

because the upcoming installations will require you to install many different program using the command line. As part of bigger picture,you may well be using command line on a daily basis as a software developer.

  Before diving into command line, let's know how to create a file.

1.Open your terminal and enter 1S, 1S will show you the file and folder.

2.Create a file called"test.txt"by entering in terminal"touch test.txt".

3.Now enter 1S once again. You should see "test.txt"listed in the output.

~NOTABLE POINTS:

You might have already noticed that copying and pasting inside the command line doesn't work.So when you are inside the command line use "CTRL+SHIFT+C" to copy and "CTRL+SHIFT+V" to paste.

2.You need to learn about TAB COMPLETION(is a common feature of command line interpreter, in which the program automatically fills in partially typed commands.
It allows the user to type the first few characters of a command, program or file name and press completion key i.e tab to fill in the rest of the item.The user then press'return' or 'enter' to run the command or open the file.
THANK YOU AND HAVE A NICE DAY...

TEXT EDITOR

milky121 — Sun, 28 Nov 2021 10:11:34 +0000

*A TEXT EDITOR is by far the most used developer tool regardless what type of developer you are.A good text editor can help you to write better code with real-time code checking, syntax highlighting and automatic formatting..

~WHY WE CAN'T USE MICROSOFT WORD?

Because Microsoft word is a rich text editors and are great for writing a paper,but the features that make them good at creating nicely formatted documents makes them unsuitable for writing the code. A document created with these editors has more than just text embedded in the file.

                   These files also contain some information to how to display the text on the screen and data on how to display graphics embedded into the document.

   On the other hand plain text editor like VS CODE and SUBLIME don't save any additional information.

*CODE EDITORS~

It is a specialized web development tools,highly customized and offer many features that will make our life easier.
Plugins,syntax highlighting,auto-closing of brackets and braces are a few benefits of using this code editor.There are many text editors to choose,bjut i suggest to start with VS CODE.
Let's know a little bit information about a VS CODE editor.

~VS CODE is a free code editor.It has outstanding add-on support and great cut integration. you can download the .deb file and install it from here https://code.visualstudio.com/
It works pretty much same on every operating system.

*Learn the basics of using this text editor by this link https://code.visualstudio.com/docs/introvideos/basics
kindly go through the link and watch this out.

                     THANK YOU AND HAVE A GREAT DAY.......

Introduction to web development

milky121 — Sat, 27 Nov 2021 09:30:45 +0000

It is the work involved in developing the website.Web development is a good profession for you because nowadays you see web developers are in high demand, and have a good life balance,have a comfortable salaries.

WEB DEVELOPERS build and maintain websites and helps the client to get their product or service onto the web.
The client could be anyone like tech company,an organisation and many more.

~ The work includes front end, back end or full stack web development.

~FRONT END: the stuff you see on the website in your browser,including the presentation of content and user interface elements like the navigation bar.It uses HTML,CSS,javasript.

~BACK END: It refers to the guts of the application which live on the server.It stores and serves program data to ensure that front end has what is needs.

~FULL STACK DEVELOPERS:It works with both the front and back end of a website or application.They can tackle projects that involve databases,building user-facing websites,or even work with clients during planning phase of projects.

*TOOLS OF THE TRADE:~
These are some of the basic tools you will use regularly
~comp
~Google
~Text editor
~Command line interface(CLI)
~Stack overflow
~Git
~Git Hub

*TYPES OF CAREER:
Large tech companies such as google, facebook and amazon if you successfully get into these you would get excellent pay,benefits and opportunities.
Startup are a bit like the wild west but when you become a master, you started enjoying in this.

As a freelancer, you could command a strong hourly wage and the freedom to schedule and design your own products

As an consultant for a web consultancy, you would give up some of your freelancing wage potential.

HOPEFULLY, YOU HAVE GAINED A BETTER IDEA OF WHAT A WEB DEVELOPER ACTUALLY DOES AND WHAT YOUR LIFE MIGHT LOOK LIKE IF YOU DECIDED TO TAKE IT ON AS A CARRIER AND THIS HAS ONLY BEEN A TEASER INTO THE WORLD OF THE WEB DEVELOPMENT.