Blog Title

Embracing fluid layouts to craft dynamic web pages

2024-03-14T00:00:00Z

Responsive design is not a new concept on the web. For many years we have utilised media queries to adapt web pages across screen sizes and devices. Yet, in true engineer fashion, most people took a very systematic approach to this.

Standerdised breakpoints

The most common of these is to pick 3-4 common device sizes to focus on and create a set of consistent breakpoints. These are usually named something like: mobile, tablet, large tablet and desktop. With this approach, every time you need a new page, the designer will provide 4 designs; 1 for each size. Then during the build, the developer will match their media queries to those designs. Those pages are then checked at those breakpoints to make sure they match the designs. Once everyone is happy with the result, the page gets deployed and we move on to the next one.

As long as you did some research when picking the breakpoints, this approach can work well. Assuming the majority of your users will see that page at those exact viewport sizes (or close to them). But it's likely that between those breakpoints, the page won't look it's best. For example, when a single column layout gets stretched so far the page looks empty. Or times when the content is a little tight for a few pixels until you hit that next breakpoint.

In such cases, a fluid layout approach could be a better solution. The concept is that the layout is completely fluid and will adjust as and when it needs to. So the values you use in your media queries could be completely different between pages. This is because you are building the pages to suit the layout of the content rather than a static list of values. Fluid layouts allow for a more seamless transition as the viewport scales. This helps you eliminate any content displaying in an odd way between breakpoints.

How fluid layouts differ from breakpoints

The best way to approach creating fluid layouts is to utilise fluid units. Percentages (%), viewport width (vw) and fractions (fr) are the main ones you will need to get familiar with. These units will create some basic responsive behaviour even without any media queries! You can then layer in media queries at points where content needs to adapt to a particular viewport size. The goal is for your page to look good at any size and on any device. Whether a user is on a particularly narrow phone (hello Samsung fold) or on an ultrawide 49" display.

By adopting a fluid layout approach, you ensure that your website appears as intended. You also mitigate the risk of jarring layout changes at specific breakpoints. Instead, the layout will fill the screen in a natural way and provide a more satisfying experience.

But what about consistency?

A fluid approach to layouts doesn’t mean an end to consistency. There will be use-cases where a standardised set of breakpoints will come in handy. Some areas of your page may need to be in alignment and change at the same time. So it's still useful to have a few consistent queries to rely on.

The trick is use them only where they are useful rather than to restrict yourself and others on your team. You should still have the freedom to add any other media queries you need to make the page look it's best. Even if those queries don't fit into a standardised set.

Fluid typography is your friend

Making your typography more fluid will also help in achieving the fluid effect. By using CSS functions like clamp() you can make your typography scale with the viewport. This is a much nicer effect than an abrupt font size change and helps keep everything on your page balanced. And for those supporting older browsers - you can achieve the same effect with a combination of calc() formulas and media queries.

Remember, the goal is to create a smoother visual transition as the screen size changes. Fluid layouts and typography are all about embracing the web's inherent flexibility and making your site look great at any size.

Beyond the visual aesthetics, fluid layouts are also about improving the user experience. They provide better readability across screen sizes and devices than adaptive layouts. Also, they ensure that interactive elements are accessible, regardless of the device size.

Give fluid layouts a try

To conclude, I'd like to invite you all to give this approach a try. Especially those who have never strayed from their consistent set of breakpoints. In addition to the many issues the fluid layout approach solves, it can also help you future proof!

The increasing variety of device sizes and resolutions can make development very difficult. We dread the idea of new devices with unique screen resolutions getting launched. And if they become popular enough, it could result in having to refactor all your pages to fit the new normal. With fluid layouts, these issues will be far less likely. Your site will adapt seamlessly to any screen size and ensure a consistent user experience.

CSS in 2024 - Properties & Values for Modern Development

2024-02-07T00:00:00Z

It has been a long while since I posted anything to this blog! Recently I've put some time into it, cleaned up the cob-webs and updated the design. Now I just need some juicy content, and first up is CSS!

CSS has come such a long way in the last couple of years and is still evolving. It can take new features a while to get integrated into new browsers though. So you have to wait for them to have enough support to make them safe to use in production on large scale products. Unfortunately, this means we sometimes forget to start using new features, even when the support is in place.

