My Name is Kathryn Root

I'm a Web Developer

Scroll Down ↓

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.

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