Skip to content

CoderSales/WebAssignment1v3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebAssignment1v3

Description

WebAssignment1v3

Content with references

commands

$ 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


Images

HTML Images | W3Schools


Center Oversized Image in div

Failed Attempt

How to avoid overflow of a bootstrap card image in card-body?


Successful Attempt

.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


Scale Image Responsively

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


Attempt to make Bootstrap Navbar Responsive


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?


Fix Bootstrap navbar

Summary

Add JS CDN link

navbar Bootstrap

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>

Bootstrap Documentation

Add reference to Bootstrap

Bootstrap Documentation


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.


References

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:

CoderSales / WebAssignment1v3