So, to help you stay up to date I have put a little round up of some CSS properties and values that I think will be really useful to add to your daily use in 2024.

Properties

Let’s start the list with some of the properties.

Margin-block & margin-inline

I had seen these properties around for a while but never actually used them until I redesigned this blog. I found them very useful though. The idea is to use the writing mode to figure out the orientation of the element. So margin-block will add margins to the top/bottom of the element and margin-inline applies to the sides. Then if the writing mode changes the values rotate with the element. The block property will always be above and below the text and the inline property will be on the left and right. It’s pretty clever and very useful for those developing for different languages.

My personal favourite use case though is to centre align items! You can utilise margin-inline: auto to position block elements in the centre of the container. You no longer have to set the let and right margins individually or override top and bottom values.

Padding-block & padding-inline

This works the same way as the margin properties but for padding. In my experience, introducing these has been very useful. And you can still mix it in with the original set of properties. For example, if you want equal padding on all 4 sides or if you want to target a specific side of the element.

Block-size & inline-size

Again, very similar to the previous properties - but this time a replacement for width and height. Since this site is only using horizontal left-to-right writing mode, I didn't use these properties in this project. There are definitely some good use cases for them though. Particularly if you have any transitions that manipulate the orientation of the element.

Inset, inset-block & inset-inline

This one is such a time saver for those absolutely positioned elements! You no longer have to write 4 lines to set top, bottom, left and right to 0. Now you can just use inset which will set all 4 properties in one. And you can actually provide 4 values to it if you want to set different values to each side. The shorthand works the same way as margin or padding and it makes things so much easier. You also have the inset-block and inset-inline properties which work the same way as the other inline and block properties.

Aspect-ratio

This one is not new! But I think it can get forgotten so I wanted to give it a shout out. You no longer need to do padding hacks to make elements keep their aspect ratio on resizing. This can be good for hero components that have background images with some text and need to keep their shape.

Values

Now time to look at some of the values you can start implementing.

Clamp()

This is technically a function but is used as a value so I’m going to put it here. The function clamps the middle value between an upper and lower bound. It’s particularly useful for fluid typography without needing to add media queries. This is the most typical use case, but it can be used as a value for any property so you can get creative with it.

Dvw & dvh units

The vw and vh units are so useful and have become pretty mainstream in CSS. But did you know there are more viewport units? Svw and svh represent small viewport width and height, and lvw and lvh represent large viewport width and height. These take into account the browser interface, with small being the smallest the browser can be and large being the largest.

All the viewport units are useful, but browsers with varying interface sizes tend to be dynamic. For example, on mobile devices the browser can adjust as you scroll. So if you wanted something to be full screen, the other units may not work at all times. This is why dynamic viewport units - dvw and dvh are so useful! They will adjust with the dynamic browser interface and keep things in proportion at all times!

Conclusion

These are just a few of the properties and values that I think will elevate your CSS code. And they are well supported so safe to start using immediately. This is just a small sample of the new CSS features that can elevate your code. I'm going to save some of them for their own dedicated posts though. If you're interested in reading about that, make sure to check back often for new articles. In the meantime, please sign up for the newsletter to stay up to date. Also, follow along on social media for more frequent updates.

Happy coding 🙂

Switching my blog from Gatsby to Eleventy (11ty)

2021-09-01T00:00:00Z

Firstly I’d like to say a big hello and welcome back! I know it’s been a while but I’m back with a new design, which I really love as well as a new tech stack behind the scenes which I’d like to tell you a little more about.

Some background

Before we dive in though, a little background. The previous version of this website was built with Gatsby.js which is pretty awesome and I'm glad I took the time to try it out. The documentation and community is amazing with lots of starter templates for every website imaginable. It’s also based on React.js which is still growing in popularity so it’s somewhat familiar to most of us. I would still highly recommend it as a great framework.

However, I always thought that React generated just a little too much JavaScript for my liking. Especially for a simple website where the amount of actual required Javascript was minimal (currently less than 50 lines of JS code for the whole site). So while I think it’s a really great option (and it gave me the opportunity to practice my react skills) it was a little too much for this particular project.

