Sign in

Sameeha Rahman
Front End Developer at Switchd Ltd. | MSc in Computer Science @ QMUL (2022)

The first time I ever worked on a WordPress website was in July 2019 and didn’t prepare me for Project 2. Of all the projects I have currently completed, this was relatively difficult to create.

The project was about creating a realtor’s website to display chalets on sale and rent.

The theme I used for this website was Rivington, a dark real estate theme. It was simple, professional, and had contrasting but complementary colours.

I won't be going into everything I did, but only the areas that I liked working on.


The theme’s footer had all its elements stacked one…

This project was more familiar to me because I had worked on multiple Bootstrap websites previously

This project was about creating a simple Bootstrap only prototype website for a film festival. I enjoyed working on it and created quite a few components that I will be showing today.

Colour-changing navigation bar

On the initial page load, the top navigation bar is transparent, as the full-page image header is has a dark background.

On page load

It then transforms into a solid green after scrolling down past the full-page image.

Photo by Shahadat Rahman on Unsplash

I am a devout believer in making use of all opportunities that come my way. And this series will be on my OpenClassrooms journey in the Front-End Developer path, one amazing opportunity that came my way in September 2019.

Sometime in May/June 2019, Facebook Developer Circles introduced the Developer Circle WebDev Training Course conducted by OpenClassrooms and opened up applications for Track 1. Track 1 was a sneak peek with access to all courses offered at OpenClassrooms, but the real deal was getting through to Track 2. Track 2 of the course gives access to the Front-End Developer Path, where…

Hello and Good Morning! Welcome to the last (hopefully) post in this series! (Probably not…)

This is a short checklist of basic things that weren’t covered in the previous posts;

  1. Custom styles 🎀
  2. Images 🖼️
  3. Custom fonts 🗚

Step 1 — Prettify the UI

Going through my app, I was able to see a few things I wanted to change.

Remember those little messages below the input fields in the login, register and reset password pages?

Error message with underline

I just realized that, since they are essentially <ion-item>, they have a line at the bottom. Not that great.

Thankfully, it’s a simple fix! There’s a global property called no-lines

Hey all! Last week, we added Firebase and 3 authorization pages (Login, Register and Forgot password), and boy, was that a really long post (Honestly, I got soooo tired halfway through).

This week we will integrate Firebase to all our existing methods.

The coding will be quite simple, as we have already integrated AngularFire into our app. The major changes will be made only to the back-end logic in the home.ts file, and one simple addition to the home.html to handle lists we get from Firestore.

Step 1 — The C in CRUD to Firestore

We’ll first start with adding functionality to the addTask() method. But first we need…

As promised in my first post, we will be connecting this app to Firebase. But I will also be including user authorization (i.e. register, login, forgot password). That’s what we will be tackling today!

Firebase has everything, from authorization to a database to file storage, one of the many reasons it’s a good choice to add to mobile apps. In this post, we will explore Firebase, create a project and make a handler component for Firebase in the app.

Step 1 — Setting up the Firebase console

But first step’s first, you need to create a project on the Firebase console. All you need is a Google account…

In the last post, we implemented the C and R in CRUD for a simple to-do list app. It worked like a charm!

Now, onto the other half of CRUD; Update and Delete.

We will first begin with changing the GUI so that it can fit both the update and delete features. Thereafter move onto the TypeScript code, to show its functionality.

Step 1 — Change that look

Whoops! Little forgetful ole me! I didn’t change the app name on the home page… 😅😅😅

Go ahead and call it whatever you wish (I’ll be basic with ‘To-do List’).

The first step, to be done in the…

In the last post, we went through the (extremely 😪) lengthy process of getting your app set up. Today, I hope to get started on the first half of CRUD, creating and reading a to-do item. A brief summary of the app structure will be found too.

Wireframe of the app

What I hope to implement, as seen on the side, is a very simple design; a text input to type the tasks, a button to add it to the list, a list view to view the items and finally a delete button to remove the items from the list. …

Hey all! A new post each week or two, on an up and coming tech topic — Ionic! By the end of this series, the goal is to create a simple CRUD (Create, Read, Update and Delete) to-do list app, which is also connected to an online database, like Firebase.

In this post you will learn how to;

  1. Set up an Ionic Project.
  2. Run it on your browser.

Hybrid Mobile Application — What are they?

Simply put, they are mobile apps created by the easier to learn languages; HTML, CSS, and JavaScript. The beauty of developing a hybrid mobile app is the fact that they can be…

Hey All! This week we will be looking into a behavioral design pattern, Command. If you can recall from my first post, a behavioral design pattern focuses on how classes and objects communicate with each other. The main focus of the command pattern is to inculcate a higher degree of loose coupling between involved parties (read: classes).

Uhhhh… What’s that?

Coupling is the way that two (or more) classes that interact with each other, well, interact. The ideal scenario when these classes interact is that they do not depend heavily on each other. That’s Loose coupling. …

Sameeha Rahman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store