A website for a fictitious web and app development company. The company has a copywriting and design-first orientation, which is geared towards a clientele with a specific mentality. The client has an entrepreneurial spirit but has an aversion to business-speak-catchphrases. No "implementing strategic deployments using the emerging third world labour market" kind of talk. Despite that, a person well-versed in sound business sense.

She or he has an innate sense of respect for their customers and, while being ambitious, is not specifically motivated by financial incentives. This is the type of business owner who would try to run on a sustainable model and who - beyond their basic needs and a holiday here and there - isn't out to make any killings.

Think of Martin Shkreli. Now imagine his total opposite. Our client may indeed have a lot of financial and social clout, and be respected in their field. In any case, he or she would have earned their position through their interpersonal skills and their ability to make the correct judgment of situations and people.

I imagine this website to be seen by a potential client after a casual social meeting, probably by chance. "Oh, you make websites and apps for people like me? What do you mean by people like me?" "Here let me send you our site." and then upon first glance there is already a sense of connection or not. It's not intended to necessarily draw in people from the web via links. Still, that sort of functionality is present and prominent. A contact page and a few CTA buttons on the main page cater to that situation. The primary client would already have an Electrophile employee's phone number in their mobile, though.

If you refer to first_README.md you can chart my progress more closely. I found it difficult to have any real sense of how to design the site until the company vision, fictitious or not, became clear. It reminds me of my experience as a freelance audio professional - the most difficult jobs are the ones where the client doesn't know what they want. In the early wireframes, you might get a sense of messing around in the shallow waters. Some of the colour schemes and font ideas did indeed survive, but the intent and purpose have changed.

The genesis of the site was in a conversation with my previous mentor. While she was clearly capable and had some good advice for me initially, we had to part ways due to scheduling obstacles and some communication problems. I had initially built a site for my audio services, which I approached in an unorthodox way. I used background images and audio players as the main content. She immediately began picking at issues of contrast and visibility - which were the elements I liked the most. It's a dark, moody website that I want people to spend some time relaxing in. Listen to the music, allow an atmosphere to form.

That is not for everybody and admittedly a bad idea for a Code Institute Milestone Project. I can imagine that there are certain concepts you want to be sure that a student grasps - design and structural concepts. Moreover, it being representative of my musical work, I was perhaps too sensitive to any suggestions I didn't like regarding it.

I then thought, why not build a site I can later adapt to my own needs? I have the intention to freelance as a web developer as soon as I am able. A quick Google search of interesting scientific terms yielded the word "electrophile" which I liked.

Mentor meeting

Furthermore, at this point, I got in contact with my replacement mentor. His feedback was largely in the vein of practical design fundamentals. It was, in fact, his remark that my ultra-sparse redirect.html page was his favourite that gave me the best sense of how to proceed.

I then really homed in on the bulb image as a central theme for the site. A solitary dark bulb is the index page, and every bulb is a link to the next page.

By this point, despite having enjoyed the process of taking the site to its 90% state, I was ready to move on. I had been dabbling in the Javascript and JQuery sections of the CI course and was getting very wrapped up in it. On a second meeting, my mentor had more feedback for me, specific points that I could write up in a checklist and get through in a single morning.

The primary offering of this site is to share a conviction with a client who believes that social responsibility, entrepreneurial spirit and creativity need not be exclusive. There are indeed the Martin Shkreli's of the world, who would avoid our agency like the plague and good riddance. I am reminded of Derek Sivers (CD Baby founder, in his free ebook that he gave when you signed up with CD Baby a million years ago) who said, "Know who it is you want to exclude and commit to their exclusion wholeheartedly". I like that approach, as unfriendly as it initially sounds. It does provide an instant clarity grounded in common sense insight.

This is achieved first of all by the interactive, playful index page, which hints at you to interact right away. This, it is hoped, will keep the Bah Humbugs of the world out, to some extent.