When I decided to create a new design for this site and bring it back to life, it wasn’t my intention to completely re-code it. The plan was just to update a few of the components and CSS since that would be quicker. However I quickly found that it was taking longer and I wasn’t really enjoying the process. Plus I still felt like React was a little too much for a personal site that only had a handful of pages. So I decided it was time to dig out my list of new tech I’ve been wanting to try (which I know every developer has) and see if there’s a better option. Enter Eleventy (also known as 11ty).

Eleventy is a javascript based static site generator and does require node.js to generate the site files (similar to Gatsby) but my favourite part is that you get to choose everything including the templating language. I really appreciate the flexibility it offers and the fact that I could set up my project exactly the way I wanted and it worked perfectly. The other great thing is that it has zero boilerplate client side JavaScript, which means any JavaScript on the site is only what you put there. This is brilliant and means that it will even work for people who have javascript disabled (or at least mostly depending on how much interaction you built in - which is more than can be said about a lot of sites these days).

The fact that there is such a huge prominence put on accessibility and performance is another reason for my choice. I love that the community encourages developers to get the highest lighthouse scores and make sure that the websites we create are accessible and performant.

In total, it took about 2 and a half weeks to completely re-code my entire site over to Eleventy (or more accurately 2 weekends and a few evenings) which I was really impressed with and it’s generally been a pleasure to work with! I decided to use nunjucks for templating and found it really easy to work with even though I had never used it before. I have also heard good things about it’s integration with netlify, although I didn’t go down that route so can’t speak from experience. I highly recommend giving Eleventy a go for anyone who is thinking of starting a personal site or a side project.

Useful links

I wanted to leave a few links for both frameworks/generators that I found really useful in case anyone else was curious and wanted to try them out!

Gastby

Eleventy

What’s next

Now that the site is in better shape you can count on seeing some new posts a little more frequently. I also want to create some starter themes, templates and some other resources so do keep an eye out for those and if you have any suggestions of articles or resources you’d like to see feel free to reach out on my social media channels.

Create a CSS only image gallery

2020-04-26T00:00:00Z

Sometimes all you need is a simple web page. You might be creating a prototype or throwing together a landing page to gauge interest for a new product. Setting up environments and builds can take up unnecessary time when you can just use any text editor to write a simple HTML & CSS web page and run it straight in the browser! However, if that page needs a gallery you usually end up finding a JavaScript library to make it work.

But you don’t need JavaScript to create a library. Well, you probably do if you want some complex logic, but if you just need a way to show people a larger version of a thumbnail you can do it with CSS alone. It’s pretty straight forward, I’ll show you.

Start with the structure

Let's start with the HTML. The structure is important here as we are going to be using radio inputs to determine the selected image. Therefore, the input, thumbnail and large image all need to be in a container together and in a specific order. Look at the sample HTML code below:

<section class="gallery">
  <div class="gallery__item">
    <input type="radio" id="img-1" checked name="gallery" class="gallery__selector" />
    <img class="gallery__img" src="https://i.picsum.photos/id/1015/600/400.jpg" alt="" />
    <label for="img-1" class="gallery__thumb">
      <img src="https://i.picsum.photos/id/1015/150/100.jpg" alt="" />
    </label>
  </div>
</section>

Make sure the ID on the input matches the for on the <label> element. The large image should be after the <input/> tag and the thumbnail should go inside the <label>. Create multiple gallery__item divs, one for each of your images. Remember to make sure each has a unique ID but the same name attribute for the functionality to work.

Make it look good

Now for the styling. I will be using SCSS in the examples just to make it a little easier. Let's start with some basic setup:

* {
  box-sizing: border-box;
}

$max-img-width: 600px;
$max-img-height: 400px;

img {
  max-width: 100%;
  vertical-align: top;
}

The gallery will be responsive but you will need a maximum width and height of your large image. There are also some additional properties for all the images. The vertical alignment will remove the space below the images and the maximum width will mean the images will scale down within a container.

Now to add some styling to the gallery container. It will be centred and capped at the larges width of the image. The padding will create a space for the large image to be positioned in and the percentage padding will allow the image to maintain the correct aspect ratio.

.gallery {
  display: flex;
  margin: 10px auto;
  max-width: $max-img-width;
  position: relative;
  padding-top: $max-img-height/$max-img-width * 100%;

  @media screen and (min-width: $max-img-width) {
    padding-top: $max-img-height;
  }
}

