Archives: Projects

Calculation

preview of a tip calculator

Tip Calculator

Complete JavaScript no jQuery, some CSS and a design can make anything. The calculator actually works fine. Use it at Olive Garden or Red Lobster next time you go. Or don’t tip at all it doesn’t matter to me, I don’t even use the calculator I have no reason to…. I’m joking by the way

 Results


Fake Google

preview of google front page

 

A Fake Google?

Only one thing came to mind when I got this project.

“Can we actually do this?”

 Results

The page turned out nice and it does actually look like Google. It honestly wasn’t hard to do either, I mean it’s just a search box. and an image.  For safety reasons, all rights go to Google or Alphabet whatever they are now. There now I can’t get arrested over a page.


Blog

preview of simple blog page

Simple Blog Page

It seemed difficult to do actually when I was learning it in the course. I had to create the gray background which was fine. Than I had to create the separate rows, that are white, and make them responsive. Also, they couldn’t fill up the whole page meaning they had to have a max width to display on the screen. From the title all the way down to the actual post the page looks clean. I would actually use this in real life as my page. The course like I keep saying was good and practical and I learned useful things. I absolutely enjoyed watching the page unfold as I was styling it.

 Results


Animation

Preview of a box animation page

jQuery Box Animation

The famous framework is back at it again. This time I went a little deeper. I had to add a controller in order to move the box. Plus, I went farther and made the box animate on each movement.

 Results

Play around with the box and pay attention to the box as you move it around.


The Race

preview of car race site

jQuery Race

The most famous framework in my opinion is jQuery. It takes almost everything difficult or lengthy to do in JavaScript and makes it easy and simple. Simple enough for me to be able to make this fun race. I like the project not only because it is creative but also because I had to think. I was exposed to different patterns and how you should go about making anything dynamic and functional.

 Results

Another fun creation that was fun to make. It is fully functional, click “race” and enjoy the game.


Orbital Planet

Preview of the orbital webpage

Finally CSS Tricks

I appreciate art, you know any great creation. Then you take it to the next level if you coded that art. That being said I enjoy Codepen and their environment. The site is nothing but art work, css-tricks, JavaScript skills and just flat-out creativity. The site is inspirational to me and gives ideas. Anyone can create a pen but I just figured I wasn’t ready to create yet. However, I always wanted to create an animation in complete CSS. This course gave me the tools necessary to create this.

 Results

Enjoy the artwork, it was fun to create it. I should get on Codepen a lot more, just for ideas.


Bootstrap Hipstrify.io

preview of Hipstrify.io

The Weird Hippy Site

At this point in the Ultimate Web Development course, I was really in love with bootstrap. I couldn’t to design and create a website out of it. The only thing about the upcoming project was that, it was weird but “good” weird. The hippy thing was unexpected and once you click on the file… you will see what I mean. The thing is that the content directed focus on other parts of the site. You cared more about the artwork, the design and how the page worked more than the content. It could just be me because I didn’t care about hippies at all.

In fact I don’t know if there are still hippies out there. I thought it was just a seventies thing. Anyway creating the site was fun and useful. I got a chance to see how to practically use bootstrap. Also, how to form the elements of a page by using the grid system that was offered and more.  So, as I said earlier this was a damn good course. The projects were practical to me and a great form of practice.

 Results

Remember to enjoy everything other than the content. Besides I think there is some lorem ipsum in there, in other words “gibberish”.

 


Bootstrap Basics 2

preview of basic bootstrap webpage

The Basics of Bootstrap

When I first heard about Bootstrap, I was just learning about creating layouts. So, I wasn’t that good at styling and dealing with responsiveness. The UWD course that I took created by Brad Hussey was a damn good course. Especially because it gave me a useful portfolio. At this point of the course he went through all the basics of bootstrap and how effective it is. At the time I was learning I thought it was a twitter cheat code to the development game. You mean to tell me all I have to do is master bootstrap and I can “look” like a professional web developer.

Of course there is way more to it than that. Nothing is simple in this industry.

Influence

Back at the time of the course, Bootstrap was coined as “Twitter Bootstrap.” A mere marketing tool that was very practical and powerful. Of course that worked on me as well. Without knowing bootstrap, I immediately started to like it and see its value. The twitter guys were smart and influenced me. Truth is you don’t have to use it. With that being said you can somewhat compare bootstrap to salt.

