Kathryn Root

About Me

My name is Kathryn Root. I live in Suffolk and I'm learning how to be a web developer.

I have some foundational experience with HTML, CSS/Sass, and Python.

I've been self-employed as an artist and artisan since 2018.

Portfolio

CSS/SassHTML

Netmatters Homepage Netmatters Homepage This project was to recreate the old Netmatters homepage. I used HTML, sass-compiled CSS, and JavaScript.

View Project →

CSS/SassHTML JavaScript

Portfolio Project Portfolio Project This project is this portfolio itself. I've used HTML, CSS, and JavaScript.

View Project →

Python

Improv Game Improv Game A random generator for an improv game using python.

View Project →

Python

Random Story Ideas Random Story Ideas A random generator for story ideas using python

View Project →

CSS/SassHTML

Portfolio Project Portfolio Project This project is this portfolio itself. I've used HTML, CSS, and JavaScript.

View Project →

Personal Website Personal Website I didn't actually make this, I just needed another placeholder.

View Project →

Coding Examples

Using SCSS to control colours

First I write the basic structure of the elements in HTML that I want to style:

<div class="btn-big">
    <span class="btn-logo btn-logo--dev-grey">
        <svg class="icon"> <use href="svg/icon-laptop"> </use> </svg>
    </span>
    <h2>Consultancy & development</h2>
    <span class="btn-sm btn-sm--dev-yellow">Read More</span>
</div>
<div class="btn-big">
    <span class="btn-logo btn-logo--support-blue">
        <svg class="icon"> <use href="svg/icon-laptop"> </use> </svg>
    </span>
    <h2>IT Support</h2>
    <span class="btn-sm btn-sm--support-blue">Read More</span>
</div>

Hover over the code to learn more ↑

I then make a sass map for the respective button colours:

$btn-colors: (
  dev-yellow:        #f7b322,
  dev-grey:          #67809f,
  support-blue:      #4183d7,
  market-green:      #2ecc71,
  telecoms-red:      #d64541,
  design-purple:     #926fb1,
  security-pink:     #f62459,
  training-orange:   #ce4125
);

Hover over the code to learn more ↑

Finally I make an @each rule, targeting the variable pairs in the colour map to assign set colours to each button and style them and their hover effects with a short amount of code:

.btn-logo {
@each $name, $color in $btn-colors {
  &--#{$name} {
    display: inline-grid;
    min-height: 65px;
    min-width: 65px;
    border-radius: 50%;
    background-color: $color;
    fill: $bg-white;
    border-color: transparent;
    align-self: center;
    & svg {  
      justify-self: center;
      align-self: center;
      height: 32px;
      width: 32px;
      }
    }
  }
}

Hover over the code to learn more ↑

Netmatters

Introduction to Scion Coalition Scheme

The Scion Coalition Scheme is an intensive, specially tailored training program run by Netmatters in order to give willing candidates the opportunity to enter the industry as web developers. Under the supervision of senior web developers, scions generally aim to complete training within six to nine months. The course is intensive and therefore the level of learning achieved is extensive in a short space of time.

Team Treehouse

Treehouse is an online learning community, featuring videos covering a number of topics from basic HTML to C# programming, iOS development, data analysis, and more. By completing courses users can earn points, allowing them to track their progress and see how much they've covered in certain areas.

Team Treehouse Score: 5,785

About NetMatters

Established in 2008 Norfolk's leading technology company Winner of the Princess Royal Training Award Winner of EDP Skills of Tomorrow Award 80+ staff, 2 locations across Norfolk Digital Marketing, Website & Software development & IT Support Broad spectrum of clients, working nationwide Operate to strict company values.

Get in Touch

Feel free to send me a message using the following contact form

kathryn.root@netmatters-scs.com