The image needs to be absolutely positioned within the padding space created by the container. It also means it will break out of the row of thumbnails. You can change the image transition and the thumbnail spacing to best match the rest of your page.

.gallery__img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gallery__thumb {
  padding-top: 6px;
  margin: 6px;
  display: block;
}

The styling for the input is the most important part, and it’s what makes everything work. The input itself needs to be hidden so you don’t have a radio button floating around and then the images can be styled when the input is selected. In this case, the opacity is changed to make the large image visible and the thumbnail image gets a box-shadow so you can see that it’s selected.

.gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;

  &:checked {
    + .gallery__img {
      opacity: 1;
    }
    ~ .gallery__thumb > img {
      box-shadow: 0 0 0 3px #0be2f6;
    }
  }
}

Final result

That’s it! Now you have a functional image gallery without needing any JavaScript. Here is an example of what the final result looks like:

Courses & tutorials to refresh web development skills

2020-04-19T00:00:00Z

Technology is always changing and evolving and the same goes for programming and web development. I feel like almost every week I find out about a new framework, library or API that can be used to make your websites and apps a little more powerful and easier to build. I think everyone has a handful of go-to tools that you refer to every time you start a new project but it’s important to keep learning and updating that toolset so it doesn’t become outdated.

Keep in mind, you don’t have to learn or like everything you come across. Some tools you find may not be to your taste and that is fine, but it’s a good idea to try them out so you can make up your mind. I tend to keep a list of new things I’d like to try out and add to it every time I come across something new. Then when I have some time I have something to refer to. So I thought I would share some of my recommendations for things you can learn to improve your web development skills. I tried to share courses that are free (or have a free option) so hopefully, they will be accessible to most people.

CSS flexbox & grid

CSS flexbox and grid have been around for a while now but have continued to gain popularity since browser support has grown (especially for grid). There are quite a few things to remember when trying to create layouts using these methods and plenty of cheat sheets for it online. I found these mini code games quite useful though. I think the practical element of writing the correct code to progress through the game helps you remember it more easily than looking up a specific use case. So if you are looking to advance your CSS templating knowledge you should give them a go.

Flexbox Froggy

Grid Garden

Content design

If you are looking to level up your content design skills then try out this course. It was designed by The Government Digital Service and gives an introduction to content design as well as content design principles you can use. Content is often overlooked but it’s an important part of any website so if you are struggling to find your tone of voice or unsure how to structure your content then definitely give this one a try.

Introduction to content design

React.js

I think React is awesome! For anyone who knows JavaScript, it’s pretty easy to learn and once you know it the possibilities are endless. It’s a good place to start as it can be used on small and large websites. Also, there is quite a lot of demand for React skills in the job market. I learned React a few years ago when we decided to start using it at work and I’m so glad I did. The React docs are pretty good for anyone looking to start but I have also found a couple of courses for those who prefer a more structured approach.

The Beginner's Guide to React

Learn ReactJS

GraphQL

GraphQL is quite new to me and to be honest I didn’t like it at first. Being a front-end developer I didn’t think it was for me but I’m glad I gave it a try. I’m still relatively new to it and still have lots to learn but from what I’ve learned so far it’s very powerful. I feel it’s a nice way for front-end developers to try out more of the server-side parts of a website and maybe even a first step into becoming a more full-stack developer. This course is really good and even lets you pick your tech-stack so you can use it in an environment you are already familiar with.

The Fullstack Tutorial for GraphQL

Gatsby

This blog is built with Gatsby so I thought I would include it here as a bonus. Gatsby is a framework based on React but the starter apps make it so easy to get started. If you are building a personal website I highly recommend it. I don’t have a course to share for this one but I did recently create a quick start guide on Instagram that you can refer to. Alternatively, the Gatsby docs are really good and will have you on your way in no time.

View this post on Instagram

A post shared by Lubna | Frontend Web Developer (@lubnadev)

Hopefully, that has given you some ideas about some technologies you might want to look into. Happy learning!

Colouring with code

2020-03-22T00:00:00Z

Do you like colouring books? Are you getting a little bored and running out of things to do at home? Well, I have created some digital colouring pages that you can colour with code. There is a lot going on in the world right now so I wanted to share something lighthearted and fun. Something everyone can take part in and share with their friends and family online.

