From f4633d6dca824ed3ba65f28ff91b8b399aa235f1 Mon Sep 17 00:00:00 2001 From: zepp Date: Mon, 4 Nov 2024 21:58:57 -0500 Subject: [PATCH] Layout changes and required content added --- freecodcamp/build-a-doc-page/index.html | 90 +++++++++++ freecodcamp/build-a-doc-page/styles.css | 95 +++++++++++ freecodcamp/build-a-portfolio-page/index.html | 43 +++++ freecodcamp/build-a-portfolio-page/styles.css | 135 ++++++++++++++++ .../build-a-product-landing-page/index.html | 45 ++++++ .../build-a-product-landing-page/styles.css | 147 ++++++++++++++++++ freecodcamp/build-a-tribute-page/index.html | 33 ++++ freecodcamp/build-a-tribute-page/styles.css | 65 ++++++++ index.html | 23 +-- style/style.css | 4 + 10 files changed, 669 insertions(+), 11 deletions(-) create mode 100644 freecodcamp/build-a-doc-page/index.html create mode 100644 freecodcamp/build-a-doc-page/styles.css create mode 100644 freecodcamp/build-a-portfolio-page/index.html create mode 100644 freecodcamp/build-a-portfolio-page/styles.css create mode 100644 freecodcamp/build-a-product-landing-page/index.html create mode 100644 freecodcamp/build-a-product-landing-page/styles.css create mode 100644 freecodcamp/build-a-tribute-page/index.html create mode 100644 freecodcamp/build-a-tribute-page/styles.css diff --git a/freecodcamp/build-a-doc-page/index.html b/freecodcamp/build-a-doc-page/index.html new file mode 100644 index 0000000..5015037 --- /dev/null +++ b/freecodcamp/build-a-doc-page/index.html @@ -0,0 +1,90 @@ + + + + + + PHP Documentation + + + + + +
+
+
PHP Introduction
+

PHP is an acronym for PHP Hypertext Processor. PHP files can contain HTML, CSS, and Javascript, which are run on a web server and sent to the browser as HTML.

+ +

PHP files end in the .php file extension. + +

What is PHP?

+
    +
  • PHP is an acronym for "PHP: Hypertext Preprocessor"
    • +
  • PHP is a widely-used, open source scripting language
    • +
  • PHP scripts are executed on the server
    • +
  • PHP is free to download and use
    • +
+ +
+
+
Basic PHP Syntax
+

A PHP script can be placed anywhere in the document.

+ +

A PHP script starts with <?php and ends with ?>

+ +

A simple PHP script

+ <?php +echo "Hello World!"; +?> +
+
+
PHP Variables
+

A variable starts with the $ followed by the name of the variable

+ +

Example

+ $firtName = "Baxter"; + +

Rules for PHP Variables:

+ +
    +
  • A variable starts with the $ sign, followed by the name of the variable
    • +
  • A variable name must start with a letter or the underscore character
    • +
  • A variable name cannot start with a number
    • +
  • A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
    • +
  • Variable names are case-sensitive ($age and $AGE are two different variables)
    • +
+
+
PHP Conditional Statements
+

In PHP we have the following conditional statements. +

    +
  • if statement - executes some code if one condition is true
    • +
  • if...else statement - executes some code if a condition is true and another code if that condition is false
    • +
  • if...elseif...else statement - executes different codes for more than two conditions
    • +
  • switch statement - selects one of many blocks of code to be executed
    • + +
+
+
PHP Loops
+

In PHP we have the following loop types

+
    +
  • while - loops through a block of code as long as the specified condition is true
    • +
  • do...while - loops through a block of code once, and then repeats the loop as long as the specified condition is true
    • +
  • for - loops through a block of code a specified number of times
    • +
  • foreach - loops through a block of code for each element in an array
    • +
+
+
+
Reference
+
    +
  • The content from this page is from the w3schools PHP Tutorial + +
      +
+
+ + \ No newline at end of file diff --git a/freecodcamp/build-a-doc-page/styles.css b/freecodcamp/build-a-doc-page/styles.css new file mode 100644 index 0000000..ff82427 --- /dev/null +++ b/freecodcamp/build-a-doc-page/styles.css @@ -0,0 +1,95 @@ +html { + box-sizing: border-box; + font-size: 16px; + } + + body { + margin: 0; + height: auto; + width: 100%; + background-color: #eee; + } + + main { + margin-left: 24px; + position: relative; + width: 80%; + top: 12px; + left: 20%; + } + + section { + padding-bottom: 16px; + margin-bottom: 16px; + border-bottom: 1px solid #bbb; + } + + section:last-of-type { + border-bottom: none; + } + + section:last-of-type header { + margin-bottom: 12px; + } + + ul { + margin: 0; + } + + header { + font-size: 1.25rem; + font-weight: bold; + } + + #navbar { + height: 100%; + margin-right: 8px; + border-right: 1px solid #000; + position: fixed; + top: 0; + width: auto; + overflow: scroll; + } + + #navbar header { + padding: 12px; + border-bottom: 1px solid #000; + } + + #navbar div { + text-align: center; + padding: 8px; + border-bottom: 1px solid #000; + } + + .nav-link { + color: #000; + text-decoration: none; + } + + .nav-link:hover { + text-decoration: underline; + } + + code { + background-color: #ddd; + padding: 2px; + } + + @media(max-width: 1024px) { + #navbar { + position: relative; + width: auto; + height: 175px; + } + + #navbar header { + position: sticky; + top: 0; + background-color: #eee; + } + + main { + position: static; + } + } \ No newline at end of file diff --git a/freecodcamp/build-a-portfolio-page/index.html b/freecodcamp/build-a-portfolio-page/index.html new file mode 100644 index 0000000..aa56dd2 --- /dev/null +++ b/freecodcamp/build-a-portfolio-page/index.html @@ -0,0 +1,43 @@ + + + + + + + Portfolio Page + + + +
+

My Portfolio

+ + Welcome + Projects + Contact Me + +
+
+

Welcome to my online portfolio

+

I am an aspiring web developer looking to solve puzzles and express my creativity through writing code. I hope to help others learn as I continue to learn as well, so that we can grow together. +

+

+ Please feel free to take a look at my projects below to get a better understanding of my work

+

Feel free to get in touch if you have a question about anything I've worked on, I've listed two contact methods below

+

👋 have a great day!

+
+
+

Projects

+
+ A screenshot of the completed QR code component project from front end mentor +

QR Code Component - Frontend Mentor

+ github repo +
+
+
+

Let's get in touch!

+
+ + \ No newline at end of file diff --git a/freecodcamp/build-a-portfolio-page/styles.css b/freecodcamp/build-a-portfolio-page/styles.css new file mode 100644 index 0000000..13b455e --- /dev/null +++ b/freecodcamp/build-a-portfolio-page/styles.css @@ -0,0 +1,135 @@ +:root { + --black: #222831; + --grey: #393e46; + --blue: #0092ca; + --white: #eeeeee; + } + + *, ::before, ::after { + margin: 0; + padding: 0; + } + + body { + box-sizing: border-box; + height: 100vh; + width: 100%; + color: var(--white); + } + + html { + font-size: 16px; + } + + a { + text-decoration: none; + color: var(--white); + } + + a:hover { + text-decoration: underline; + } + + header { + padding: 0.5rem; + display: flex; + align-items: center;justify-content: space-between; + width: 100%; + position: fixed; + top: 0; + background-color: var(--black); + } + header p { + padding: 0.25rem; + } + navbar { + padding-right:1rem; + } + + navbar a { + padding: 0.25rem; + } + + #welcome-section { + padding: 3rem; + height: 100vh; + background-color: var(--blue); + } + + h1 { + padding: 1rem; + text-align: center; + } + + #welcome-section p { + line-height: 1.25rem; + padding: 1.1rem; + } + + #projects { + height: 75vh; + padding: 1rem; + padding-top: 0.5rem; + background-color: var(--grey); + } + + #projects h2 { + text-align: center; + padding: 0.5rem; + } + + .project-tile { + display: flex; + flex-direction: column; + width: 45vw; + height: auto; + padding: 1rem; + border: 1px solid var(--blue); + border-radius: 10px; + } + + .project-tile img { + max-height: 100%; + width: auto; + border-radius: 10px; + padding-bottom: 0.5rem; + } + + .project-tile p { + padding-bottom: 0.5rem; + } + + #contact { + height: 30vh; + padding: 1rem;padding-top: 0.5rem;background-color: var(--blue); + } + + #contact h2 { + padding: 0.5rem; + } + + #contact ul { + list-style-type: none; + padding: 0.5rem; + } + + #contact li { + padding: 0.25rem; + } + + @media only screen and (max-width: 768px) { + + #welcome-section { + text-align: center; + } + + #projects { + display: flex; + flex-direction: column; + align-items: center; + } + + #contact { + text-align: center; + } + } \ No newline at end of file diff --git a/freecodcamp/build-a-product-landing-page/index.html b/freecodcamp/build-a-product-landing-page/index.html new file mode 100644 index 0000000..6d04e9b --- /dev/null +++ b/freecodcamp/build-a-product-landing-page/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Cat Debugging + + + +
+ +
+

Our helpful cats help you debug any code problem!

+

Our promise

+
    +
  • Attention to detail makes a cat perfect for describing code problems to.
    • +
  • Cuddle time with an expert cat debugging specialist can allow you to solve problems in the background.
    • +
  • Soothing purrs from all our debugging specialists can help you tune out the noise of the work day.
    • +
+
+ +
+ + +
+
+ + \ No newline at end of file diff --git a/freecodcamp/build-a-product-landing-page/styles.css b/freecodcamp/build-a-product-landing-page/styles.css new file mode 100644 index 0000000..fc65a2e --- /dev/null +++ b/freecodcamp/build-a-product-landing-page/styles.css @@ -0,0 +1,147 @@ +:root { + --page-color: #393e46; + --accent-color: #f96d00; + --text-color: #f2f2f2; + } + + *, ::before, ::after { + margin: 0; + padding: 0; + } + + body { + height: 100vh; + width: auto; + background-color: var(--page-color); + color: var(--text-color); + font-family: "Quicksand", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + + } + + html { + font-size: 16px; + } + + h3 { + font-size: 1.25rem; + } + + #header { + position: sticky; + top: 0; + background-color: var(--page-color); + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + height: 5rem; + max-height: 5rem; + } + + #header p { + font-family: "Rubik", sans-serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; + } + + + #header-img { + height: 100%; + width: auto; + border-radius: 100%; + } + + #nav-bar ul { + display: flex; + list-style-type: none; + } + + #nav-bar li { + padding: 0.25rem; + } + + #nav-bar a { + text-decoration: none; + color: var(--white); + } + + #nav-bar a:hover { + text-decoration: underline; + } + + #product-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.25rem; + } + + .product-info h1 { + margin-bottom: 0.5rem; + } + + .selling-points-list { + list-style-type: none; + font-size: 1.15rem; + } + + .selling-points-list li { + margin-bottom: 0.5rem; + } + + .selling-points-list li:last-of-type { + margin-bottom: 0; + } + + #advert { + margin-top: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } + + #form { + margin-top: 1rem; + height: 20%; + width: auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } + + label[for="email"] { + font-size: 1.2rem; + } + + input[id="email"] { + width: 18rem; + } + + input[id="submit"] { + background-color: var(--accent-color); + border: 0; + border-radius: 10px; + padding: 8px; + width: 8rem; + max-width: 8rem; + font-weight: bold; + font-size: 1rem; + } + + @media only screen and (max-width: 1000px) { + #nav-bar ul { + flex-direction: column; + } + } + + @media only screen and (max-width: 400px) { + #header { + margin-bottom: 1rem + } + } \ No newline at end of file diff --git a/freecodcamp/build-a-tribute-page/index.html b/freecodcamp/build-a-tribute-page/index.html new file mode 100644 index 0000000..55b0bf9 --- /dev/null +++ b/freecodcamp/build-a-tribute-page/index.html @@ -0,0 +1,33 @@ + + + + + + A tribute to cats + + + + +
+

A tribute to the domestic cat

+
+ A male tabby cat - By Alvesgaspar - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=11390283 +
+ A male tabby cat By Alvesgaspar - Own work, CC BY-SA 3.0, Link +
+
+
+

Interesting facts about cats

+
    +
  • Domestication of the cat occurred in the Far East around 7500 BC
    • +
  • Female domestic cats often have litters of 2 to 5 kittens
    • +
  • Cats have a wide range of social communication including meows, purrs, trills, and body language
    • +
  • A cat is capable of landing on all four paws from heights of 90cm to 3m
    • +
  • Feral cats may form social colonies, but they are purely solitary hunters
    • +
  • The domestic cat was the second most popular pet in the United States in 2017
    • +
+
+

You can find more information about cats at this Wikipedia article

+
+ + \ No newline at end of file diff --git a/freecodcamp/build-a-tribute-page/styles.css b/freecodcamp/build-a-tribute-page/styles.css new file mode 100644 index 0000000..a13d5f2 --- /dev/null +++ b/freecodcamp/build-a-tribute-page/styles.css @@ -0,0 +1,65 @@ +* { + box-sizing: border-box; + } + + html { + font-size: 16px; + } + + body { + font-family: verdana, sans-serif; + margin: 0; + width: 100%; + height: 100vh; + background-color: #555758; + } + + li, p, #img-caption { + font-size: 1.1rem; + } + + #title { + text-align: center; + } + + #img-div, #tribute-info, footer { + display: flex; + flex-direction: column; + align-items: center; + } + + #img-div { + background-color:#445c7c; + margin: auto; + width: 100%; + padding-bottom: 18px; + } + + #image { + display: block; + margin-top: 36px; + width: 75%; + max-width: 100%; + height: auto; + border-radius: 10px; + } + + #img-caption { + padding-top: 12px; + } + + #title, #img-caption, a, p, h2, li{ + color: #c6ccca; + } + + a:hover { + color: #9ea0a3; + } + + ul { + list-style-type: none; + } + + li { + padding-bottom: 12px; + } \ No newline at end of file diff --git a/index.html b/index.html index 733d189..918f68f 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ and are practical and technical in nature, encouraging growth through completing challenging projects

Front End Mentor

@@ -29,11 +29,11 @@

Projects here are those completed from online courses like freeCodeCamp or The Odin Project

freeCodeCamp Responsive Web Design course

@@ -44,17 +44,18 @@

Personal small web projects

Places you can find what I'm working on

diff --git a/style/style.css b/style/style.css index bfec3ea..fe785b7 100644 --- a/style/style.css +++ b/style/style.css @@ -50,4 +50,8 @@ section { .links { list-style-type: none; +} + +li { + margin: 0.5rem; } \ No newline at end of file