From b0140807a3e8f3b1aa4395aac0b32a794dfda36a Mon Sep 17 00:00:00 2001 From: osagiestar Date: Sun, 10 May 2020 06:43:08 +0100 Subject: [PATCH 01/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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 d3afaeaa87226392b1a994747166cbcdb03cf8bb Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Sun, 17 May 2020 13:41:05 +0100 Subject: [PATCH 26/48] This a test --- week2/2-website/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..10c1410a 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,7 +12,7 @@ - + Working on new week tasks! From 59178ba99d38ee1d98f2f094779bcb903f9793e9 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Mon, 18 May 2020 02:28:51 +0100 Subject: [PATCH 27/48] added the link on header for css file --- week2/2-website/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 10c1410a..1a18cf77 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -7,7 +7,7 @@ - + From 7ad76fcc5359d98d7b86e042e9442c4ebed8c927 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Tue, 19 May 2020 13:42:19 +0100 Subject: [PATCH 28/48] set the root font-size --- week2/2-website/css/style.css | 8 ++++++++ week2/2-website/index.html | 6 +++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..f465bef5 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,11 +1,19 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + /*declared the default or root font-size*/ +html { + font-size: 62.5%; +} + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } + + + /** * Add your custom styles below * diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 1a18cf77..23d6da09 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,7 +12,11 @@ - Working on new week tasks! + + + + + Working on new week tasks! From b788f87e3fb9eeeda421eb0a41494435ca5d6b86 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Tue, 19 May 2020 14:11:30 +0100 Subject: [PATCH 29/48] define the structure and head setup (meta name) --- week2/2-website/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 23d6da09..135a2c3f 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -3,6 +3,7 @@ + Karma @@ -12,14 +13,19 @@ - +
    + +
    + Working on new week tasks! +
    +
    From 561711bb31bfa868c86835e199b213cbca642b02 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Tue, 19 May 2020 20:36:23 +0100 Subject: [PATCH 30/48] menu link added --- week2/2-website/css/style.css | 23 +++++++++- week2/2-website/index.html | 86 ++++++++++++++++++++++++----------- 2 files changed, 82 insertions(+), 27 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index f465bef5..a53f1dd2 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,9 +1,12 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - /*declared the default or root font-size*/ + /*declared the default or root font-size in percentage: [1rem = 10px]*/ + html { font-size: 62.5%; + margin:0; + padding: 0; } body { @@ -11,6 +14,24 @@ body { -webkit-font-smoothing: antialiased; } +.nav-link { + font-size: 1.3rem; +} + +.logo { + height: 1.1rem; + margin-left: 2rem; +} + +/*declared the default or root font-size in percentage: [1rem = 16px]*/ +html { + font-size: 100%; + +} + + + + diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 135a2c3f..fb0ef06f 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,31 +1,65 @@ - - - - - Karma - - - - - - - - -
    + + + + + Karma + + + + + + + +
    + +
    +
    +
    + + -
    - + +
    +
    + +
    +
    Join us on
    +
      + + +
    • + +
      • +
    + + © Karma Mobility, Inc. + +
    +
    - - - Working on new week tasks! - - - -
    - -
    - +
    + + + + + + + + + \ No newline at end of file From b7fc2849bc9ccb01a2ffcdf1b791b8545b6d59f6 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Wed, 20 May 2020 02:23:25 +0100 Subject: [PATCH 31/48] added icon images --- week2/2-website/css/style.css | 18 ++++++--- week2/2-website/index.html | 72 +++++++++++++++++++++++------------ 2 files changed, 60 insertions(+), 30 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index a53f1dd2..6e1a605c 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -14,19 +14,25 @@ body { -webkit-font-smoothing: antialiased; } -.nav-link { +nav { + width: 100%; +} + +.nav-link ul{ font-size: 1.3rem; + text-decoration: none; + list-style: none; + box-sizing: border-box; } .logo { - height: 1.1rem; + height: 3.0rem; margin-left: 2rem; } -/*declared the default or root font-size in percentage: [1rem = 16px]*/ -html { - font-size: 100%; - +.karma_needs img { + width: 15.0rem; + justify-items: center; } diff --git a/week2/2-website/index.html b/week2/2-website/index.html index fb0ef06f..94b6c17d 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -20,7 +20,7 @@ -
    -
    - -
    -
    Join us on
    -
      - - -
    • - -
      • -
    - - © Karma Mobility, Inc. - -
    -
    - - + +
    +

    Introducing Karma

    +

    Bring WiFi with you, everywhere you go.

    +
    + Learn More +
    +
    + +
    +

    Everyone needs a little Karma

    +
    + devices + + Internet for all devices + +
    +
    + coffee + Boost your productivity +
    + +
    + refill + Pay as You Go +
    + + +
    + +
    +
    +
    +
    Join us on
    +
      + + +
      • +
    + + © Karma Mobility, Inc. + + +
    + +
    + From ba6d1d7ab6ab3af80127d41b443955f40156051f Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Wed, 20 May 2020 02:58:32 +0100 Subject: [PATCH 32/48] styling nav links --- week2/2-website/css/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 6e1a605c..00dd4cdf 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -15,21 +15,32 @@ body { } nav { + display: flex; width: 100%; } .nav-link ul{ + display: flex; font-size: 1.3rem; text-decoration: none; list-style: none; box-sizing: border-box; } +.nav-link ul li { + text-decoration: none; + list-style: none; +} + .logo { height: 3.0rem; margin-left: 2rem; } +.background-image {img(..) + +} + .karma_needs img { width: 15.0rem; justify-items: center; From f358e703089843c0a688432affbc4d1c31fe3d24 Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Wed, 20 May 2020 03:04:35 +0100 Subject: [PATCH 33/48] removed underline from nav link removed --- week2/2-website/css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 00dd4cdf..aff28562 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -32,6 +32,10 @@ nav { list-style: none; } +.nav-link ul a { + text-decoration: none; +} + .logo { height: 3.0rem; margin-left: 2rem; From 18675e799e306be1defca4ba2cc13978e596415e Mon Sep 17 00:00:00 2001 From: Osagie Okoedo Date: Wed, 20 May 2020 14:14:52 +0100 Subject: [PATCH 34/48] working on the footer# --- week2/.vscode/settings.json | 5 ++++ week2/2-website/css/style.css | 56 +++++++++++++++++++++++++++++++---- week2/2-website/index.html | 12 ++++---- 3 files changed, 62 insertions(+), 11 deletions(-) create mode 100644 week2/.vscode/settings.json diff --git a/week2/.vscode/settings.json b/week2/.vscode/settings.json new file mode 100644 index 00000000..362b3864 --- /dev/null +++ b/week2/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Osagie" + ] +} \ No newline at end of file diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index aff28562..3b93c2d2 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -28,11 +28,13 @@ nav { } .nav-link ul li { + display: flex; text-decoration: none; list-style: none; } .nav-link ul a { + text-decoration: none; } @@ -41,29 +43,71 @@ nav { margin-left: 2rem; } -.background-image {img(..) - -} - .karma_needs img { + display: flex; width: 15.0rem; justify-items: center; } +h5 { + display: flex; + font-size: 2.0rem; +} +.footer { + display: flex; + flex-direction: row; +} +.span { + align-items: center; +} +.social-media li { + display: flex; + list-style-type: none; + padding: 0px; + transition: .6s; + position: relative; +} +footer li i { + display: flex; + flex-direction: row; + font-size: 40px; +} + +.social-media li:hover { + display: flex; + padding: 20px 40px; +} + +.icons li{ + display: flex; + font-size: 2.5rem; + font-weight: 0.2rem; + font-family: Arial, Helvetica, sans-serif; + justify-content: center; + flex-direction: row; +} + + +.copyright { + display: flex; + font-size: 1.6rem; + text-align: justify; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} /** * Add your custom styles below * * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks + * - Be organized, use comments and separate your styles into meaningful chunks * for example: General styles, Navigation styles, Hero styles, Footer etc. * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' + * - When using Flex-box, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 94b6c17d..1b1cd393 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -10,6 +10,8 @@ +
    @@ -35,8 +37,8 @@

    Introducing Karma

    Bring WiFi with you, everywhere you go.

    -
    - Learn More +
    +
    @@ -61,8 +63,8 @@

    Bring WiFi with you, everywhere you go.

    -