“You don’t have to use it but if you don’t you might regret it.”

That’s easy to say as a rookie. However, the more I learn about CSS and other tools I realized that if you know what you are doing you don’t really need bootstrap. It’s still valuable but not so mandatory.

 Results

The page overall looks great but it’s just a bootstrap template that only contains little of what it can do.


Flexbox Better

preview of my flexbox site

Flexbox Better

The first site wasn’t to bad the problem was only the responsiveness. My mentor told me not to fix it. I was confused, why would I not fix it? How would I get better and learn how to properly use bootstrap? He had only one reply.

“Media Queries plus flexbox will solve your problems.”

I had only a few things that came to mind. What is flexbox? How do you even use it? He laughed and said at least you know what media queries are. The assignment was simple, redo my practice-site. However, the catch was to only use barebones CSS, no BOOTSTRAP. I got nervous and wondered how I could possibly do this. I don’t know what the heck a flexbox is, and I only used bootstrap to design and style. He simply told me to figure it out. It was a wake up call, it made me realize that I am at a different level. I don’t really need my hand-held now. Give me a direction an objective and I will figure the rest out.

Getting Somewhere

I opened up CSS Tricks  flexbox documentation and got to work. Once I realized that I was starting to get the concept a little, I knew I would be fine. I was running into big problems just using regular CSS, and creating my own classes. I basically had to finally think while developing the site. It use to be simple for me, place bootstrap here and make changes there than I would be done. This time I actually had to use some type of theory and higher level of thinking.

“How should this be columned?” “How the hell can I make this responsive?” “Why in the hell is this moving this way?” I answered my questions, did the hard work and thinking. Now, I finally created something I am proud of that took a lot of effort and research. I’m glad I got the project and it well… made me better. It allowed me to know I can do this line of work. Also, that I have no choice because of all the frustration I went through just building this site.

 Results

The improved practice-site is fully responsive and better designed in my opinion. I don’t know why maybe its just me, but it seems cleaner. The fact that I used regular CSS along with some jQuery in order to make this says enough for me. I had to actually create the responsive navbar and icon myself.  Yes everything works… but not good enough. I still want to get much better and fluid in developing.

There is so much room for improvement. I could point all the flaws of the new site but you would be reading forever. I won’t use this same template anymore. For now on I will create other designs and personal websites. Just like last time, help me out what can change? What did I miss? How can I improve?

P.S. There is no database or AJAX hooked up to the new site here.

 


The Start

preview of my practice site.

The Start

They say the first site you create from scratch is horrible…. I agree completely. This saying is coupled with any work of art and creation. I’m not afraid to show mistakes or errors or the start of something new, something great. Once, I had learned the basics of HTML, CSS, and JavaScript what came next was obvious to me. I had to put in the work, practice and get better. This is my first practice site.

Better

The goal here was to build my website from scratch. It was time-consuming, it was difficult and I had to work tirelessly to fix errors and find information. I had to make it better, I had to keep pushing and add one more feature. Even though I am still working on it, I have to post it here. It’s part of a start to a legacy and important piece to my portfolio. I want to get better, I love the challenge and the mistakes.

If I get discouraged and quit now, I wouldn’t be able to live right. However, the million dollar question is…. Will I ever think my work is good enough? I honestly hope the answer is no. So, I WON’T GET COMPLACENT and settle with mediocrity. So I encourage you to look at what I can do now. What do you think? Would you hire me?

Results

Here it is. The first website I coded. It’s live you can play with it. The only problem is… that’s it it’s like a template. There is no full functionality. It looks okay on mobile devices, I struggled with Bootstraps grid system. In fact I want to get away from it and use media queries. The ultimate goal is to finish it and get it working fully. When that happens I will fully integrate it as my permanent URL and website. Give me feedback. Let me know my mistakes what to do to improve it.

I will later put up other work I have and client work. There is one thing I want to perfect that I didn’t realize would be so difficult, the responsiveness of the website. Most people are on a phone, in fact you are probably reading this on a phone. If you are I am sorry the practice site looks that bad. However, I am proud of it but it has to be fixed. In order to make it live it needs to incorporate AJAX and overall better responsiveness.

Well, I have some work to do. Until I display another project, enjoy the day and learn something.


Topics

Follow me on Twitter!!

LINKEDIN ACCOUNT