Our working process

Meet the TEAM

“We see the world, not as it is, but as we are.”

Nicolae Ifrim

CEO

Nicolae Ifrim has been tinkering with computers since a very young age, he is currently studying for a Computing degree at the University of Northampton. Previously worked as a team leader, developing ideas and projects in Romania.

In 2013 one of these projects was sold to an online store which integrated the algorithms for own use, using those money he managed to get to UK and start as a student to get a degree, in 2016.

He enjoys hiking, watching movies and has a passion for astronomy.

“The capacity to learn is a gift, the ability to learn is a skill, and the willingness to learn is a choice.”

Modou Lamin Sonko

Developer

Modou Lamin Sonko is a second-year student at the University of Northampton, he is currently on a computing course with foundation. He has a wide range of experience working before his studies, he has worked in the food industry as a chef and a quality controller. He now works in the security industry.

These experiences in the different industries have made him understand the value and importance of team work and he have acquired a lot of transferable skills that will benefit him in the computing industry.

He has a background in business administration and currently holds a diploma in business administration, certified by ICM (institute of commercial management).

Modou enjoys running and weight lifting during his leisure time.

"If life gives you lemons...get angry!"

Daniel Raymond

Developer

Dan Raymond has been playing games since he was a child, his first entertanement systems he played were the nintendo 64 and the sega genesis and enjoyed playing the games he owned, going on in life he still enjoys games and wants to understand more about how they are made, which is why he is attending Northampton university so that he might attend computer games development course.

"Do. Or do not. There is no try."

Adam Vincent

Designer

As an Avid gamer, Vince has loved playing video games at a very young age and has been his biggest hobby ever since developing a massive interest in RPG and Platform genres. A huge fan of Nintendo, Vince loves to always keep upto date on anything game related!

During this time Vince also loved the concept of travelling and experiecing different cultures and studied tourism in college as a result. Upon completion he decided to Work as a team leader for Maplin (a tech retailer) until he decided what career goal he wanted to go for.

Vince now studies at the university of Northampton where he aspires to learn more about programming which could help him get into industries he wished for, when he was younger.

Jobs Comparison

In this page you will see a comparison between two jobs, Web Developer and Games Programmer. The criteria used for this comparison will be:

Duties
Challenges faced
Salary
Interview difficulty
Programming languages

Being a Web Developer

What does a Web Developer Do?

Sometimes reffered to as Wek Programmers, they are the ones that work on making a website functional and running smoothly.

They do not design websites, that is for Web Designers, but they do use Web Designers prototypes as the starting point when making a Website.

Being a Games Programmer

What does a games programmer do?

Games Programmers design and create games for computers, game consoles, and mobile technology (tablets and smartphones). They are involved in both the conception and the execution o the games creation cycle.

Like Web Developers, they create the functional game, the mechanics of how it will work once finished.

Underneath you will see a side by side comparison of the two jobs, you may also notice that even though they are in different fields, the challenges faced are very similar.

Web Developer

Duties included:

Attending meetings
Create and test websites
Quality testing
Work with other team members to determine website content
Coordonate work with other departments
Integrate graphics, audio and video

Challenges faced:

Keeping deadlines
Keeping up with latest Web standards
Develop with the end user in mind
Extensive hours spent sitting down can have negative health implications
Poor browsers like Internet Explorer
Task repetition
Making the website visible on search engines
Making it easy for the browser to understand the content

Languages Used:

PHP
JAVASCRIPT
RUBY
HTML
CSS

Interview Difficulty:

*This is based on a scale of 1 to 5, 1 being easiest.

UK Average Salary:

30 000£

Games Programmer

Duties included:

Attending meetings
Create and test games
Debugging, or fixing functionality issues
Keeping deadlines
Work with other team members to determine game content
Coordonate work with other departments
Integrate graphics, audio and video

Challenges faced:

Keeping deadlines
Debugging, or fixing functionality issues;
Extensive hours spent sitting down can have negative health implications
Changing requirements during the development cycle
Task repetition
Keeping the gamers engaged
Being creative

Languages Used:

C++
C#
JAVA

Interview Difficulty:

*This is based on a scale of 1 to 5, 1 being easiest.

UK Average Salary:

35 000£

Conclusion

