Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Bharath314 committed Aug 10, 2024
0 parents commit b9d7e05
Show file tree
Hide file tree
Showing 8 changed files with 205 additions and 0 deletions.
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# About
These are a bunch of html+css+js pages that I made to practice my vanilla javascript and css. I made this collection of projects following freeCodeCamp's [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8) course. The Guided projects section contains projects that are provided in the curriculum to introduce various html+css concepts to learners. On the other hand, the certification projects sections contain projects that I've made to pass freeCodeCamp's rigorous user stories to get through their course.

<!-- <div align="center">
[![View site - GH Pages](https://img.shields.io/badge/View_site-GH_Pages-2ea44f?style=for-the-badge)](https://bharath314.github.io/fCC-RWD/)
</div> -->
13 changes: 13 additions & 0 deletions certification/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fcc RWD - Certification Projects</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
</div>
</body>
</html>
32 changes: 32 additions & 0 deletions certification/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
body {
background-color: black;
display: flex;
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
flex-direction: column;
}

.button {
margin: 1rem;
text-align: center;
border: 1px solid white;
font-family: monospace;
font-size: 1.75rem;
}

a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
text-decoration: none;
border: 0.5rem solid transparent;
}

a:hover, .button:hover {
background-color: white;
color: black;
}
13 changes: 13 additions & 0 deletions credits.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>fCC - Responsive Web Design</title>
</head>
<body>
<div>
<h1>Credits</h1>
</body>
</html>
14 changes: 14 additions & 0 deletions guided/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fcc RWD - Guided Projects</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>

</div>
</body>
</html>
33 changes: 33 additions & 0 deletions guided/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
body {
background-color: black;
display: flex;
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 50px;
}

.button {
margin: 1rem;
text-align: center;
border: 1px solid white;
font-family: monospace;
font-size: 1.75rem;
}

a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
text-decoration: none;
border: 0.5rem solid transparent;
}

a:hover, .button:hover {
background-color: white;
color: black;
}
40 changes: 40 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>fCC - Responsive Web Design</title>
</head>
<body>
<div class="about">
<h1>fCC-JS</h1>
<p>
This is a collection of html+css+js pages that I made to practice my vanilla javascript and css.
These projects were made by following freeCodeCamp's excellent
<a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8">
Javascript Algorithms and Data Structures</a>.
The Guided projects section contains projects that are
provided in the curriculum to introduce various html+css
concepts to learners.
On the other hand, the certification projects sections
contain projects that I've made to pass freeCodeCamp's
rigorous user stories to get through their course.
</p>
</div>
<div>
<div class="button">
<a href="certification/index.html">Certification Projects</a>
</div>
<div class="button">
<a href="guided/index.html">Guided Projects</a>
</div>
<div class="button">
<a href="credits.html">Credits</a>
</div>
<div class="button">
<a href="">Repository</a>
</div>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
body {
background-color: black;
display: flex;
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-family: monospace;
}

a {
color: white;
font-weight: bolder;
}

.about {
text-align: center;
font-size: large;
}

.about p {
max-width: 720px;
padding: 10px;
}

.button {
margin: 1rem;
text-align: center;
border: 1px solid white;
font-size: 1.75rem;
}

.button a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
text-decoration: none;
border: 0.5rem solid transparent;
font-weight: normal;
}

.button a:hover, .button:hover {
background-color: white;
color: black;
}

0 comments on commit b9d7e05

Please sign in to comment.