App That Will Help You Learn To Code(BEST)

Kunal Anand — Mon, 21 Dec 2020 13:02:02 +0000

Technology is constantly growing and with that comes new careers and opportunities. Coding is a major part of that world and it can be a vital skill. Do you have the desire to learn to code, but not sure where to start or have the means to go back to school to learn? Luckily, there are a few ways to learn to code like a pro just by using your phone.

Here is a app that will help you learn to code for beginers specially...

This was i was talking about

Udacity

coding

details
The best thing about this app is the many choices of coding you can learn. From HTML, CSS, JavaScript, Python, and other- this app offers courses taught by industry leaders from places like Google and Facebook. The app is free for many of the courses, but if you opt for the premium version of the app- you can gain access to feedback from those in their field and connect with other's learning how to code as well. This is more than a platform to learn, but it helps build a community and make connections with those interested in coding. Some of the premium courses recently released can actually teach you how to build artificial intelligence as well, but can be a bit pricey ranging from $1000-$2400 a course.

Pics-

Click on the blue text to open image

logo
dashboard
others

Why is CSS important?

Kunal Anand — Mon, 21 Dec 2020 12:22:29 +0000

BOLD:CSS is important because it allows web designers, developer, bloggers, and so forth to make our websites unique and attractive. CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc.

While in the past it was possible to add style via HTML or more simpler CSS, CSS3 has really expanded and allows for more creativity.

Ultimately, it makes our lives easier. CSS allows us to separate the presentation from the structure (HTML) into different files.

4 Important CSS Properties You Must Know

Kunal Anand — Tue, 15 Dec 2020 14:19:27 +0000

CSS can be seem to be difficult at a first glance when you’re new to it. You may be confused about the different CSS properties, what they do and what they are for. Don’t worry, I got you covered.

Have you heard of the 80/20 rule where 80% of the results come from 20% of the effort? Its the same in CSS. Which is why in this post, I’m going to talk about the most highly used CSS properties you will definitely need to know.

1: Display
Display takes on many different values, but only 4 are most commonly used.

Eg-
div {
display: block;
display: inline-block;
display: inline;
display: none;
}
block: Many HTML elements are set to this mode of display by browsers’ stylesheets. They include

. Block level elements by default take up as much space as they can, and they cannot be placed on the same horizontal line with any other display modes, include other block elements. (Exception: unless they are floated)

With block elements, you gain the ability to alter the element’s width and height to your liking, which is why they are used for layouts

inline: The inline mode wraps many HTML elements tighty around them and is the defaults for all elements that are not specified with any other display values. Elements can be placed side by side on the same line as inline elements. Think about the tag that bolds elements, the tag that creates italics and tags that allow you to link to other web pages. These are all examples of inline elements. You will not be able to change an inline element’s width and height.

inline-block: This is one display value that combines the properties of both block elements and inline elements. You get the ability to set a height and width, and the element can appear on the same horizontal line as other elements.

none: Display none hides the element from the website and it will not be shown visually. This is very useful for CSS Dropdown menus where additional options appear when you hover on navigation menus. The rationale is that elements are set to a display value of none initially, and the display value is changed to block on hover.

2: Width and Height
Width and height properties are used closely with display:block and display:inline to set the width and height of HTML elements while creating a website. Common units units for Width and Height are:

px - Pixels.
em - A unit of measurement, where 1 em = current font size.
rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
% - Percentages.
auto - highly useful unit, will explain below.
Other units of measurement can be found at the W3 Schools website. If you’re wondering about the difference between px, em and rem, check out this great article on font sizing with rem by Jonathan Snook

Extremely useful properties like max-width, min-width, max-height and min-height come into play as well when you’re making responsive websites. Here’s one example of how auto and max-width can be used to make sure images fit tightly and snugly into available space:

Eg-
img {
max-width: 100%;
height: auto;
}

3: Margin and Padding
Margins are paddings are things that will definitely appear. Knowing how these things work will be extremely beneficial when writing CSS.

Margins and Paddings dictate the spaces between elements on your website. They are very similar and have the same units as Width and Height mentioned above.

The only difference between margins and paddings is the area the exert control over. Margins affect the area outside of borders whereas paddings affect areas inside the border. It is useful to refer to the box model below:

CSS Box Model

Ordinarily, margins are written in this manner:

Eg-
div{
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px
}
They can be written in shorthand to simplify the lines of codes and make it easier to read. In fact, shorthands are the standard practice and you should know them. Here’s a quick explanation:

div{
margin: 20px 10px 20px 10px;
/* This shorthand refers to TOP, Right, Bottom, Left. Its easier to picture a clock at 12, 3, 6 and 9 respectively */

margin: 20px 10px 20px;
/* This refers to Top, Left and Right, Bottom */

margin: 20px 10px;
/* This refers to Top and Bottom, Left and Right */

margin: 20px;
/* This refers to 20px worth of margin on all 4 sides */
}
Extra tip: margins with auto on the left and right are used to center an element with a display value of block. Its written simply as:

div {
margin: 0 auto;
}
4: Border
Borders are… borders. I’m pretty sure you don’t need an explanation of what borders are.

Borders have 3 different properties that you have take care of:

border-width – width of the border. Same units as width and height
border-style – style of the border. Usual values are solid and dashed. For a complete list, take a look at W3 Schools Website
border-color – color of the border. Hex, and rgb values can be used.
Instead of writing the longer version, you could declare the border shorthand in this way:

div{
border: 1px solid black;
/* border width, style and color */
}
Likewise to margins and paddings, borders refer to all 4 sides. If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.

4: Border
Borders are… borders. I’m pretty sure you don’t need an explanation of what borders are.

Borders have 3 different properties that you have take care of:

Eg-
div{
border: 1px solid black;
/* border width, style and color */
}
Likewise to margins and paddings, borders refer to all 4 sides. If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.

DEV Community: Kunal Anand

App That Will Help You Learn To Code(BEST)

coding

coding

coding

coding

Pics-

Click on the blue text to open image

Why is CSS important?

4 Important CSS Properties You Must Know