WebAssignment1v3
$ git rm index.html --cached
filename can then be added to the .gitignore file
Google Search: stop tracking a file in git that was previously tracked
To stop tracking a file that is currently tracked | git-scm.com
git update-index --skip-worktree <file>
To cancel
git update-index --no-skip-worktree <file>
Update, a better option How do I make Git forget about a file that was tracked, but is now in .gitignore? | StackOverflow
code quote:
"workbench.colorCustomizations": {
"editorGutter.addedBackground": "#333",
"editorGutter.deletedBackground": "#333",
"editorGutter.modifiedBackground": "#333",
"editor.background": "#333",
}
modified color to match current vscode settings:
"workbench.colorCustomizations": {
"editorGutter.addedBackground": "#202020",
"editorGutter.deletedBackground": "#202020",
"editorGutter.modifiedBackground": "#202020",
"editor.background": "#202020",
}
Summary:
change background color from: #333 (light grey / black) to #202020 (darker black)
Procedure:
Settings > Search: workbench.colorCustomizations > click: edit in settings.json > paste code quote > edit colors to #202020
VSCode setting to disable git status colors in editor gutter [duplicate] | StackOVerflow
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
}
How to center cards in bootstrap 4? | StackOverflow
Select all child elements.
parentSelector > * {
// CSS Styles
}
How to select all child elements recursively using CSS? | geeks4geeks.org
@media only screen and (max-width: 460px) {
body {
background-color: white;
}
}
What is a Media Query? | W3Schools.com
On Windows OS, the forward-slash (/) wasn't working, so I switched to back-slash () and that fixed it. For example, try using the following:
"..\..\index.html"
How do I put a hyperlink to "two levels above in the directory tree"? | StackOverflow
How to avoid overflow of a bootstrap card image in card-body?
.parent {
position: relative;
overflow: hidden;
//optionally set height and width, it will depend on the rest of the styling used
}
.child {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
Center Oversized Image in Div | StackOverflow
An image can be made responsive by using CSS and setting the width of the image to be a percentage of its parent container, rather than a fixed pixel value. This way, when the size of the parent container changes (e.g. due to different screen sizes), the size of the image will also change proportionally.
img {
max-width: 100%;
height: auto;
}
How to make images responsive | Browser Stack
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarCenteredExample"
aria-controls="navbarCenteredExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div
class="collapse navbar-collapse justify-content-center"
id="navbarCenteredExample"
>
<!-- Left links -->
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
How to center Bootstrap Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Bootstrap Documentation > Navbar > Supported content
Bootstrap Navbar Active Disabled | freecodecamp.org
<div id="topheader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">home<span class="sr-only">(current)</span></a></li>
<li><a href="#page1">page 1</a></li>
<li><a href="#page2">page 2</a></li>
<li><a href="#page3">page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
</div>
#topheader .navbar-nav li > a {
text-transform: capitalize;
color: #333;
transition: background-color .2s, color .2s;
&:hover,
&:focus {
background-color: #333;
color: #fff;
}
}
#topheader .navbar-nav li.active > a {
background-color: #333;
color: #fff;
}
$( '#topheader .navbar-nav a' ).on( 'click', function () {
$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
Bootstrap Navbar Change Active Class Link [codepen.io]
How to make a .nav-link inactive?
Add JS CDN link
Add JavaScript CDN
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
How to Add HTML code unrendered
You can show HTML tags as plain text in HTML on a website or webpage by replacing < with < or &60; and > with > or &62; on each HTML tag that you want to be visible.
center bootstrap div mdbootstrap
stop tracking file How to stop tracking a file in Git?
Quantitative Research Methods - Sweeney, J.
Web Development - Ryan, C.
Intermediate Programming - Alrimawi, F.
Human Computer Interaction - Motti Ader, L.
Requirements - Richardson, I.
For GitHub Repository on which this code was developed,
Code development documented on my GitHub:
Code Developed at: