Journey of DLithe Bootcamp .NET Full Stack Week 2(Jan31-Feb5)

Deepak Mishra

8 min readJan 31, 2022

Assignment no 9: DLithe_BC_NFS_T_Task009_GITCommands_HTMLPage

31/02/2022

Task Details:

WebPage to show the working of GIT
Step by step process:
GITHUB
GIT Commands
With screenshots of your working

WebPage to show the working of GIT

Output:

Github Repo after pushing code with commits

The web page code which has posted on Github

Step by step process:

step 1) Creating a new repo:

open terminal or vs code embed terminal over there type git — version to check the git is successfully installed or not . if not you have to check the environment variable path.

Now type first command ( git config — global user.email”your_github_account_email_id”). It will initialize the user email over git

Now type Second command ( git config — global user.name”your_username”). It will initialize the username .

step2)Configuration with Github Repo:

Now git is initialize with username and email locally .(remember the username and email you used in git it will only use as commit not as authentication with github) . whenever you do some changes it will change with that email and username mean who changed the code or conflict to the main account.

Open visual studio code :

Click on source control icon (shortcut key: ctrl+shift+g)

open the file which you have to push to the github repo

Click on the right icon and then click on push origin:

3) GIT Commands :

Git Config command

git config — global user.name “deepak”

git config — global user.email “deepak123.dm98@gmail.com”

Git init command

git init Demo

Git clone command

git clone URL

Git add command
git add*

git add Filename

git add*

Git commit command

git commit -m “ Commit Message”

git commit -a

Git status command

$ git status

Git push Command

git push [variable name] master

git push — all

Git pull command

git pull URL

Git Branch Command

git branch

Git Merge Command

git merge BranchName

Git log command

git log

Git remote command

git log -3

Github.com : https://github.com/deepaksmishra

Assignment 10: DLithe_BC_NFS_T_Task10_CSS

01/02/2022

Task Details:

Create a web page about CSS
2.Types of CSS… Show the difference between how inline,internal and external CSS are applied
3.Apply CSS for a Table
4.Use rgb,rgba,hsl,hexa color in your page
5.Show the different selectors and how they are accessed

Hii , myself Deepak Mishra in today task we’re going to build a webpage which shows multiple properties of css .

The properties are as below:

Inline Css : the style attribute inside HTML elements

Internal Css : using a <style>element in the <head>section

External Css : using a <link> element to link to an external CSS file

Selectors : id selector , class , element , universal, group

class selectors: .class Selects all elements with class=”intro”

id selectors: Selects the element with id=”firstname”

Element selectors: Selects only <p> elements with class=”intro”

Grouping Selector: Selects all <div> elements and all <p> elements

Universal Selectors: * Selects all elements

Colors:

RGBA & HSL/HSLA colors are introduced in CSS3. Till CSS2, we were using RGB colors ( red, green, blue ) only. RGB and RGBA are Screen colors and not recommended for printing. Total numbers of colors in RGB are 16 millions. But CSS3 also Supports RGBA, HSL colors and HSLA colors. HSL Stands for Hue, saturation, lightness

Output:

Github Link:

https://github.com/deepaksmishra/DLithe_Bootcamp_DeepakMishra/tree/main/css%20task

Assignment no 11: HTML Single Page website with Pseudo elements

02/02/2022

Task Details:

Requirements(SINGLE PAGE)

1. Webpage should have a heading with text properties
2. Webpage should have proper content (about HTML and CSS)
3. Use Pseudo elements for the content in your webpage.
4. Use Opacity and overflow properties in your webpage.
5. Use float properties in your web page.

What we are going to used in this task

what is Pseudo elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Opacity and overflow

The opacity property sets the opacity level for an element.The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

The float property specifies whether an element should float to the left, right, or not at all.

none :The element does not float, (will be displayed just where it occurs in the text).

left: The element floats to the left of its container

right: The element floats the right

Output of the task:

Github Code: https://github.com/deepaksmishra/DLithe_Bootcamp_DeepakMishra/tree/main/Pseudoelements

Assignment no : 12

DLithe_BC_NFS_T_Task12_MediaQueries

03/02/2022

Task Details:

Implement Media queries in your existing website.

What is media query ?

Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution. It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

output code: