From b0140807a3e8f3b1aa4395aac0b32a794dfda36a Mon Sep 17 00:00:00 2001 From: osagiestar Date: Sun, 10 May 2020 06:43:08 +0100 Subject: [PATCH 01/31] added more on html and css --- week1/3-website/css/style.css | 11 ++++++++ week1/3-website/index.html | 52 +++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..88d61d86 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -6,3 +6,14 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + #header { + color: white; + background-color: brown; + +.container{ + background-color: green; +} + +h1 { + color: blue; +} \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..8c4e31d0 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -16,6 +16,58 @@ +
+ +

My Coding Journey Blog

+ My story, my life, my journey is like a curve mixed with some highs and lows. +
+ + +

Navigation

+
+

Introduction: Pre-Bootcamp

+

I have always desired to move into the tech world fully but it hasn't fully materialised. + My quest for develoing things lead me to attend a few paid trainings but the focus always + shifted for a couple of reasons including lack of direction and no support. No mentor, no + proper structure of learning, no road path for personal development. My passion meant I + followed a few trainers on YouTube and I end up jumping from one language to another trying + to a Jack-of-all trade.

+
+ +
+

CYF Bootcamp

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere vitae numquam non + magni eos id a iure, incidunt officia maxime earum, esse totam eius quaerat! Eum architecto + quia earum.

+ +

+
+
+

CYF Drop-in Sessions

+

Starting off with a taste of coding for the first time was quite daunting. With a hands-on + training approach using best platforms particularly FreeCodeCamp began my leap into my life long + goal. My first web site "Product Landing Page" was interesting as I could see the outcome of my + hardwork on the CodePen editor displayed on the web browser. This first project was closely followed by another web page "A Tribute Page" +

+
+ +
+

CYF Fundamentals

+

Introduction to Programming

+
+ +
+

Full Stack Web Development

+
+ + + + +
From 5accfa5a26b59c5a0db42985979cede0b076e859 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Sun, 10 May 2020 06:49:29 +0100 Subject: [PATCH 02/31] more info added --- week1/3-website/index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 8c4e31d0..f71d928a 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -47,20 +47,26 @@

CYF Drop-in Sessions

Starting off with a taste of coding for the first time was quite daunting. With a hands-on training approach using best platforms particularly FreeCodeCamp began my leap into my life long goal. My first web site "Product Landing Page" was interesting as I could see the outcome of my - hardwork on the CodePen editor displayed on the web browser. This first project was closely followed by another web page "A Tribute Page" + hardwork on the CodePen editor displayed on the web browser. This first project was closely followed + by another web page "A Tribute Page"

CYF Fundamentals

Introduction to Programming

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo dolor eaque unde eligendi ipsum + provident? Eum aut provident, maiores debitis soluta dignissimos velit modi, aspernatur veritatis aperiam omnis, corporis assumenda?

Full Stack Web Development

+

L/p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio laborum quos inventore + facilis numquam, ipsam, asperiores adipisci ex nihil officia repellendus illum sint velit + culpa hic, doloremque sed vero eaque.

+
- + - - - + \ No newline at end of file From 5de98c84834505fc74adb1ade3ecaba542a0be5e Mon Sep 17 00:00:00 2001 From: osagiestar Date: Wed, 13 May 2020 05:50:42 +0100 Subject: [PATCH 16/31] alighning the box-shadows and related paragraphs --- week1/3-website/css/style.css | 6 +++--- week1/3-website/index.html | 8 +++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index a8610c1c..a388f031 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -28,14 +28,14 @@ .container { background-color: #aa8d39; width: 100%; - height: 1300px; + height: 1500px; margin-top: 0px; padding: 5px 0px 5px; } .prelim { margin-top: 0px; - margin-bottom: 80px; + float: left; } @@ -58,7 +58,7 @@ box-shadow: 5px 10px 5px black; border-radius: 10px; text-align: center; - margin: 50px 0px 0px 190px; + margin: 50px 30px 0px 190px; padding: 30px; } diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 8c039d50..73cd9bce 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -42,12 +42,12 @@

Pre-Selection

shifted away for a couple of reasons including lack of direction and no support. My passion meant I followed a few trainers on YouTube but I self learning is always going to be a challenge.

-

But then I was pretty fortunate to have my wife's friend, a Software Developer, introducing to Code Your Furure Bootcamp.

+

But then I was pretty fortunate to have my wife's friend, a Software Developer, introduce me to Code Your Furure Bootcamp.

-
+

Drop-in Sessions

The eight-month course covers:

@@ -60,7 +60,9 @@

Drop-in Sessions

training approach using best platforms particularly FreeCodeCamp began my leap into my life long goal. My first web site "Product Landing Page" was interesting as I could see the outcome of my hardwork on the CodePen editor displayed on the web browser. This first project was closely followed - by another web page "A Tribute Page"

+ by another web page "A Tribute Page" +

+
From f3f8d51e26da1995137f872f14836d46b068179f Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 14 May 2020 05:03:23 +0100 Subject: [PATCH 17/31] complete retructuring and styling of blog --- week1/3-website/css/style.css | 101 ++++++++++++-------- week1/3-website/index.html | 169 +++++++++++++++------------------- 2 files changed, 135 insertions(+), 135 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index a388f031..96fd1764 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,7 +1,8 @@ .topic { font-size: 2em; text-align: center; - color: #d4b16a; + color:white; + background-color: #d4b16a; } .nav { @@ -14,10 +15,10 @@ text-align: center; position: flexible; top: 0; - font-size: 20px; - padding: 30px; + font-size: 25px; + padding: 0px; margin-bottom: 0px; -} + } .link { color: darkblue; @@ -28,50 +29,36 @@ .container { background-color: #aa8d39; width: 100%; - height: 1500px; - margin-top: 0px; + height: 1900px; + margin: 50px 50px 0px, 150px; padding: 5px 0px 5px; + border-color: magenta; } -.prelim { - margin-top: 0px; - - float: left; -} - -.coursestart { - margin-top: 100px; - margin-bottom: 80px; - float: left; -} - -.drop-in, .full{ - margin-top: 0px; - float: right; +.pre > h2 { + text-decoration: underline; + margin: 60px; } -.prelim, .coursestart{ - background-color: #ffe9aa; - box-sizing: border-box; - width: 500px; - height: 300px; - box-shadow: 5px 10px 5px black; +img { + float:left; + width: 150px; + height: 150px; border-radius: 10px; - text-align: center; - margin: 50px 30px 0px 190px; - padding: 30px; -} + border: 5px solid rgb(133, 79, 79); + margin: 10px; + } -.drop-in, .full { +.prelim, .coursestart, .drop-in, .full{ background-color: #ffe9aa; box-sizing: border-box; - width: 500px; + width: 900px; height: 300px; box-shadow: 5px 10px 5px black; border-radius: 10px; text-align: center; - margin: 50px 0px 0px 190px; padding: 30px; + margin: 10px 30px 20px 280px; } #intro { @@ -83,15 +70,42 @@ float: right; } -p, -li { - margin-top: 10px; +.pre p, .start > p { + margin-top: 60px; margin-bottom: 10px; margin-right: 200px; - margin-left: 200px; + margin-left: 300px; text-align: justify; color: white; + font-size: 20px; +} + +/*.drop > p { + margin-top: 40px; + margin-bottom: 10px; + margin-right: 400px; + margin-left: 20px; + text-align: left; + color: white; font-size: 18px; + float: left; +} +*/ + +a[href*="Intro"] { + background-color: rgb(189, 238, 144); +} + +h2 ~ ul { +font-size: 20px; +} + +h3 ~ ol { + text-align: right; +} + +.drop-in ul:nth-child(2){ +font-style: italic; } h1, @@ -118,8 +132,15 @@ ul li:nth-child(3n) { text-shadow: 2px 1px rgb(119, 112, 70); } - - a:hover { color: green; } + +#footer { + background-color: lightpink; + box-sizing: border-box; + width: 700px; + height: 50px; + box-shadow: 5px 10px 5px black; + margin: auto; +} \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 73cd9bce..67f6639c 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -9,105 +9,84 @@ -
My Coding Journey Blog -
+
+
+

My Coding Journey Blog

+ + +
+
+

Tech Passion and Quest

+

Profile picture Welcome to my first ever blog! Yay!!! Well, I have always had a passion for technology. + My quest for developing my skills prompted me to attend a few paid trainings. But with no mentor, no + proper structure of learning, no road map for personal development, my focus always + shifted away for a couple of reasons including lack of direction and no support. My passion meant I + followed a few trainers on YouTube but I self learning is always going to be a challenge. + But then I was pretty fortunate to have my wife's friend, a Software Developer, introduced me to Code Your + Furure Bootcamp.
+ So below is a summary of the study path so far and the journey ahead. Hope you have fun!!! +

+ +
- -
- -
-
-

Pre-Bootcamp

-

Pre-Selection

- First I completed basic tutorials on: -

- HTML using SoloLearn App

- CSS tutorial on SoloLearn

-

-

-
-

-

I have always had a passion for technology. - My quest for developing my skills prompted me to attend a few paid trainings. But with no mentor, no - proper structure of learning, no road map for personal development, my focus always - shifted away for a couple of reasons including lack of direction and no support. My passion meant I - followed a few trainers on YouTube but I self learning is always going to be a challenge. -

-

But then I was pretty fortunate to have my wife's friend, a Software Developer, introduce me to Code Your Furure Bootcamp.

- -

- -
-
-

Drop-in Sessions

- The eight-month course covers: -

- CSS

- JavaScript

- Front-end development using React

- Back-end development using NodeJS

+
+
+

Drop-in Sessions

+

A meet-up to build on basics skills on;

+
    +
  • HTML using FreeCodeCamp
    • +
  • CSS using FreeCodeCamp
    • +
      +

      Projects:

      +
        +
      1. Product Landing Page
        2. +
      2. Tribute page
        3. +
      +
+
-

Starting off with a taste of coding for the first time was quite daunting. With a hands-on - training approach using best platforms particularly FreeCodeCamp began my leap into my life long - goal. My first web site "Product Landing Page" was interesting as I could see the outcome of my - hardwork on the CodePen editor displayed on the web browser. This first project was closely followed - by another web page "A Tribute Page" -

-
+
+
+

Fundamentals

+

Introduction to Programming

+
    +
  • Algorithm learning on Code.org
    • +
  • Basic JavaScript using ProcessingJS
    • +
  • Learning How to Learn - Coursera PD Tutorials
    • +
+ +
-
-
-

Fundamentals

- The eight-month course covers: -

- CSS

- JavaScript

- Front-end development using React

- Back-end development using NodeJS

- - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere vitae numquam non - magni eos id a iure, incidunt officia maxime earum, esse totam eius quaerat! Eum architecto - quia earum. - +
+
+

Full Stack Web Development

+

The eight-month course covers:

+
    +
  • CSS
    • +
  • HTML
  • +
  • JavaScript
    • +
  • Front-end devel opment using React
    • +
  • Back-end development using NodeJS
    • +
- -

Introduction to Programming

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo dolor eaque unde eligendi ipsum - provident? Eum aut provident, maiores debitis soluta dignissimos velit modi, aspernatur veritatis aperiam - omnis, corporis assumenda?

-
- -
-
-

Full Stack Web Development

- The eight-month course covers: -

- CSS

- JavaScript

- Front-end development using React

- Back-end development using NodeJS

- -
- -

The above is complemented with workshops on modern software methodologies and job interview practices.

-

- -
- - - + +
+

© Osagiestar 2020 CYF Birminghamm

+
+
+ \ No newline at end of file From 8155d30409a54e23ecd5c09895dcfbb1c3c953bb Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 14 May 2020 05:50:36 +0100 Subject: [PATCH 18/31] setting in order the contents of the box-shadows --- week1/3-website/css/style.css | 21 +++++++-------------- week1/3-website/index.html | 19 ++++++++++--------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 96fd1764..b1d4aeec 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -70,7 +70,7 @@ img { float: right; } -.pre p, .start > p { +.pre > p, .drop> p { margin-top: 60px; margin-bottom: 10px; margin-right: 200px; @@ -80,17 +80,11 @@ img { font-size: 20px; } -/*.drop > p { - margin-top: 40px; - margin-bottom: 10px; - margin-right: 400px; - margin-left: 20px; - text-align: left; - color: white; - font-size: 18px; - float: left; +.drop > p { + margin-top: 0px; + margin-bottom: 0px; + color: burlywood; } -*/ a[href*="Intro"] { background-color: rgb(189, 238, 144); @@ -114,9 +108,6 @@ h2 { color: rgb(123, 230, 116); } -p:first-child { - text-decoration: khaki; -} h3 { text-align: center; @@ -143,4 +134,6 @@ a:hover { height: 50px; box-shadow: 5px 10px 5px black; margin: auto; + text-align: center; + vertical-align: middle; } \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67f6639c..a787efa0 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -23,22 +23,23 @@

My Coding Journey Blog

Tech Passion and Quest

Profile picture Welcome to my first ever blog! Yay!!! Well, I have always had a passion for technology. + alt="Profile picture"> Welcome to my first blog ever! Yay!!! Well, I have always had a passion for technology. My quest for developing my skills prompted me to attend a few paid trainings. But with no mentor, no proper structure of learning, no road map for personal development, my focus always shifted away for a couple of reasons including lack of direction and no support. My passion meant I followed a few trainers on YouTube but I self learning is always going to be a challenge. But then I was pretty fortunate to have my wife's friend, a Software Developer, introduced me to Code Your Furure Bootcamp.
- So below is a summary of the study path so far and the journey ahead. Hope you have fun!!! + So, below is a summary of the study path so far and the journey ahead. Hope you have fun!!!

Pre-Bootcamp

Pre-Selection

- First; completion of the basic tutorials on: - - HTML using SoloLearn App - CSS tutorial on SoloLearn App +

First; was the completion of the basic tutorials on: +
    +
  • HTML using SoloLearn App
    • +
  • CSS tutorial on SoloLearn App
    • +

@@ -76,10 +77,10 @@

Introduction to Programming

Full Stack Web Development

The eight-month course covers:

    -
  • CSS
    • -
  • HTML
  • +
  • Advanced HTML
    • +
  • Advanced CSS
  • JavaScript
    • -
  • Front-end devel opment using React
    • +
  • Front-end development using ReactJS
    • opment using React
  • Back-end development using NodeJS
From a40b4eae707fb8643e2adcb73aded051835e0899 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 14 May 2020 05:59:40 +0100 Subject: [PATCH 19/31] max-width and height added on profile pic --- week1/3-website/css/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index b1d4aeec..684e92d8 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -47,6 +47,8 @@ img { border-radius: 10px; border: 5px solid rgb(133, 79, 79); margin: 10px; + max-width: 100%; + height:auto; } .prelim, .coursestart, .drop-in, .full{ From 7108015ceaca93d548f47ed8b7996510c5f4fb89 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 14 May 2020 19:52:40 +0100 Subject: [PATCH 20/31] added social media links --- week1/3-website/css/style.css | 88 +++++++++++++++++------------------ week1/3-website/index.html | 22 ++++++--- 2 files changed, 58 insertions(+), 52 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 684e92d8..f1ded619 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,3 +1,12 @@ +.container { + background-color: #aa8d39; + width: 100%; + height: 1900px; + margin: 50px 50px 0px, 150px; + padding: 5px 0px 5px; + border-color: magenta; +} + .topic { font-size: 2em; text-align: center; @@ -21,20 +30,11 @@ } .link { - color: darkblue; + color: rgb(77, 13, 52); text-align: center; margin: 75px; } -.container { - background-color: #aa8d39; - width: 100%; - height: 1900px; - margin: 50px 50px 0px, 150px; - padding: 5px 0px 5px; - border-color: magenta; -} - .pre > h2 { text-decoration: underline; margin: 60px; @@ -46,15 +46,38 @@ img { height: 150px; border-radius: 10px; border: 5px solid rgb(133, 79, 79); - margin: 10px; + margin: 30px; max-width: 100%; height:auto; } +.social { + padding: 0px; + margin-right: 0px; + position: absolute; + top: 25%; +} + +.social li { + list-style-type: none; + padding: 20px; + transition: .6s; + color: white; + position: relative; +} + +.social li i { + font-size: 40px; +} + +.social li:hover { + padding: 20px 40px; +} + .prelim, .coursestart, .drop-in, .full{ background-color: #ffe9aa; box-sizing: border-box; - width: 900px; + width: 1000px; height: 300px; box-shadow: 5px 10px 5px black; border-radius: 10px; @@ -63,16 +86,11 @@ img { margin: 10px 30px 20px 280px; } -#intro { - margin-top: 0px; -} - -#text{ - color: white; - float: right; +a[href*="Intro"] { + background-color: rgb(189, 238, 144); } -.pre > p, .drop> p { +.pre > p { margin-top: 60px; margin-bottom: 10px; margin-right: 200px; @@ -82,47 +100,25 @@ img { font-size: 20px; } -.drop > p { - margin-top: 0px; - margin-bottom: 0px; - color: burlywood; -} - -a[href*="Intro"] { - background-color: rgb(189, 238, 144); -} - -h2 ~ ul { -font-size: 20px; -} - -h3 ~ ol { - text-align: right; -} - -.drop-in ul:nth-child(2){ -font-style: italic; -} - h1, h2 { text-align: center; color: rgb(123, 230, 116); } - h3 { text-align: center; color: rgb(16, 23, 48); } ul { - margin: 10px 10px 20px 20px; + margin: 0px; text-align: left; + font-size: 20px; } -ul li:nth-child(3n) { - text-shadow: 2px 1px rgb(119, 112, 70); +ol { + font-style: italic; } a:hover { diff --git a/week1/3-website/index.html b/week1/3-website/index.html index a787efa0..7a963d5e 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -8,6 +8,7 @@ +
@@ -32,17 +33,26 @@

Tech Passion and Quest

Furure Bootcamp.
So, below is a summary of the study path so far and the journey ahead. Hope you have fun!!!

+ + +

Pre-Bootcamp

Pre-Selection

-

First; was the completion of the basic tutorials on: +

First; was the completion of the basic tutorials on:

  • HTML using SoloLearn App
  • CSS tutorial on SoloLearn App
-

Drop-in Sessions

@@ -51,14 +61,13 @@

A meet-up to build on basics skills on;

  • HTML using FreeCodeCamp
  • CSS using FreeCodeCamp
      • -

      Projects:

      +

      Projects:

      1. Product Landing Page
      2. Tribute page
    -

    Fundamentals

    @@ -80,13 +89,14 @@

    The eight-month course covers:

  • Advanced HTML
  • Advanced CSS
  • JavaScript
    • -
  • Front-end development using ReactJS
    • opment using React +
  • Front-end development using ReactJS
  • Back-end development using NodeJS
    • +
    -

    © Osagiestar 2020 CYF Birminghamm

    +

    © Osagiestar 2020 CYF Birmingham

    From c5fe22b964834538ca8e854ce118f4f317393962 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Fri, 15 May 2020 00:48:17 +0100 Subject: [PATCH 21/31] debugging --- week1/3-website/css/style.css | 51 ++++++++++++++++++++++++++++------- week1/3-website/index.html | 17 +++++++----- 2 files changed, 52 insertions(+), 16 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index f1ded619..67a7117f 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,7 +1,11 @@ +body { + font-family: "Roboto", sans-serif; +} + .container { background-color: #aa8d39; width: 100%; - height: 1900px; + height: 2100px; margin: 50px 50px 0px, 150px; padding: 5px 0px 5px; border-color: magenta; @@ -32,7 +36,7 @@ .link { color: rgb(77, 13, 52); text-align: center; - margin: 75px; + margin: 60px; } .pre > h2 { @@ -40,17 +44,28 @@ margin: 60px; } -img { - float:left; +.solo, .codepen { + float:right; width: 150px; height: 150px; border-radius: 10px; border: 5px solid rgb(133, 79, 79); - margin: 30px; + margin-bottom: 60px; + margin-right: 60px; max-width: 100%; height:auto; } + .profile-image { + width: 150px; + height: 150px; + float:left; + border-radius: 10px; + border: 5px solid rgb(133, 79, 79); + margin: 30px; + height:auto; + } + .social { padding: 0px; margin-right: 0px; @@ -78,11 +93,11 @@ img { background-color: #ffe9aa; box-sizing: border-box; width: 1000px; - height: 300px; + height: 350px; box-shadow: 5px 10px 5px black; border-radius: 10px; text-align: center; - padding: 30px; + padding: 10px; margin: 10px 30px 20px 280px; } @@ -100,25 +115,41 @@ a[href*="Intro"] { font-size: 20px; } +.link-image{ + vertical-align: right; +} + + h1, h2 { text-align: center; - color: rgb(123, 230, 116); + color: rgb(47, 233, 34); } h3 { text-align: center; color: rgb(16, 23, 48); + font-weight: 1200; } ul { margin: 0px; text-align: left; - font-size: 20px; + font-size: 22px; + list-style: none; } ol { - font-style: italic; + list-style: none; + font-size: 20px; +} + +.weblink{ + text-align: justify; +} + +.fulldev li:nth-child(2) { + color: rgb(212, 151, 27); } a:hover { diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 7a963d5e..dc8c5756 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -12,7 +12,7 @@
    -

    My Coding Journey Blog

    +

    My Coding Brag Blog

    Tech Passion and Quest

    -

    Profile picture Welcome to my first blog ever! Yay!!! Well, I have always had a passion for technology. My quest for developing my skills prompted me to attend a few paid trainings. But with no mentor, no proper structure of learning, no road map for personal development, my focus always @@ -51,6 +51,7 @@

    First; was the completion of the basic tutorials on:

  • HTML using SoloLearn App
  • CSS tutorial on SoloLearn App
    • + Sololearn logo
    @@ -60,8 +61,10 @@

    A meet-up to build on basics skills on;

    • HTML using FreeCodeCamp
    • CSS using FreeCodeCamp
      • -
        -

        Projects:

        +
      + This is FreeCodeCamp link + Codepen logo +

      Projects:

      1. Product Landing Page
      2. Tribute page
        3. @@ -76,7 +79,8 @@

        Introduction to Programming

      3. Algorithm learning on Code.org
      4. Basic JavaScript using ProcessingJS
      5. Learning How to Learn - Coursera PD Tutorials
        6. -
          +
        + This is my Khan Academy link
    @@ -87,11 +91,12 @@

    Full Stack Web Development

    The eight-month course covers:

    • Advanced HTML
      • -
    • Advanced CSS
      • +
    • Advanced CSS (this is where we are at the time of this blog)
    • JavaScript
    • Front-end development using ReactJS
    • Back-end development using NodeJS
    + This is my Github link From 7eeabb1c46658d1cb6a6caf9377be553fb05c15e Mon Sep 17 00:00:00 2001 From: osagiestar Date: Fri, 15 May 2020 03:20:11 +0100 Subject: [PATCH 22/31] added logos and links --- week1/3-website/css/style.css | 5 +++-- week1/3-website/index.html | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 67a7117f..ad671152 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -44,14 +44,15 @@ body { margin: 60px; } -.solo, .codepen { +.solo, .codepen, .codeorg { float:right; width: 150px; height: 150px; border-radius: 10px; border: 5px solid rgb(133, 79, 79); - margin-bottom: 60px; + margin-bottom: 10px; margin-right: 60px; + margin-top: 0px; max-width: 100%; height:auto; } diff --git a/week1/3-website/index.html b/week1/3-website/index.html index dc8c5756..251d89ac 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -51,18 +51,19 @@

    First; was the completion of the basic tutorials on:

  • HTML using SoloLearn App
  • CSS tutorial on SoloLearn App
    • + This is SoloLearn link
    Sololearn logo
    From e47666640c7f3573b382d3c6dba7b155646dbfd0 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Fri, 15 May 2020 04:14:42 +0100 Subject: [PATCH 23/31] aligning the logos --- week1/3-website/css/style.css | 31 ++++++++++++++++++++++--------- week1/3-website/index.html | 8 ++++++-- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index ad671152..eda64d4d 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -44,29 +44,42 @@ body { margin: 60px; } -.solo, .codepen, .codeorg { - float:right; +.profile-image { width: 150px; height: 150px; + float:left; border-radius: 10px; border: 5px solid rgb(133, 79, 79); - margin-bottom: 10px; - margin-right: 60px; - margin-top: 0px; - max-width: 100%; + margin: 30px; height:auto; } - .profile-image { + .solo, .codepen, .codeorg, .capgemini { width: 150px; height: 150px; - float:left; border-radius: 10px; border: 5px solid rgb(133, 79, 79); - margin: 30px; + margin-bottom: 10px; + margin-right: 60px; + margin-top: 0px; + max-width: 100%; height:auto; + float:right; } + .cyf_logo { + width: 100px; + height:75px; + border-radius: 5px; + border: 5px rgb(34, 24, 24); + margin-bottom: 30px; + margin-right: 110px; + margin-top: 5px; + max-width: 100%; + height:auto; + float: right; +} + .social { padding: 0px; margin-right: 0px; diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 251d89ac..1014b9a7 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -90,6 +90,8 @@

    Introduction to Programming

    Full Stack Web Development

    The eight-month course covers:

    + Capgemini logo +
    • Advanced HTML
    • Advanced CSS (this is where we are at the time of this blog)
      • @@ -97,12 +99,14 @@

      The eight-month course covers:

    • Front-end development using ReactJS
    • Back-end development using NodeJS
    - This is my Github link + This is my Github link
    -

    © Osagiestar 2020 CYF Birmingham

    + +

    © Osagiestar 2020 CYF Birmingham

    +
    From 55e77892944cc40e6180babd55aaf499ac28065e Mon Sep 17 00:00:00 2001 From: osagiestar Date: Fri, 15 May 2020 08:22:42 +0100 Subject: [PATCH 24/31] adding CSS comments --- week1/3-website/css/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index eda64d4d..bec18c13 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -18,6 +18,7 @@ body { background-color: #d4b16a; } +/*the links for the menu*/ .nav { color: white; background-color: rgb(197, 145, 40); @@ -39,6 +40,7 @@ body { margin: 60px; } +/*targets the heading child tag*/ .pre > h2 { text-decoration: underline; margin: 60px; @@ -54,6 +56,7 @@ body { height:auto; } + /*group class code for logos*/ .solo, .codepen, .codeorg, .capgemini { width: 150px; height: 150px; @@ -80,6 +83,7 @@ body { float: right; } +/*handles the social media links*/ .social { padding: 0px; margin-right: 0px; @@ -99,10 +103,12 @@ body { font-size: 40px; } +/*allows change of color on hover event*/ .social li:hover { padding: 20px 40px; } +/*grouped code for all boxes*/ .prelim, .coursestart, .drop-in, .full{ background-color: #ffe9aa; box-sizing: border-box; @@ -115,10 +121,12 @@ body { margin: 10px 30px 20px 280px; } +/*targets only the Pre-Bootcamp menu link*/ a[href*="Intro"] { background-color: rgb(189, 238, 144); } +/*selects the paragraph only as direct child*/ .pre > p { margin-top: 60px; margin-bottom: 10px; @@ -158,14 +166,17 @@ ol { font-size: 20px; } +/*link to all the url on the boxes*/ .weblink{ text-align: justify; } +/*selects and styles the second on the list*/ .fulldev li:nth-child(2) { color: rgb(212, 151, 27); } +/*for the href links*/ a:hover { color: green; } From 8d14661abe12fb79963929186d066cf697ea4e16 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Fri, 15 May 2020 08:29:45 +0100 Subject: [PATCH 25/31] tidying up CSS codes --- week1/3-website/css/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index bec18c13..dfc9d430 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -137,10 +137,9 @@ a[href*="Intro"] { font-size: 20px; } -.link-image{ +/*.link-image{ vertical-align: right; -} - +}*/ h1, h2 { From 7f4bd2870055d41447016f4b5c195398af60e2a0 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 05:18:22 +0100 Subject: [PATCH 26/31] applied a class 'course' to target all the boxes --- week1/3-website/css/style.css | 2 +- week1/3-website/index.html | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index dfc9d430..81674c31 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -109,7 +109,7 @@ body { } /*grouped code for all boxes*/ -.prelim, .coursestart, .drop-in, .full{ +.course{ background-color: #ffe9aa; box-sizing: border-box; width: 1000px; diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 1014b9a7..eff84a3f 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -36,14 +36,14 @@

    Tech Passion and Quest

    -
    -
    +
    +

    Pre-Bootcamp

    Pre-Selection

    First; was the completion of the basic tutorials on:

    @@ -55,8 +55,8 @@

    First; was the completion of the basic tutorials on:

    Sololearn logo
    -
    -
    +
    +

    Drop-in Sessions

    Meet-ups to build on basics skills on;

      @@ -72,8 +72,8 @@

      Projects:

    -
    -
    +
    +

    Fundamentals

    Introduction to Programming

    Code.org logo @@ -86,8 +86,8 @@

    Introduction to Programming

    -
    -
    +
    +

    Full Stack Web Development

    The eight-month course covers:

    Capgemini logo From 1855ecda98264522e12f4a581d9e6774ba4b0584 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 05:31:24 +0100 Subject: [PATCH 27/31] applied text descriptions to the HTML file --- week1/3-website/css/style.css | 4 ++-- week1/3-website/index.html | 27 +++++++++++++++++++-------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 81674c31..31f888b0 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -34,7 +34,7 @@ body { margin-bottom: 0px; } -.link { +.internal-link { color: rgb(77, 13, 52); text-align: center; margin: 60px; @@ -166,7 +166,7 @@ ol { } /*link to all the url on the boxes*/ -.weblink{ +.external-{ text-align: justify; } diff --git a/week1/3-website/index.html b/week1/3-website/index.html index eff84a3f..5a4abb00 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -15,12 +15,13 @@

    My Coding Brag Blog

    +

    Tech Passion and Quest

    Tech Passion and Quest Furure Bootcamp.
    So, below is a summary of the study path so far and the journey ahead. Hope you have fun!!!

    + +
    + +
    + +
    + +
    +
    +

    © Osagiestar 2020 CYF Birmingham

    From 95709edc2d2c27bfbd68266a50b0e072c615e17f Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 05:49:54 +0100 Subject: [PATCH 28/31] applied internal-link and external-links classes --- week1/3-website/css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 31f888b0..609e3fb4 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -166,8 +166,8 @@ ol { } /*link to all the url on the boxes*/ -.external-{ - text-align: justify; +.external-link{ + text-align: center; } /*selects and styles the second on the list*/ From 110530451a534b5a67b0827923f18b946ba2b1d4 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 06:00:56 +0100 Subject: [PATCH 29/31] a group class for company logos --- week1/3-website/css/style.css | 4 ++-- week1/3-website/index.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 609e3fb4..ce9dedf0 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -57,7 +57,7 @@ body { } /*group class code for logos*/ - .solo, .codepen, .codeorg, .capgemini { + .icon-logo { width: 150px; height: 150px; border-radius: 10px; @@ -171,7 +171,7 @@ ol { } /*selects and styles the second on the list*/ -.fulldev li:nth-child(2) { +#fulldev li:nth-child(2) { color: rgb(212, 151, 27); } diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 5a4abb00..a42f0551 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -57,7 +57,7 @@

    First; was the completion of the basic tutorials on:

  • CSS tutorial on SoloLearn App
    • This is SoloLearn link
    - Sololearn logo +
    @@ -71,7 +71,7 @@

    Meet-ups to build on basics skills on;

  • CSS using FreeCodeCamp
    • This is FreeCodeCamp link - Codepen logo +

    Projects:

    1. Product Landing Page
      2. @@ -85,7 +85,7 @@

      Projects:

      Fundamentals

      Introduction to Programming

      - Code.org logo +
      • Algorithm learning on Code.org
      • Basic JavaScript using ProcessingJS
        • @@ -100,7 +100,7 @@

        Introduction to Programming

        Full Stack Web Development

        The eight-month course covers:

        - Capgemini logo +
        • Advanced HTML
          • From 3b64b4d1ecf32143ff810f271c9561849df58b25 Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 07:57:09 +0100 Subject: [PATCH 30/31] removed dormant IDs and tidied up codes --- week1/3-website/css/style.css | 106 ++++++++++++++++------------------ week1/3-website/index.html | 49 ++++++++-------- 2 files changed, 76 insertions(+), 79 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index ce9dedf0..a8a8a86a 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,3 +1,4 @@ +/*General style*/ body { font-family: "Roboto", sans-serif; } @@ -11,6 +12,7 @@ body { border-color: magenta; } +/*Navigation style*/ .topic { font-size: 2em; text-align: center; @@ -18,7 +20,6 @@ body { background-color: #d4b16a; } -/*the links for the menu*/ .nav { color: white; background-color: rgb(197, 145, 40); @@ -40,12 +41,30 @@ body { margin: 60px; } -/*targets the heading child tag*/ -.pre > h2 { +a:hover { + color: green; +} + +#active { + background-color: rgb(189, 238, 144); +} + +/*Introduction session style*/ +.introduce > h2 { text-decoration: underline; margin: 60px; } +.introduce > p { + margin-top: 60px; + margin-bottom: 10px; + margin-right: 200px; + margin-left: 300px; + text-align: justify; + color: white; + font-size: 20px; +} + .profile-image { width: 150px; height: 150px; @@ -56,34 +75,7 @@ body { height:auto; } - /*group class code for logos*/ - .icon-logo { - width: 150px; - height: 150px; - border-radius: 10px; - border: 5px solid rgb(133, 79, 79); - margin-bottom: 10px; - margin-right: 60px; - margin-top: 0px; - max-width: 100%; - height:auto; - float:right; - } - - .cyf_logo { - width: 100px; - height:75px; - border-radius: 5px; - border: 5px rgb(34, 24, 24); - margin-bottom: 30px; - margin-right: 110px; - margin-top: 5px; - max-width: 100%; - height:auto; - float: right; -} - -/*handles the social media links*/ + /*Social media style*/ .social { padding: 0px; margin-right: 0px; @@ -103,12 +95,11 @@ body { font-size: 40px; } -/*allows change of color on hover event*/ .social li:hover { padding: 20px 40px; } -/*grouped code for all boxes*/ +/*Container section styles*/ .course{ background-color: #ffe9aa; box-sizing: border-box; @@ -121,26 +112,19 @@ body { margin: 10px 30px 20px 280px; } -/*targets only the Pre-Bootcamp menu link*/ -a[href*="Intro"] { - background-color: rgb(189, 238, 144); -} - -/*selects the paragraph only as direct child*/ -.pre > p { - margin-top: 60px; +.company-logo { + width: 150px; + height: 150px; + border-radius: 10px; + border: 5px solid rgb(133, 79, 79); margin-bottom: 10px; - margin-right: 200px; - margin-left: 300px; - text-align: justify; - color: white; - font-size: 20px; -} - -/*.link-image{ - vertical-align: right; -}*/ - + margin-right: 60px; + margin-top: 0px; + max-width: 100%; + height:auto; + float:right; + } + h1, h2 { text-align: center; @@ -175,10 +159,7 @@ ol { color: rgb(212, 151, 27); } -/*for the href links*/ -a:hover { - color: green; -} +/*Footer*/ #footer { background-color: lightpink; @@ -189,4 +170,17 @@ a:hover { margin: auto; text-align: center; vertical-align: middle; +} + +.cyf_logo { + width: 100px; + height:75px; + border-radius: 5px; + border: 5px rgb(34, 24, 24); + margin-bottom: 30px; + margin-right: 110px; + margin-top: 5px; + max-width: 100%; + height:auto; + float: right; } \ No newline at end of file diff --git a/week1/3-website/index.html b/week1/3-website/index.html index a42f0551..ac31d756 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,28 +1,34 @@ + - - + + My Blog - - - + + + + +
          + +

          My Coding Brag Blog

          -
          + +

          Tech Passion and Quest

          Profile picture Welcome to my first blog ever! Yay!!! Well, I have always had a passion for technology. @@ -38,18 +44,18 @@

          Tech Passion and Quest

          - +
          -

          Pre-Bootcamp

          +

          Pre-Bootcamp

          Pre-Selection

          First; was the completion of the basic tutorials on:

            @@ -57,21 +63,20 @@

            First; was the completion of the basic tutorials on:

          • CSS tutorial on SoloLearn App
          This is SoloLearn link
          - +
          -
          -

          Drop-in Sessions

          +

          Drop-in Sessions

          Meet-ups to build on basics skills on;

          • HTML using FreeCodeCamp
          • CSS using FreeCodeCamp
          This is FreeCodeCamp link - +

          Projects:

          1. Product Landing Page
            2. @@ -80,12 +85,11 @@

            Projects:

          -
          -

          Fundamentals

          +

          Fundamentals

          Introduction to Programming

          - +
          • Algorithm learning on Code.org
          • Basic JavaScript using ProcessingJS
            • @@ -95,12 +99,11 @@

            Introduction to Programming

          -
          -

          Full Stack Web Development

          +

          Full Stack Web Development

          The eight-month course covers:

          - +
          • Advanced HTML
            • From 7dc06d7591cd8c8671523de19bd0c24604c0c69f Mon Sep 17 00:00:00 2001 From: osagiestar Date: Thu, 11 Jun 2020 08:06:20 +0100 Subject: [PATCH 31/31] double checked up codes --- week1/3-website/css/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index a8a8a86a..71d88a36 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -68,7 +68,7 @@ a:hover { .profile-image { width: 150px; height: 150px; - float:left; + float: left; border-radius: 10px; border: 5px solid rgb(133, 79, 79); margin: 30px; @@ -159,8 +159,7 @@ ol { color: rgb(212, 151, 27); } -/*Footer*/ - +/*Footer style*/ #footer { background-color: lightpink; box-sizing: border-box;