The concept came to me last year while trying to think up a task to explain CSS (I created a Halloween themed colouring page). Since it’s a pretty easy syntax anyone should be able to use these colouring pages to create some cool art. I thought springtime would be a good theme to try out this time and hopefully, that will result in some very colourful illustrations.

So here are 2 colouring pages for you to try for yourself:

See the Pen Hello Spring - CSS colouring page by Lubna (@Lubna) on CodePen. See the Pen Cute Cacti - CSS colouring pages by Lubna (@Lubna) on CodePen.

If you want to try it out, sign up for an account at codepen.io and click ‘fork’ in the bottom right of the pen to save a copy to your account. Then you can make any changes you like, save the results and share it online. For those who are new to CSS, just change the fill and stroke values to whatever colour you like (you can find many sources online for colour hex codes) and for those a little more advanced I challenge you to add some animations and cool effects.

If you do have a go, share it on Twitter / Instagram with the hashtag #ColorWithCSS so we can see all the different creations out there.

Credit for the original illustrations: hello spring lettering , cactus illustration

Using Storybook with React & Typescript

2020-03-15T00:00:00Z

Recently I’ve been working a lot with Storybook as we are using it to document our evolving design system at work. If you haven’t heard of Storybook before, it’s a tool that lets you easily create and document UI components. It started out solely focused on React but they have added support for many other frameworks including Angular and Vue as well as just plain HTML.

When we first adopted react as a framework we used it alongside FlowJs. Since both were created by Facebook it made sense to use the tools in tandem. However, after a while of using Flow, the decision was made to switch over to Typescript. Throughout this process, we were already using Storybook to visualise the react components we had, but the documentation wasn’t really part of the equation.

At the end of last year, we decided to put together a more official “design system” and focus more on documenting our components as well as visualising them. It was perfect timing since Storybook had just brought out its docs addon which allows the use of .mdx files to create more custom and detailed docs. So, I set up a new instance of Storybook with all the latest updates and added all the addons we thought would be useful.

This is when I started to run into some problems. For me, the most important part of storybook was the props table. I’m sure anyone who has used a component library can relate, you pick your component and try to use it but aren’t sure what the props are named and which ones are required. So you end up having to go to the repo and opening up the file to see what the props are. This makes the whole process take much longer and requires many different tools before you finally have enough information to use the component. The Storybook props table makes this a lot easier as you can see a list of all the possible props and which ones are required right alongside the component itself. Furthermore, you can annotate the props (during the creation of the component) to give more information and context around what each prop is for.

Out of the box, Storybook handles React prop types on its own without much additional setup. This was not the same for Typescript though and I ended up going through a lot of trial and error before I managed to get everything working. This may change and become a little easier in the future but in order to avoid going through that again, I created a Storybook boilerplate that I could use anytime I needed a new instance of the tool. Recently, I thought it might be useful to others so I have put it on my GitHub so you can easily clone it and get started.

Visit storybook boilerplate repo.

After getting more experience using the tool, I feel like it’s very powerful and definitely a good choice, but I also have some tips for anyone looking to start using it.

Do the majority of the setup first

Take some time think about what it is that you want to accomplish with Storybook and get the setup ready first, before adding any components. I have found that adding new addons and making config changes can have a ripple effect and require you to make changes to your stories. If you have a lot of components and stories this can be a long process and can make debugging challenging.

Keep storybook in the same repo as your components

All the Storybook tools work best if they are kept in the same repo as the components. This is because Storybook needs to consume the un-compiled versions of your components (especially if you use typescript and want the props table) so the tools work best when kept together. If this is not an option or you have multiple repos with components you want to display in a single Storybook then you may have to create compiled components to use in your apps and a un-compiled version for Storybook.

Have a “playground” version of your storybook

Similar to the first tip, once you have your storybook setup it’s a good idea to save it as your own boilerplate and playground. You can put a test component in there to make sure everything works and that way if you need to add a new addon or make changes to the config you have a safe environment to try it out first.

Keep up to date with the latest version

Storybook is constantly evolving and getting better so make sure you upgrade regularly to get the latest features and bug fixes. It’s also open source so you can always get involved and contribute your ideas.

I hope those tips will come in handy as you create your own Storybook setup. If you want to learn more about the tool, you can do so on their website .

CSS loading spinners

2020-03-09T00:00:00Z

