Journey of DLithe Bootcamp .NET Full Stack Developer | Week 2(Jan31-Feb5)
CSS: Cascaded Style Sheets
Date: 31–01–2022
Assignment No. 9: DLithe_BC_NFS_T_Task009_GITCommands_HTMLPage
The task is to create webpage by considering below requirements
- Web Page to show the working of GIT
- Step by step process:
- GITHUB
- GIT Commands
- With screenshots of your working
Git and GitHub
Download Git for Windows
1. Browse to the official Git website: https://git-scm.com/downloads
2. Click the download link for Windows and allow the download to complete.
3. Browse to the download location (or use the download shortcut in your browser). Double-click the file to extract and launch the installer.
4. Allow the app to make changes to your device by clicking Yes on the User Account Control dialog that opens. And click on goining Next until you get Install. And now click on install.
5. Open command promt and type the below command
git — version
6. You should see the version of git installed
7. Open VS code
8. Click Terminal → New Terminal → Change Powershell to Command Promt execute below commands
git config — global user.email “email_address”
git config — global user.name “github_username”
9. Create empty folder and open it on vs code and crate a sample html file.
10. Click on “Source control button” and click on “initialize repository”
11. Stage changes by clicking “+” symbol
12. Click on right symbol and type the first commit message
13. A broser window promts and click continue and authorize the github
14. Click on “Publish Branch”
For second commit
15. Follow Step 11 and Step 12.
16. Click on “Sync Changess”
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Date: 01–02–2022
Assignment No. 10: DLithe_BC_NFS_T_Task10_CSS
The task is to Implement the webpage by satisficing the below requirements.
1.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
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
What is CSS?
CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work.
It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!.HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.With an external stylesheet file, you can change the look of an entire website by changing just one file!
Types of CSS
CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen, paper, or in other media. It saves a lot of time. It controls the layout of multiple web pages at one time. It sets the font-size, font-family, color, background color on the page.
It allows us to add effects or animations to the website. We use CSS to display animations like buttons, effects, loaders or spinners, and also animated backgrounds.
Without using CSS, the website will not look attractive. There are 3 types of CSS which are below:
- Inline CSS
- Internal / Embedded CSS
- External CSS
Inline CSS is the CSS which is written inside the HTML file. It is called as Inline CSS.
Embedded CSS is the CSS which is written inside the HTML tag. It is called as Embedded CSS.
External CSS is the CSS file which is located in another file. It is called as External CSS.
1. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element.
In the following example, we have used the inline CSS in <p/> and <h1/> tag.
Example:
2. Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page.
We can use the internal CSS by using the following steps:
1. Firstly, open the HTML page and locate the <head>
2. Put the following code after the <head>
Syntax: <style type=”text/css”>
3. Add the rules of CSS in the new line.
Example:
3. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS is more efficient method for styling a website. By editing the .css file, we can change the whole site at once.
To use the external CSS, follow the steps, given below:
1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.
Example:
Sample HTML file without styles
CSS file for the above Sample HTML file
2. Add a reference to the external .cssfile right after <title> tag in the <head> section of HTML sheet:
Syntax: <link rel=”stylesheet” type=”text/css” href=”style.css” />
CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
1. The CSS element Selector
The CSS element selector selects the HTML element(s) you want to style.
The CSS element selector is written as follows:
element-name
The element-name is the name of the HTML element you want to style.
Example:
p {
text-align: center;
color: red;
}2. The CSS class Selector
The CSS class selector selects the HTML element(s) you want to style.
The CSS class selector is written as follows:
.class-name
The class-name is the name of the class you want to style.
Example:
.class_name {
text-align: center;
color: red;
}Tag Example:
<p class=”class_name”> This is Class Selector </p>
3. The CSS ID Selector
The CSS ID selector selects the HTML element(s) you want to style.
The CSS ID selector is written as follows:
#id-name
The id-name is the name of the ID you want to style.
Example:
#id_name {
text-align: center;
color: red;
}Tag Example:
<p id=”id_name”> This is id Selector </p>
CSS Fonts
font-family: ‘Courier New’, Courier, monospace;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘Tahoma’, Geneva, sans-serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: ‘Verdana’, Geneva, sans-serif;
CSS Border
dotted — Defines a dotted border
dashed — Defines a dashed border
solid — Defines a solid border
double — Defines a double border
groove — Defines a 3D grooved border. The effect depends on the border-color value
ridge — Defines a 3D ridged border. The effect depends on the border-color value
inset — Defines a 3D inset border. The effect depends on the border-color value
outset — Defines a 3D outset border. The effect depends on the border-color value
none — Defines no border
hidden — Defines a hidden border
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Date: 02–02–2022
Assignment No. 11:DLithe_BC_NFS_T_Task11_HTMLPseudoelements
The task is to implement the webpages by satisfying all the below requirements
Requirements(SINGLE PAGE)
— — — — — — — — — — — — — —
1. Webpage should have a heading with text properties
2. Webpage should have proper content (about HTML and CSS)
3. Use Pseudoelements for the content in your webpage.
4. Use Opacity and overflow properties in your webpage.
5. Use float properties in your web page.
Pseudo-Elements
What are 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
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line pseudo-element can only be applied to block-level elements.
The following properties apply to the ::first-line pseudo-element:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
CSS Opacity
The opacity property specifies the opacity/transparency of an element.
Transparent Image:
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
Example
img {
opacity: 0.5;
}
CSS float properties
Definition and Usage
The float property specifies whether an element should float to the left, right, or not at all.
Note: Absolutely positioned elements ignore the float property!
Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
Syntax
float: none|left|right|initial|inherit;
Examples:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Date: 03–02–2022
Assignment No. 12: DLithe_BC_NFS_T_Task12_MediaQueries
The given task is to Implement Media queries in your existing website.
What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example
If the browser window is 600px or smaller, the background color will be green:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
We can check media query by
- Minimizing Maximizing browser window.
- Another method is right click on mouse and go to inspect.
Sample output images
For 600px the page background becomes green and font color as white.
For 900px the page background becomes blue and font color as white.
For Desktop the page background becomes white and font color as black.
Definition and Usage
The @media rule is used in media queries to apply different styles for different media types/devices.
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 (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
— — — — — — — — — — — — — — — — — — — — — — — —
Date: 04–02–2022
Bootstrap:
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
Written in: HTML, CSS, Less (v3), Sass (v4) and JavaScript
Initial release: August 19, 2011
Platform: Web platform
Stable release: 5.1.3 / 9 October 2021
Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No. 1 project on GitHub!
What is Bootstrap?
- Bootstrap is a free front-end framework for faster and easier web development
- Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
- Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
- Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
Why Use Bootstrap?
Advantages of Bootstrap:
- Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
- Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
- Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
- Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
Advantages of Bootstrap
1.Time-Saving
2. Easy to Use
3. Responsive Grid System
4. Customizable
5. Cross-Browser Compatibility
6. Open-Source
7. Huge Number of Resources and Community Support
Bootstrap Versions
This tutorial follows Bootstrap 3, which was released in 2013. However, we also cover newer versions; Bootstrap 4 (released 2018) and Bootstrap 5 (released 2021).
Bootstrap 5 is the newest version of Bootstrap; with new components, faster stylesheets, more responsiveness etc. It supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery.
Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them.
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
- Download Bootstrap from getbootstrap.com
- Include Bootstrap from a CDN
Bootstrap CDN
If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery
Bootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don’t need jQuery.
Installation
Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
npm install bootstrapgem install bootstrap -v 5.1.3
jsDelivr
When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr.
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Bootstrap Icons
For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
Official Themes
Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace.
Assignment No. 13: DLithe_BC_NFS_T_Task13_Bootstrap
The given task is to implement webpages as per the below requirements
1. Responsive Nav bar
2. Container and jumbotron
3. Grid system
4. Bootstrap buttons
5. Glyphicons
1. Responsive Nav bar
A navigation bar is a navigation header that is placed at the top of the page.
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
Sample output images:
2. Container and jumbotron
Containers
You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.
Containers are used to pad the content inside of them, and there are two container classes available:
- The .container class provides a responsive fixed width container
- The .container-fluid class provides a full width container, spanning the entire width of the viewport
Fluid Container
Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%)
Jumbotron
A jumbotron indicates a big grey box for calling extra attention to some special content or information.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
3. Grid system
Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
4. Bootstrap buttons:
Basic Default Primary Success Info Warning Danger Link
To achieve the button styles above, Bootstrap has the following classes:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
5. Glyphicons
Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.Use glyphicons in text, buttons, toolbars, navigation, or forms
Source Code:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Date: 04–02–2022
The day started with interchanging thoughts with Arun sir and Pallavi Katari mam. First I explained my interest and also my village. Basically I’m from malenadu i.e., Shivamogga. Arun sir asked a question why it is called “malenadu”. I explained that sir Shivamogga consist lot of western ghats
Assignment No. 14: DLithe_BC_NFS_T_Task14_WebDesigning
The given task is to implement webpages as per the below requirements
1.Responsive Navbar with Login Form
2.Image Carousel
3.Table
4.Video Element
5.Glyphicons
6.Transition and Transformation
The sample output images:
The given task is to completed within an hour. I completed this task in 55min. here I used bootstrap layouts. And also I added some customization. After that I started designing the login page. The sample output of login page here:
The above task is hosted on GitHub with live. Everyone can look this site by clicking the following link https://charanhu.github.io/DLithe_BC_NFS_05_02_2022_Charana_H_U/index.html
You can access the code of this site here
Today I received swags from DLithe team. I extend my thanks to Arun sir, Shreedhar Moorthy sir, Pallavi Katari mam and entire DLithe team.