After analysing both jobs the salary and languages used for programming are the only sections that differ as a whole, while challenges and duties are very similar.

They both need to work within deadlines, attend meetings and need to test to fix before final release, though it is true that the development process differs, but as a whole you can expect simillar work environment.

Essential Cheat Sheets
Online Code Editors
Frameworks
Task Runners / package managers
CSS Preprocessors and Compilers
Text Editors
Collaboration Tools
Inspiration & Tutorials
Icons
Website Speed Test Tools
Web Development Newsletters
Git Clients / Services

Essential Cheat Sheets

For more see here

The HTML5 Cheat Sheet - Front-end developers, your prayers have been answered. The Mega Cheat Sheet has it all when it comes to HTML5. Broken down into five major categories (tags, event attributes, mobile, browser, and canvas), it includes detailed descriptions of each element and scores every browser for overall HTML5 support.
Caniuse - Ever want to know whether the code you are writing works in a certain browser? Then this is the website for you. Caniuse.com allows you to see which elements of CSS, HTML5, and SVG are supported in certain browsers. The array of browsers range from Internet Explorer 6 to the latest mobile version of Chrome, making this site another essential front-end resource.
Color Theory Quick Reference Guide - Properly articulating your design choices might be all it takes to pass review. What better way to make sure you’re using the right words (and the right colors, for that matter) than this color theory guide? Color relationships are simple to understand, terms are clearly defined, and, best of all, this cheat sheet is sized to be your desktop background.
Responsive Web Design - Responsive design isn’t alchemy or even rocket science, for that matter. Simply put, all you need to ensure your web design is responsive is adhering to a sizing list of pixels. This great little cheat sheet includes the sizes of everything from flip phones to desktops. It’s also print-ready, so pin it to the office wall to (hopefully) avoid any future questions as to whether your design is responsive or not.
Font Family Reunion - The developer of this project called it the “caniuse.com for default local fonts” and that was no exaggeration. Ever want to know whether the font you’re using will be compatible with a certain OS? Look no further as this website makes it easy to look up default font lists for each OS.
A Complete CSS Cheat Sheet - Robert Mening, a web developer out of Malmö Sweden, has compiled a hefty, 29 page tome to the world of CSS cheat sheets. Great for beginners and old hands alike, styling your site could not be more simple.

Online code editors

For more see here

Thimble - Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.
CodePen - CodePen is a social development environment. At it's heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating tool for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.
jsFiddle - It provides a custom environment (based on user selections) to test (or fiddle with) your JavaScript, HTML, and CSS code right inside your browser.

Front end frameworks

For more see here

Bootstrap - HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Foundation - Family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
Semantic UI - Development framework that helps create beautiful, responsive layouts using human-friendly HTML.
uikit - A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Task Runners (Package Managers)

For more see here

Grunt - JavaScript task runner all about automation.
Gulp - Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
npm - Pack manager for JavaScript.
Bower - A web package manager. Manage components that contain HTML, CSS, JavaScript, fonts or even image files.
Webpack - A module bundler for modern JavaScript applications.

CSS Preprocessors and Compilers:

For more see here

Preprocessors

A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.

Sass - A very mature, stable, and powerful professional grade CSS extension.
Less - As an extension to CSS that is also backwards compatible with CSS. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
Stylus - A new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Compilers:

If you are just getting started with a CSS preprocessor you might want to make the transition easier by first using a 3rd party compiler, such as the ones below:

Compiler Name	Sass Language	Less Language	MAC	Windows
CodeKit	✔	✔	✔
Koala	✔	✔	✔	✔
LiveReload	✔	✔	✔	✔
Prepros	✔	✔	✔	✔
Scout	✔		✔	✔
Crunch		✔	✔	✔

Text Editors for code:

For more see here

Atom - A text editor that’s modern, approachable, yet hackable to the core. One of our favorites!
Sublime Text - A sophisticated text editor for code, markup and prose with great performance.
Visual Studio Code - Code editing redefined and optimized for building and debugging modern web and cloud applications.
Brackets - A lightweight and powerful modern text editor; written in JavaScript, HTML and CSS.

Collaboration Tools:

For more see here