CSS is my favourite language. That statement can be seen as quite controversial but it’s been true ever since I started web development. I think it’s very powerful and important but can sometimes be overlooked. Because of my love for CSS, I often find myself trying to create CSS versions of things. So I thought I would share a way to create CSS spinner animations.

A lot of the time loading animations are created with an image. This isn’t always the optimal way as an image can take a while to be downloaded especially over a slow network. SVG versions that are embedded into the page work a little better since they are part of the code and get loaded with the page, but the amount of SVG code can be quite large and if used in multiple places can really bulk up a web page. So if you are looking for a simple loading spinner then creating it purely from CSS can be a great option. Also, you will only need to write one class and then re-use it as many times as you need which means they won’t make your file sizes too large and cause them to take longer to be downloaded by the browser.

##A simple spinner

Let's start with an example of a very basic spinner:

See the Pen Simple CSS loading spinner by Lubna (@Lubna) on CodePen.

The height, width and border-width can all be altered to suit your style, the real magic is done with the border colour. Though the shape of the spinner looks round, it's still technically a square with rounded corners and therefore still has 4 sides. So, we can set a different border colour to the 4 sides to create the illusion that one quarter is filled in and the rest is semi-transparent. Alternatively, you can set the colour to transparent to make the “track” part of the spinner invisible. Keep in mind that the border width needs to remain the same one all sides and setting something like border-width: 4px 0; will create a weird shape (unless that is what you’re going for). Once the shape is ready, you can use @keyframes to create the animation.

If you are looking for something with a little different style you can try adjusting the CSS to create many different shapes and designs as well as some interesting animations. Below are a few I created to get you started, feel free to open them up on CodePen and play around with the code to see what you can come up with.

See the Pen CSS only loading spinners by Lubna (@Lubna) on CodePen.

Of course, there will be times when you want a more custom and detailed loading animation. In those cases, I think going with an SVG version is the best option since while you can make some rather complex designs with CSS it's not practical in a production environment. Also, consider using loading skeleton layouts when loading large sections of your page and save the spinners for smaller sections. While adding a skeleton can add a little extra bulk, the perceived page load feels faster so your users will appreciate it.

Why I became a STEM ambassador

2020-03-02T00:00:00Z

The STEM learning organisation in the UK is the largest provider of education and careers support in science, technology, engineering and mathematics (STEM). The organisation allows people who work in those fields to become STEM ambassadors and offer training and resources so that you can help introduce young people to STEM subjects and get them inspired for their future career. It’s run on a volunteer basis so everyone who signs up volunteers to donate their time for the worthy cause.

I became a STEM ambassador a couple of years ago in hopes of inspiring young people to pursue a career in technology. When I was at school, we didn’t have many programs in place for professionals to come in and speak to us about their careers and their journey. The one time it did happen though, I found it extremely inspirational and positive. Now I want to give back and do that for other students that are still at school and are thinking about what comes next.

I think in today's world, we make some assumptions that are not always correct. One assumption I always made, was that because young people access technology and the internet at a much younger age, they must know what developers are and what they do. However, I was mistaken. While it’s true access to technology is much more readily available, it’s also almost seamless and second nature so not everyone questions how everything works behind the scenes. Therefore even though web and software development have become much more popular as careers young people aren’t necessarily aware of that. Technology is moving fast though and is already one of the most in demand jobs so it’s important for young people to know what that means for them and what opportunities are out there.

There are so many incorrect stereotypes about who developers and programmers are and what they are like and I like to think I can help dispel those. One of the main ones I feel strongly about is that all developers like and are good at maths. Don’t get me wrong, there is some maths in coding and there are some developers who are brilliant at maths, but you don’t have to be a mathematician in order to write good code. I’ve never been amazing at maths and it was actually my least favourite subject in school. I am very logical though and so coding principles make sense in my mind, quite a lot more than algebra and trigonometry did while I was in school.

In addition, the benefits are not one-sided, and as a STEM ambassador you get as much out of the experience as the young people you speak to. One of the reasons I joined was to improve my public speaking skills. Giving presentations about my journey and career path helped me be more confident in what I was saying and gave me some insight into how I personally prepare for presentations. This has in turn helped me present at work to my colleagues and to the wider business. There are also plenty of networking opportunities to meet other people who have a career in STEM and learn about their field.

