DEV Community: Deepak Poojary

All the projects I made till date as a beginner web developer.

Deepak Poojary — Mon, 23 Nov 2020 04:29:12 +0000

Project 1: InstaFocus:

Hosted Link is here:

Tech used: html, css, bootstrap

Description:

This is a mobile responsive saas landing page

Motivation behind:

I always wanted an option on social media to turn off the feed ands stories but something like this does exists for youtube here (called feed remover)

Project 2: JS drumkit

Hosted link is here

Description

Basically allows you press a key on keyboard and plays the corresponding sound attached to the keys.

Motivation behind:

Why buy a piano when you can build your own?

Project 3: Mobile responsive personal site

Hosted link is here

Tech used: css, html

DOM basics(The why and the what)

Deepak Poojary — Sat, 14 Nov 2020 11:19:38 +0000

Note:

Please note that I am a beginner in this and I found that sharing what I learn keeps me motivated in learning to code and helps me learn better and you can read about this technique called learning in public here

If you're an expert and you did find some mistake please comment it below as they say when you point the mistake the person never forgets that😂. Also note that I will keep updating it as and when I learn new things.

Introduction

Rules: Just listen: below you will get the complete article on it then you have to teach it to somebody else.
DOM= document object model.

Know that it's built due to pain in something [[business#Pain points]] as everything else:

Okay so suppose you're on Instagram.com and it does give you personalised notifications right and instagram doesn't keep changing their websites to just help you

THis is where [[DOM]] comes into play they break your html website into objects and just change the the small object which needs to be changed.

Let's say somebody spills milk on your socks, do you change the entire dress or only the socks?

You can change the change

Every object has a property and methods.

Property: colour, nos of shoes and doors.

methods: break(), stop,

How to download or start using java Script

Inline

Inline basically means we are using opening up a html tag and basically changing the attributes of it.
<body> </body = Normal html docs

<body onload="alert('hello');" = inline boys.

Internal

Basically puting all your websites java code between the script tag like this. And this is inside the <body> tag.

<script type="text/javascript"> alert("hello"); </script>

External

<script src="index.js" charset="utf-8"></script> "

Positioning

Now where will you position or place the above code?

Unlike [CSS] you have to place this at the end after all your content is displayed cause you computer should run the elements like <h1> first before doing any changes to the behaviour.

It makes sence right you can't make the dog stand if you don't have a dog in the first place.😂

Changing text with JS

document.querySelector("input").click();

How to select any document and provide a hands off free

document.firstElementChild.lastElementChild.etc;

document.element

What are selectors

In [[CSS]] you probably know the syntax i.e
h1{color:red} here the h1 is the selector.

JavaScript for absolute beginners

Deepak Poojary — Tue, 10 Nov 2020 06:31:38 +0000

Note:

Introduction

This exists because if it didn't exist the browser has to take requests from servers which will take a lot of time so thats why they invented java script to make it local.

The difference between java and javascript is the difference between watch and watch dogs.

Essentially java script is scripting language and makes elements like <h1> to dance around or show behaviour. Consider elements to be actors and java script to be like a normal script.

Now coming to java

It's an Interpreter: Basically converts our code into binary so that the computer can understand line by line.
Eg:

javascript
python
ruby

Compiler: This does the same thing as above but all at once.

Java ([[android development]])
c and swift(iOS development)

How to use JS

Playing with it

To just start playing you can use the following shortcut key to open up the JS console.
Ctrl+ shift + J and you can start adding some JS and test it out but it get's cumbersome because it just one line execution and if you want a 2 line execution then you need to press shift+ enter everytime you do so. So here is a hack around it called snippets.

Using snippets

Click on sources and add a file called index.js and then this is like your actual JS playground. And if you want to render the code just press Ctrl + enter

Formal

Inline

External

Basically this is where connect it to another document.

<script src="index.js" charset="utf-8"></script>

This what is considered standard here.

Basics

Functions/Keywords

Alert

alert("hello"); just brings out the alert called "hello";

Prompt

This thing asks the user for their input and syntax is similiar i.e prompt("Enter your name");

Just liked this qoute so thought of inserting it:-)

A coding project should look like a single person typed it no matter how many people contributed it.
-Some website

Typeof

Basically tells what type of data it is
typeof(234); returns nos.

