While completing the Module 4 JavaScript/Rails project (blog link HERE), I also had a wonderful opportunity to create a professional website!
Roughly a week and half ago, my wife and I were hanging out with some friends from our church who own a Roofing business. They’ve been in business for roughly a year or so, and they talked to us about how they wanted a website, but couldn’t afford a professional. Being a Flatiron student with some experience with CSS, HTML, and recently, JavaScript, I told them I could build the site for them! We started planning right away, and I’ve learned so much from this experience.
Putting Ideas on a Page
After our initial discussion, the Janczewski family wanted a single-page static website for their roofing business with four main sections: About Us, Testimonials, Roofing Services, and Contact Us. I created a basic template for the site, using these sections, and added background-colors/background-images in each section. Initially, the page had a very basic setup:
After sending an initial, simple-looking site, the Janczewskis and I started brain-storming and I started to see their vision in my design. The original design looked very plain, and the color scheme didn’t match their logo design! After some back and forth, we decided to drop the About Tab, since the About section is at the top of the page. We talked about the idea of making multiple pages, but decided that one page would be perfect for the amount of content they wanted on the page.
JavaScript, HTML, and CSS
I used Vanilla JS, HTML, and CSS for the entire project, not even touching a framework. Since the website did not have a backend or needed a database, from a design standpoint, I thought this was the best way to go. I learned so much from this, such as how to design a “hero” image (thanks w3schools) to having a slideshow of photos, and creating rounded images, to name a few. I also utilized Mac’s Photos app to crop/edit some of the photos. This added a new level of professional look, and especially allowed for a gray-like hue throughout the page. Our design had gone from the above, plain look to a more refined, structured look that takes in some of the “roughness” of roofing work:
Hurricane Laura
Last Thursday, as I was working on this project, Hurricane Laura was growing to a Category 4 Hurricane, bringing with it a fear of destruction in the near future. I got a call from the Janczewskis, saying they decided to move to Orange, TX/Lake Charles, LA for for a month to work in the areas with destruction. They asked if it’s possible to get the website finalized and put on the web soon, since they’ll be in new territory. Oh, and by the way, on Friday of that week, they also landed an interview with the San Antonio news channel about their work in this area! Hearing this, I thought two things:
- Awesome. Let’s put the interview on the website with an iframe.
- I need to get this website up and running for them ASAP, so they can get customers.
Late Nights and Domain Names
While finishing my JS Project, I put Superb Roofing’s website to work as well. We found the superbroofing.com domain going for $2,000, which was WAY too much for just the domain name. We also found superbroofingllc.com and decided that, with the price, this was a great choice. After purchasing the site, I used GoDaddy’s Web Hosting to get everything uploaded. It was an pain-free, wonderful process.
Monday Morning we’re good to go!
As citizens and potential customers started coming back after evacuation orders, Superb Roofing became live! It was a joy to work with the Janczewski’s on this project, and it completely opened up my eyes to web design and being a potential web site designer while searching for jobs. Within 1 hour of being live, another roofing contractor viewed the site, and customers started viewing it as well!
I loved the way this came out. I can’t wait to see their business grow, and I’m considering adding a side hustle of web design, thanks to Flatiron School!