Slack - Messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive.
Trello - Flexible and visual way to organize anything with anyone.
Glip - Real-time messaging with integrated task management, video conferencing, shared calendars and more.
Asana - A Team collaboration tool for teams to track their work and results.
Jira - Built for every member of your software team to plan, track, and release great software or web applications.

Inspiration & Tutorials

For more on Inspiration see here

For more on Tutorials see here

CodePen - Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.
Dribble - A community of designers sharing screenshots of their work, process, and projects.
Codeacademy - It’s almost like a university course, only you control when and where class happens. Codecademy’s beginning web development course walks you through the basics of HTML and CSS, giving you projects throughout to practice newly learned skills.
Mozilla Dev Network - From the folks behind the Firefox browser comes this helpful list of web development tutorials. Focused on HTML, CSS and JavaScript, tutorials run the gamut of beginner to advanced.
GitHub for Beginners - GitHub is the de facto collaboration tool for many software development projects. If you want to work in web development, familiarity with GitHub is a must. This tutorial is a great way to learn the ins, outs and terminology that make the networking site tick.
Coding Pitfalls for Beginners - Read this last tutorial after you’ve spent time learning your chosen web development frameworks. Also from the Tuts+ team, this article outlines some of the common mistakes made by beginning programmers.

Icons

For more see here

Font Awesome - Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
IconMonster - A free, high quality, monstrously big and continuously growing source of simple icons.
Icons8 - An extensive list of highly customizable icons created by a single design team.
IconFinder - Iconfinder provides beautiful icons to millions of designers and developers.
Fontello - Tool to build custom fonts with icons.

Icons

For more see here

Website Speed Test - A page speed test developed by KeyCDN that includes a waterfall breakdown and the website preview.
Google PageSpeed Insights - PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
Google Chrome DevTools - Set of web authoring and debugging tools built into Google Chrome.
WebPageTest - Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
GTmetrix - Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

Web Development Newsletters

For more see here

wdrl.info - A handcrafted, carefully selected list of web development related resources. Curated and published usually every week.
webopsweekly.com - A weekly newsletter for Web developers focusing on web operations, infrastructure, deployment of apps, performance, and tooling, from the browser down to the metal.
web tools weekly - A front-end development and web design newsletter with a focus on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of various apps, scripts, plugins, and other resources.
smashingmagazine.com - Smashing Magazine is an online magazine for professional web designers and developers. Useful tips and valuable resources, sent out every second Tuesday.
front-end dev weekly - Front-end developer news, tools and inspiration hand-picked every week.
/dev-tips - Receive a developer tip, in the form of a gif, in your inbox each week.

Git Clients

For more see here

SourceTree - A free Git & Mercurial client for Windows or Mac. Atlassian also makes a pretty cool team Git client called Bitbucket.
GitKraken - A free, intuitive, fast, and beautiful cross-platform Git client.
Tower 2 - Version control with Git – made easy. In a beautiful, efficient, and powerful app.
gitHub Client - A seamless way to contribute to projects on GitHub and GitHub Enterprise.
Gogs - A painless self-hosted Git service based on the Go language.
GitLab - Host your private and public software projects for free.

Good Practice

This page contains an outline of principles of good practice when designing a website, some of which I used when designing my website, and how I came up with my own design.

First an overview of some basic good practices to follow:

Mobile First Approach

Modern designs take a mobile fist approach, this means that when making the website one must consider User Experience on a mobile.

Consistent Design

When designing a website consistency is very important, in design and navigation. This means that when a user goes to a different page from the website they should not be confused as to were they are because of inconsistent design (very different colours, layout even fonts). Navigation should flow naturally, requiring a minimum amount of clicks before the user reaches the desired destination, and giving some form of feedback to the user as to where they are and were they are going if a website element is clicked.

User Control

Users like to feel in control of everything, what they here, see and how they can get somewhere.

Inspiration for this design

When designing my website my decision was mostly influenced by the fact that only CSS and HTML are graded in this assignment, so I decided to use RUBICON because their design is one that can be implemented with only HTML and CSS (with a few minor changes) and still look modern.

landing page inspiration — Fig.1 - Rubicon website landing page

The Navigation Bar

RUBICON uses a sticky top navigation bar which is collapsed when scrolling down past a specific point, and it appears when scrolling up.

navigation bar inspiration — Fig.2 - Rubicon website navigation