So I just want to say, for all my fellow developers and anyone else who has a career in a STEM subject, consider becoming a STEM ambassador and inspire young people in your area. For those not in the UK there might be other organisations that do a similar thing where you live. It’s important to inspire the next generation and make sure they carry on with and improve on what we have built so far.

My journey into web development

2020-03-01T00:00:00Z

I’m a big fan of an origin story. Reading about how a person started their career or how a product went from idea to reality is really inspiring to me, so I thought I should make my first post on this blog about my origin story and how I ended up here.

When I was younger I would always be changing my mind on what I wanted to be when I grew up, as I think most kids do. The one thing I knew for sure if that I wanted to be very successful and I wanted to do something important. Then in my early teens, I settled on being a lawyer and decided that is the career path I would pursue through college and university. At around the same time I discovered graphic design, I didn't know it yet, but that discovery changed my life!

It all started with a little site called MySpace

For those who don’t remember it, Myspace was a very popular online social networking site between 2005 - 2008. I was never very active at social networking online as I don’t consider myself to be very good at it, but the thing that caught my eye was the customisations people were creating for myspace profiles. Myspace allowed CSS & JavaScript injections, and while that’s probably not very secure, it did mean that with a few lines of code you could customise your profile and make it really unique. There were hundreds of websites that offered custom layouts as well as glitter graphics, banners, album covers, music player skins, etc. and I was determined to learn and become one of those websites.

I started to learn photoshop and graphic design, I joined a few forums where other graphic creators shared their designs and website links. I felt like I found a whole new world and reason to be online. I was still only about 13 years old, and like many people at the time, we had a family computer that was for everyone. This meant I only got a few hours a day to be online and practice my new hobby. I did all the photoshop tutorials I could find (which wasn’t that many at the time) and downloaded thousands of custom fonts and brushes. After a while, I got quite good and decided I was good enough to share my creations with the world. I started sharing on the forums but quickly decided I needed my own website so I went in search of how to do that.

Some of you will remember a website called Piczo, where a lot of people started on their web developer journey, and I was no exception. I had one of those websites with the glittery welcome sign, an about me section, hit counter and guest book. It was terrible. But I still think of it fondly. I did outgrow Piczo relatively quickly and instead found a site builder to use. I don’t quite remember the name of it anymore but it was a very early version of a site builder where you can choose a template and colours and create pages. It was still pretty terrible but looked a bit more like a “real” website over the Piczo ones, so I happily uploaded all my graphics and sent the URL out on the forums.

That just wasn’t enough for me though. The other websites looked much better than mine, they were making custom layouts for their websites and they had domains that matched the name of their sites. So I started to explore and learn. I must mention that a lot of resources we have now weren’t around then and while YouTube was a thing, it was mostly used for funny videos rather than useful tutorials, so getting started was a challenge. Luckily, I managed to get my hands on a copy of Dreamweaver (back when it was still Macromedia Dreamweaver before adobe bought them) and the familiar interface allowed me to create some very basic web pages. Through using Dreamweaver’s visual interface, talking to people on the forum and inspecting the source of the websites I liked, I managed to learn HTML and CSS. It took some time and my websites still weren’t amazing but they started to look a little more like the ones I aspired to so I was very happy.

Eventually, I managed to get myself a domain (by signing up to a survey website and earning enough points to get a .info domain for free) and even convinced my mum to buy me some cheap hosting for $12 per year. One summer I even participated in a forum sale and made a pretty penny selling some of my graphics. Even though I had fallen in love with graphic and web design, I never thought of it as anything more than a hobby and still intended to become a lawyer. It wasn’t until it was time to look for work experience in the last year of high school, and I couldn’t find a law firm to work at, that my mum suggested I look at web design agencies. I didn’t end up finding any offering work experience but it did get me thinking about making my hobby a career.

When the pieces fell into place

I decided to go to college to study Interactive Media and then on to university to get a BSc in Web & Multimedia. I often wonder what my life would be like if I never discovered those MySpace websites, but in the end, I’m always glad that I did. Although I’m sure I would have made a fine lawyer, I don’t think I would have loved it as much as I love being a web developer. Besides, I think I still achieved my childhood dream. I consider myself successful in my field and the websites I help build can impact people's lives, which can definitely be classed as important.