A bulb comes on and there are textual references to "real-world value" (indicating that we aren't into hyping things to sell them dishonestly) and the keywords "transparent" and "ethical" in regards to our end-user. The textual references continue throughout the site in varying amounts.

Visually, the use of white space and contrast is a hint that we might be more "artsy" than the guys who made the drillbit online store you were just looking at. Everybody needs a drillbit once in a while, and it's fantastic to have all the options available at once on your screen. However, when you have other goals, you might not want that.

A secondary offering of this site is to share a passion for the power of the written word and the image. The right client will be tantalisedand sorely tempted to know what we would do with his or her business. They would have a feeling of, after the long and personal journey with their self-image with their work, finally finding a partner they could grow with towards a specific goal. They would have to restrain themselves from coming over to our office and wanting to sit in and take part in every minute of the process. They would instinctively feel their feedback is welcome and that our boundaries are presented comfortably and reasonably.

Again, this is best illustrated by referring to the textual content. While visual elements are very important in giving people a sense of creative promise, I think the emphasis on quality copy plays an important role for the right person.

Another offering is a sense of learning and the exchange of ideas.

This is accomplished by having an invitation to a weekly webinar on design and correspondence, see right of the image below. I have personally been the beneficiary of lots of online content, and am often astounded at the amount available. Having this as a secondary call-to-action on the main page shows that we value this as a company. It is also sound business practice in 2021 to position oneself as an expert in this way. It attracts and cements client relationships where mutual exchanges can happen, which I think is a very interesting thing as the world gets to grips with the internet.

I found this category of remarks counterintuitive to think of after the fact, and therefore a good learning experience. Checking the live output of my IDE as I was going seemed the obvious primary testing procedure, but of course, I take CI's meaning to be something a bit deeper.

Asking other people whose opinion I respect was my primary testing procedure. I have some very talented designers and photographers as good friends, and I did often request their input. I would send them a live link in the early days of Gitpod, and then later on just the Pages link. (I still haven't found a VS extension that replicates what the "python3 -m http.server" command gives you when you make the link public. Very handy!)

My friends were all wonderfully opinionated and clear in their feedback. Mostly they would encourage me to reduce and minimalise. The decision to completely remove the video media, especially, was encouraged by them. I often have an unsure feeling with web design that "more is always needed". My friends helped me be more decisive and committed to my minimalist leanings. Not least my mentor Brian, too.

Internet Explorer and Edge are awful and I confess I didn't test anything with them by choice. I am new to the world of coding and I don't want to get discouraged, depressed or even infuriated. It does seem like lots of developers have been ignoring it the last few years. I drew some comfort, especially, from the Tasty Syntax podcast episode "Potluck...is Safari the new IE11?..". A bit too ultra-geek for me, but it was a relief to hear that many people just ignore IE/Edge.

Chrome and Firefox on the other hand were amazing. I am using Visual Studio Code to work in, and the Live Server extension was routed primarily through Firefox. The developer tools in Firefox, if you are using Flexbox, are very helpful. Chrome is working on that functionality, it looks like, but it's very much there in Firefox. The Electrophile site was published on Git Pages about halfway through, so I have a Chrome browser tab on all the time that I cross-reference once in a while. I may route to Chrome when the time comes to use more JavaScript.

Speaking of VS Code it has been a lot of fun learning how to use and customise. Although using VS Code, on the surface, doesn't sound like a testing procedure, the steps I went through to integrate it with GitHub made me a lot more aware of how Git works in practice. I ended up simply installing the GitHub desktop app, and that did everything I needed. The long and painful process of getting there, however, taught me what a pull request and a branch merge are. I lost some work in the process, which made me more careful with my commits as well as helped me develop a workflow that kept my eyes on the goal of whatever it was I was trying to accomplish. As obvious as that sounds, you can easily get lost in a rabbit hole when you are new to this, I think. At least I easily do.

The Am I Responsive website was useful for my doubts, and it is helpful that you can scroll on each screen.

It's a very handy testing tool.

Lots and lots of challenges from the start.

Positioning is possibly the most frustrating and humbling part of working with HTML and CSS. I struggled at the beginning to create columns, then I learned how to do that in a few ways. Once I got ok with that, I struggled to get the content to sit right in those columns. Then I had to get ideas like flex-direction and what the align property does into my head. Luckily I enjoyed the learning process but it was indeed frustrating. While I disapprove of the action, I do in theory see why CI jumped over Flexbox and Grid to get to...

Bootstrap, which did not appeal to me. I didn't like the endless class names cluttering up my HTML, and I didn't like that I didn't know what was happening. It felt like cheating. I can see how someone could get good at it, make nice looking websites and still not learn CSS properly. I know that's venturing into the online troll world, and it's not intended as such. It's just how I felt about it, especially combined with feeling it was difficult to understand for me.

Flexbox and Grid on the other hand, are marvellous. I spent more time on Flexbox than on Grid, but I think Grid might be a lot easier. These technologies impress me with the way they anticipate certain needs. As a new coder, I get lost with "can I align-self this...? Should I use flex-basis or just add a width..?" but there are times when you appreciate what Flexbox can do for even little layout applications. The employee quote section, for instance, on the About page, left column, is a great example of this. I could not for the life of me get NAME on the left and PICTURE on the right. I tried a few kinds of 'margin: auto' and was just going into 'position: absolute' hell when I remembered that I could just group them under a single div and display the pair as flex. Wonderful. See left of the image below.

Not to mention the fantastic flex-direction changes you have for responsive modes. Or the way adding the 'flex-wrap: wrap' made my main page just fall right into place with a little bit of 'order: 1' and 'order: 2'.

It's indeed arcane in some sense, but I am enjoying learning it.

When I did have videos there was a real bother with getting them to be responsive. I researched it online, and some thoughtful person had uploaded a precise and concise walkthrough. You can see a link to that in my earlier first_README.md.

On different screen sizes the site keeps its character, mostly. There was one trade-off for content over visual continuity. Every page has a bulb that connects you to the next page, an alternative navigation of sorts. I like the prominence of the bulbs and their static positioning. On mobile and tablet views, the positioning is consistent except for the media page, where the bulb is lower in the scroll space. I decided on this compromise because the moth image with its headline is a welcome contrast and maybe a bit more fun for a viewer. It can be irritating for a user when a small design element becomes emphasised over actual content, I think. The element becomes a gimmick and the content is downgraded.

I left the bulb off the contact page for a similar reason. I had a watermark style bulb in the background for a short spell and it felt oppressive.

The colour schemes came from using Figma the first time and liking the grey default colours. I believe the grey I used is a touch darker than the Figma colour. Part of my initial intention in making this site is to do something I would normally never do. I like dark and moody colours, so I went for bright and energising. This grey was a good place to create contrasts with both blacks, whites and a deep grey-blue.

The fonts on the other hand were the result of much flicking through Google fonts in short sessions, over a few days. I ended up going with Roboto, as it's a fantastic sans-serif. I used Lekton, which is mostly a bit ugly, as the monotype for the nav ul. If you type anything more than a few words in it, it is offputting. In this usage, it adds a cool space-age feeling that's a touch Apple/NASA.

The header is the usual logo on the left, links on the right setup. The logo is created by reducing the line-height and using a before pseudo-element. I chose the yellow line as the active class setting because yellow and black are a textbook high contrast set. Again, I was going for energising and bright. I find it satisfying visually, maybe because even a hint more of that yellow would be awful. I initially had longer ul li names ("About Us, ...In The Media, Contact Us") but my mentor pointed out that having the minimum allows for more breathing space in smaller views. It also just looks nicer, taking the Lekton a bit more towards Apple/NASA territory.

The footer has no social links. I think a company like this wouldn't be social media heavy in general. The bosses and employees might personally be promoting the company through their private social media accounts, perhaps. This company is a bit aloof from the constant updating and competition for attention, however. Instead, the webinar - which I imagine to be interactive and personal - fulfils the role of creating community. Also, a clear boundary of when a project is over is important. Clients can sometimes stretch a project with endless revisions and small updates, which isn't good for a small company beyond a certain point, I imagine. It might be a good idea to have a certain limit of interactive spaces with your clients. There are social media links on the contact page, but I imagine them leading to placeholder accounts that only post seasonally.

The barcode was something that I visually enjoyed the moment it popped up on my screen. In some ways, you could say it is the opposite of the Electrophile philosophy. A barcode represents something for sale, and the argument could be made that all talk of value and transparency and ethics goes against that. However, I felt there is a bit of a light touch about it, and that it has a homoeopathic effect, where a bit of a bad thing provokes a healthy response in opposition. In practice, now that I have had some time with it, I would spend a bit of time designing and testing something more on point. It's beyond the scope of the timeframe I have had since it is a fictional company that is only becoming clear to me in slow increments. As it is I believe it works well enough.

It is the only link on the site that goes to the...

Dark bulb index page where you started. I dabbled with the idea of having it say "click me" somewhere, but it felt a bit insulting. When you click it, you start a chain of pages, all of which have a light bulb in varying colour schemes. Each bulb links to the next section. When you click up at the logo, it redirects not to the dark index page, but to an alternate main page that has more cohesive heading text.

The images I chose were taken from Google searches, using "large size" and "for public use" filtering. I then took them into Affinity Photo and cleaned them up. I used UV, black and white, sepia tone and custom filters to make different versions of each image. I then uploaded them to my VS Code project, comparing them in actual use. There was a certain tonality I was going for, you see it best on the media page.

Getting it on GitHub Pages happened naturally. I was expecting a complex process. It was pretty painless and came about upon the prompting from my mentor to send him a link. Without too much thought put into it, I found the right section of Git Hub and got the site live. Since then I put a few other sites I built up and one of them is not working. There seems to be a few things that can go wrong with Pages and I am relieved that so far this site seems to work well. The errors I have on the other page that I tried to publish to Pages are difficult to understand and so far nothing I have tried works.

Running my code through validators was very helpful as it pointed out a few things I was unclear about. External links have a certain protocol with the https: formatting. Mostly the code was fine and didn't need anything done. The HTML validator did complain about my not using an h element in my main section for each page, however, I didn't structure my content that way in the first place.

I didn't borrow any code from any resources that I need to credit. The iframe solution, which I document in first_README.md, was a solution I got from someone else. However, since there are no videos on the final site, I didn't think I needed to mention that.

I was very interested in making sure that my HTML and CSS foundations were as good as I could get them before moving on. My previous experience as an audio professional, especially with the mentality that comes from constant troubleshooting, gave me an edge in that my learning process is bit by bit. While I was often confused and frustrated with CSS, I simply applied the mentality I had from my audio work. When it's overwhelming, slow down, break it into small bits, don't allow the volume and pace of information to distract you from whatever small bit you are doing now. I feel like I am at a comfortable starting point with CSS thanks to this project and the resources I had at hand.

At times I wonder why CSS was so unintuitive with positioning. I would have thought that there would be easier ways to create columns and move things around the screen. However, when I think that all this is accomplished using textual commands, it is pretty amazing. Despite the irritation, I can't help but be impressed with the elegance of the language as a solution. I must confess I enjoy learning it to quite a degree.

I like HTML very much due to its incredibly simple and powerful structure. It's like a skeleton, incredibly sturdy and adaptable. Most people can pick it up quickly and its capacity to organise information is really helpful. I don't like reading it as much when it is full of class names and IDs, attributes and inline stylings. When it's just on its own, however, it makes things very clear.

The process of making the site reminded me in many ways of any other creative endeavour. Clarity of intention is so fundamental. When I started it, I only knew what I wanted from an elemental standpoint. I knew I wanted high contrast and readability. Good images, too. The site felt unfocused and pointless. I was focused on little things like getting "three even columns" and "position the button in the centre". When I stepped back, I wondered often if I made the right choice to use this site as my Milestone.

However, at a decisive turning point, I grasped the character of this fictional company and I knew what I needed to do. I think in part it's because it's a company I would like to create, to some degree. When that happened, I found all my decisions were made in a matter of seconds. There wasn't any foundering about or experimentation. I made myself experiment with a few things but it was just to be thorough.

There were many stages I particularly enjoyed - working on the images and the text content especially. Web design is easier with image, font and content cohesion, I think. Some of the most useful steps in my process involved taking my time choosing the right visual elements.

The areas that I felt the most challenged by were positioning things in CSS, as well as strategising layout and styling decisions to be in harmony with one another.

Redundant class names, poor class naming conventions was another challenge. I started with a sense of dislike for the Bootstrap framework, and I still think my choice to learn Flexbox and Grid was right for me. However, I now think I would have benefited from internalising the Bootstrap naming conventions. I am presently learning a bit about BEM, which seems pretty close to Bootstraps class naming conventions.

One of the recurring thoughts throughout the middle part of the process was the wish that I had a better grasp of the mobile-first approach at the start. While I had it clear in my mind when I got to building the site, I was in a rush to make sure my columns were working and that Flexbox wasn't suddenly obsolete. I regretted that as soon as I got to adding media queries. It is so much more elegant, code-wise with Flexbox when you work from a small device upwards. I could be wrong, I'm new to this, but it does seem that way to me.

I had an hours stab at rewriting the CSS to be properly mobile-first but abandoned it as it felt like an inefficient use of my limited time.

Towards the end, I started using CSS variables, perhaps a bit late in the project for it to be of any great help. Of course, later on, when comes time to adapt the site to something real, it could be greatly helpful.

I have to admit that I had a very difficult time with much of the Code Institute material. I can see there is some real knowledge and capability in the instructors and I am at a loss to understand why the lessons don't reflect that enough. I relied on other content, some of it paid, to move forwards. Especially considering that I wasn't in favour of using Bootstrap, I felt very much on my own. While I understand and agree that our study should be supplemented with our off-course research, there has already been too much of that.

I leaned heavily on Kevin Powell's lucid and accessible CSS lessons. Also Scrimba.

CI offers outstanding student support and the intelligent, friendly staff I have interacted with have been very encouraging. I need a framework of study especially as things get more difficult now. I hope that an update to the didactic content happens soon enough that I may benefit from it, though. It is frustrating to now be moving forwards with learning JavaScript, learning from other online resources and using my CI study as a map rather than a central resource.