Data types

This is like a universal in everything so just wanted to mention briefly of all the types available so first one is string cause it's a string of character.
boolean is also a data type eg: True or False.
number is another which comprises of 123

Variable Name

This is nothing but we building a container and we can swap the values like we can swap the value of any container we have in our homes.

You only have to use var while you first construct a memory slot (you could say).

Conventions while naming JS variables

Give your variables meaningful names.
You can't start variables with nos.
Only $ and _ are the symbols allowed.
No space eg: first name not allowed
Capitallizing the subsequent word eg: firstName

Concatenation

Combining data and any data type as long there is + in there.

Letter count

Usertweet.length;

Remember

Using brackets when doing maths calcs
To store variable for using it in maths calcs.

Modular

gives remainder
using brackets to show intent.

Slicing

Syntax

varname.slice(0,140);

Length of variable

If you want to find the length of variable: Second - First number.

How does the slice work

How the slicing words is if you mention any thing let;s say name.slice(0,3);

You cut from the left of the assigned name.

a b c d
==|0 1 2 |==3 4

[[Web development for complete beginners#Reducing code|Reducing code]]

alert(prompt("Enter any tweet").slice(0,140));

Uppercase

name.toUpperCase();

Remember the brackets ()

Exercises:

Building twitter word count alert

Asking for users tweet + alert them how many charectars they have used + how many charectars are remaining.

var Tweet= prompt("Enter tweet"); var TweetCount=Tweet.length; alert("you have have entered"+ TweetCount + "you have remaining"+ (140-Tweetcount) + "remainging");

Prompt that users will enter their name in all non-caps and you need to give an alert with

First letter cap (easy)
remaining letter in anti-caps if they do it.

Answer

var Name = prompt("Enter you name"); var FirstChar= Name.slice(0,1); var FirstCharCap= FirstChar.toUpperCase(); var RestChar= Name.slice(1,Name.length); var RestCharAnti = RestChar.toLowerCase(); var complete= FirstCharCap+ RestCharAnti; alert(complete);

What I learnt this week as a web developer| Nov week 1

Deepak Poojary — Sun, 08 Nov 2020 01:07:27 +0000

Whole week just completed [[Bootstrap]] beginner module (2.5 hours)
This is what happens when you don't plan your week.
Posted this blog on dev.to
Learnt a new thing called 80/20 principle in coding and you can see this here.
learnt [Aim low principle] and please watch this video
I would highly recommend you to [[Publicize your days, weeks]] so that you get accountability and you so that you just stay grounded.

CSS Z index and stacking order

Deepak Poojary — Sat, 07 Nov 2020 04:10:54 +0000

Intro

This is kind of an advanced property in CSS and all you need to think about here is layers (as in photoshop) and them z index will be a piece of cake for you. All it is do you want a layer or element (let's say Image) to be overlapped or on top.

There is a natural flow of html meaning that elements you code first get displayed first.

Positioning

Basically you need to know what is absolute, relative and static does. How you change your position of div to absolute is by
div{ position: absolute;}

And how you change z index is like this:( inside any class you want, here z index)
z-index:1;

Note: z index property t only works when you have a position of element set to absolute.

Resources

Here is a flowchart about z index from Dr Angela Yu which is going to help you if you get stuck somehere

DEV Community: Deepak Poojary

All the projects I made till date as a beginner web developer.

Project 1: InstaFocus:

Description:

Motivation behind:

Project 2: JS drumkit

Description

Motivation behind:

Project 3: Mobile responsive personal site

DOM basics(The why and the what)

Note:

Introduction

How to download or start using java Script

Inline

Internal

External

Positioning

Changing text with JS

How to select any document and provide a hands off free

What are selectors

Popular

JavaScript for absolute beginners

Note:

Introduction

How to use JS

Playing with it

Using snippets

Formal

Inline

External

Basics

Functions/Keywords

Alert

Prompt

Typeof

Data types

Variable Name

Conventions while naming JS variables

Concatenation

Letter count

Modular

Slicing

Syntax

Length of variable

How does the slice work

[[Web development for complete beginners#Reducing code|Reducing code]]

Uppercase

Exercises:

What I learnt this week as a web developer| Nov week 1

CSS Z index and stacking order

Intro

Positioning

Resources