I decided to design a sticky top navigation but without the collapsing features, and added a hover effect which I believe adds to the User Experience by letting the user know that the item is clickable, also after they click it that know where they currently are.

Content

Landing Page

RUBICON as seen in Fig.1 chose to use as main display a background with a video of them working, it seems to be a trend (using a video as a background), but it can be resource exhausting as videos usually are large. After this main content there is the rest of the page which can be seen by scrolling down.

Glossary Page

For this page I looked for examples on google search and codepen, the one that caught my eyes is this pen by Alex K. There are main categories with subcategories which are collapsed, when the user clicks on a subcategory it displays the contents and gives some visual feedback by turning the icon into a icon.

I used the same format but with different click effects, instead of a + sign on the right of the subcategory, there is a chevron-left icon, this icon rotates so it points down when the subcategory is clicked, also a tick icon appears in the left empty square.

Comparison Page

For this I decided to use a blog type layout, did not base it on anything specific.

Resources Page

This was based on this CCS3 animation example.

Fig.4 - CCS3 animation used for inspiration.

When a block is clicked it plays an animation and it displays the content covering the whole page, this can be closed by clicking an X icon on the top right.

overlaid glossary inspiration — Fig.4 - CCS3 animation used for inspiration.

I changed it to remain consistent in the design, instead of having it appear as it covers the whole screen, I had it centred and appear as an overlay with a grey transparent background.

Footer Section

For this I used images google search and found some interesting examples of footers, the one I used for Inspiration was on ElegantThemes website, under the name Divi Footer Layout Pack 06.

Footer design used for inspiration — Fig.5 - Footer design.

What I decided to do is to fix the footer at the bottom, but make it collapsible by clicking an envelope icon, this way if there is a lot of page content, it makes it easier for the user to access the footer. It will contain some about text, quick links and a Contact Form which the user can fill but the submit button is disabled. Under this footer there will be a Social bar which is always visible, and the footer collapses under it.

From what can be seen I used in total 5 sources for inspiration when creating this website, mostly for layout and positioning. For colour pallete Adobe Color Wheel was used.

AS1 Reflective Journal

First the introduction about what this assignment is

We needed to do a presentation website, by which our knowledge can be assessed, meaning that because we only learned HTML and CSS only these two will be taken into consideration when grading, so I tried to do everything with only CSS and HTML.

Because of this I chose to use some hacks from CSS-tricks, mostly for toggling menus, overlays or pages.

The Journey, from Design to Implementation

It started slow, with talks between classmates mostly, or experimental layouts done in Mozilla’s Thimble.

Design

Work for the actual design started during classes, talking with classmates, looking on CodePen or Awwwards websites, and trying colour pallets, different layouts and styles. This took about a month until I started working on some wireframes, done with pen and paper only. What came on the spur of the moment I put on paper, that’s why some of them are completely unrelated to the others.

All the wireframes were thought as only one html doc. They wireframes are mostly for the landing page, as the other Pages would be consistent in design Here are some of them:

wireframe design no1 — Fig.1 - Wireframe Design no1

This design (Fig. 1) was thought with the Navigation being on the left, and whenever an icon is clicked (the icons would show the name of the page when mouse is hovered on them), the linked page would slide from the right.

The icon that looks like a phone, collapses or shows the footer, one of the main reasons why I did not use this design is the lateral footer which looked odd, and on a mobile it would cover most of the screen when not collapsed.

wireframe design no2 — Fig.2 - Wireframe Design no2

This design (Fig. 2) was thought as being a comic book style landing page, and the contents would appear as overlaid with an icon on the top right which would allow for the user to close the overlaid page, as shown in the example (Fig. 3) below:

Overlaid Page design — Fig.3 - Overlaid Page

The next design (Fig. 4) is what I ultimately used, with some modifications to the navigation and the content area.

The next wireframe is ultimately what I based my design on. It includes some of the elements of the previous designs, the collapsible elements, the icon for the footer, and the navigation fixed on top.

All the other pages were done while keeping the footer and the navigation consistent. For the mobile version some elements where removed or styled to fit differently.

In all it took 2 weeks to design and program, working approx. 8hr a day. I took longer that I expected, a lot of tinkering and adjusting was done, this is one of the stages where I need to improve as it takes longer than it should.

Implementation

For this stage I spent approx. 5 days to write the code, and another 2 days to optimize and tinker with it. Because I chose not to use javaScript I implemented some hacks that I got from css-tricks using labels and inputs (either checkbox type, or radio), this allowed me to toggle between elements.

What I learned

I learned a lot not only about how front-end development works, but also about how I work and what I need to improve.

One thing I really need to improve is writting tidy code, I noticed during styling in CSS that a lot of the code I wrote does not have a place, it could be removed and nothing would change.

Another thing I need to improve is the comments in the code, or better said the lack of it, it seems I only leave comments to sepparate sections, but not to explain the code that I write. This is probably because I already know what it does in my mind, and this makes me write large blocks of code without checking.

<HTML> validation

For validation I used w3c Markup validator online.

This is where I saw if standards were kept or not, and because I used some CSS hacks for some parts I got some red flags, they were fixed, but there are still some warnings.

Here is a screenshot of the results:

Html code_validation — Fig.6 - Html validation

As seen in the screenshot there are 19 Warnings for the HTML file, all about not having the proper headings, but if you check the code that is because instead of wrapping with <div>, I wrapped sections in <section>.

I was pleasantly surprised that there weren’t more errors.

Website Audits

In this section audits using google developer tool audit will be performed, this is to check performance, accessibility and good-practice with code writing. It is always a good idea to perform such audits during the development cycle, as it also gives advice to how it can be improved.

The final score was one of 3 audits, they were all very close so chose one at random.

performance

This audit measures how fast the page and all the resources are fully loaded, it shows timing for First meaningful paint (which mean that content is displayed), to consistently interactive (this is where content can be interacted with).

It also gives advice on what can be improved and how.

score for performance, and improvement advice

accesibility

This is used to discern if the webpage can be read using accessibility tools, like screen readers for example. It checks if elements have discernible names, if they describe contents well, and also checks the colour contrast.

This section also gives advice to how it can be improved.

score for accesibility, and improvement advice

best practices

This checks how the code was written, and gives advice for improvements.

Conclusion

I learned a lot when doing this website, and a lot of things I would be doing differently next time. Most of what I learned is how to optimize my workflow better by preparing designs better before actually coding them, choosing the colour palette, choice of fonts for headings and paragraphs and the layout of the text on page.

To be honest making the content for the pages took longer than coding the design in HTML and CSS, so I need to improve a lot on this area.

Regarding CSS and HTML learned, I can say that practice makes perfect, this I saw during the whole 2 weeks of work, towards the end everything was running smoother, work flowed more natural and faster, and ideas were easier to think of.

There are also some interesting CSS hacks that I learned through CSS-tricks, mostly the label>input hack where input type checkbox/radio is used to toggle between elements.

For HTML the only thing that was new to me is using semantic elements and the <figure> element with the picture and video elements.

As a final conclusion I can say that my workflow needs improving and that I would probably finish faster if I were to do it again, with the knowledge I have now.

Our working process

Meet the TEAM

Nicolae Ifrim

CEO

Modou Lamin Sonko

Developer

Daniel Raymond

Developer

Adam Vincent

Designer

web/computing related terms

html terms

Jobs Comparison

Being a Web Developer

What does a Web Developer Do?

Being a Games Programmer

What does a games programmer do?

Web Developer

Duties included:

Challenges faced:

Languages Used:

Interview Difficulty:

UK Average Salary:

Games Programmer

Duties included:

Challenges faced:

Languages Used:

Interview Difficulty:

UK Average Salary:

Conclusion

Essential Cheat Sheets

Online code editors

Front end frameworks

Task Runners (Package Managers)

CSS Preprocessors and Compilers:

Preprocessors

Compilers:

Text Editors for code:

Collaboration Tools:

Inspiration & Tutorials

Icons

Icons

Web Development Newsletters

Git Clients

Good Practice

Mobile First Approach

Consistent Design

User Control

Inspiration for this design

The Navigation Bar

Navigation functionality

Content

Landing Page

Glossary Page

Comparison Page

Resources Page

Footer Section

AS1 Reflective Journal

First the introduction about what this assignment is

The Journey, from Design to Implementation

Design

Implementation

What I learned

<HTML> validation

Website Audits

performance

accesibility

best practices

Conclusion