Civil Rights Website Final

This is my website!  I worked hard on it and I’m proud of what I could accomplish.

Here are some screenshots of my website

Here is the website that I used for inspiration.

 

Here are some screenshots of this site

 

I emulated the site as much as I could. Visually my site is almost the exact same. But I wasn’t able to pull off the effects. I was able to use the same color after using the inspection tool and finding the one that was used, which is very different from my initial idea that was put in my mood board. The typography is similar and i even tried to emulate the design of the first letter of the first text in each section. The layout is the same; I made the images that are used as headers, full width and the others smaller in with to fit with the text.

I used mostly divs and containers to pull off this site. I didn’t try to over complicate things. Using bootstrap was fun. It made it faster to do certain functions and aesthetics.

With my CSS file I tried to make sure things were in order as to when they appear. It made it much easier to read and to make adjustments as well. I used the CSS to make make colors, and fonts, and mostly to do sizing and margin aspects. The most complicated thing in my CSS file was making the design of the first letter of the first paragraph in every section.

I feel comfortable using HTML/ CSS, but not too comfortable. I have a good understanding of how they work together and how many of the aspects work together. For example how divs work and that many components can be used to create different things. being that I understand the concepts I feel that learning more just takes practice and being able to search for new things and answers to questions is only a Google search away.

I enjoyed learning how to code and want to learn more. It’s kinda exciting. I learned a lot and I know there is much more to learn, but comparing what I know now to what I knew at the beginning of the semester about web design (Nothing!), I have come pretty far.

Final Project

Final Website Link

While doing this project, I was feeling very frustrating at some points because I was doing something incorrect with the code, but couldn’t figure it out. It was a hard time to over several obstacles that I ran into while building this website. It seemed like every time I past a problem, another one came up.

I used this website as a web design template to get my mind going about how I want my webpage to look. I picked this website because I thought it was a simple but nice design because everything was organized in a neat way. As I started to work on my code. I ran into some problems such as getting my website to break properly and for it to be 100% responsive.  One thing I never got to fix was when you start to make the page smaller, after a certain point, the “Bill Russell” logo disappears. I didn’t know why that was happening or how to fix it. Hopefully I will fix it as I keep working on it.

Even though there were some problems I couldn’t figure out, overall the choice of design was neat and simple. Everything else seemed to be working fine. Since Bill Russell was a Boston Celtics legend, I decided to go with the actually Boston celtics green and gold hexadecimal color code to put in my css. I also used a fixed footer which looks cool as you scroll because it accommodates the page. Within some text I also used some letter spacing. Even though I used the Boston Celtics green and gold, I used some hints of white text to make them stand out.  There’s still some work that needs to be done, but for my first time I think I did well.

 

Final Project

Here’s a link to my design inspiration.

I really liked the color palette used in this reference design; It is very compatible with grayscale images. Because most of the images that I gathered for this project are also grayscale, I used the same color palette for my project, since it works so well with grayscale images.

As for the font, I used two primary built-in font-families :

  1. ‘Cormorant Garamond’, serif – For the titles and headings
  2. “Open Sans”, “Helvetica Neue”, sans-serif – For the paragraphs

I linked the main HTML file with three other files: CSS, JavaScript and one PHP file (for the contact form).

One of my struggles in this project was to keep myself from using custom CSS and try to do as much as possible using Bootstrap. I still needed to override some styles from Bootstrap with my custom CSS file. However, the main layout of the site is done using rows and columns following the Bootstrap’s grid system. It was also helpful to order the divs based on the breakpoints.

Aside from making sure the text appears correctly (by using the right font) and the color themes also appear correctly, I used media-query to make sure the site was responsive based on the device size. The divs are resized and rearranged as the viewport size changes.

The “sliding buttons” are completely done in HTML and CSS. One of the sliding buttons, the submit button, needed a Javascript callback to be attached to the ‘click’ event so that it can submit the form without using a real submit button. This allowed me to design the submit button as a sliding button and still let it function like a submit button. This Javascript code sends the form to a PHP file that sends out an email with the form data.

To make sure the switch between pages induces a smooth scrolling, I added another snippet of code into the Javascript file.

Helpful Resources:
The primary resources that are used to build the site are listed below:

Here’s my final project.

 

Final Project – Diane Arbus Photographer

Final Site

This was one of the most challenging assignment because we had to implement all our skill sets to recreate a design we found on the internet. I did have trouble having my button to work but even though we had to  hand it in I still would like to work on it!

After looking through Webby Awards the site I chose to mimic for my final project is Milwaukee Ballet website.  They have a nice clean, simple design with a carousel scroll. This is going to be a tough one to replicate but lets see what I can do!

 

 

Final Post

Link to my site

Link to my inspiration

The site I got inspired by, I changed my color palette into darker colors. I choose Leonardo De Vici as my artist so therefore, I tried to choose colors for my site towards dark combination of colors. Initially I was suppose to keep the same style as my inspiration site but I changed few things around. The color palette I used coolors because the colors in the this palette matches with the paintings I used to display on my site.

I initially wanted to use bootstrap which I did. Most of the code came from bootstrap. I used Nav bar for heading which I learned recently. I used carousal, margins, padding and grids. Even though it was frustrating in the beginning but I got myself together.  I honestly struggled with arranging pages to meet the specifications that I was looking to achieve.

For my custom CSS, I made five different pages of CSS to link with all of the HTML pages for layouts and to change divs. I sticked with simple Serif font because the site I was following they used Helvetica for font.

Comparing from beginning of the semester till now I think I am more skilled with CSS and HTML. I am still learning to gain more knowledge. I need to practice bootstrap to get a better understanding. Over all with this final I could have better and I am still working on it to get better.

My Final Post

 

WE’VE MADE IT!

We made to the end and it has been extremely fun and frustrating.

But, overall, it has been a journey. I never really thought much of Web Design and its technicality until I took this class. So, this class was extremely helpful in my journey of becoming a software engineer.

In this class, I became a lot more technical and detail-oriented.

Nonetheless, I am happy that I was able to complete the final project.

My Final Project was about the New York City Subway and its history, specifically about the New York City Subway Nomenclature.

It was really fun designing and looking for inspiration for my final project. My inspiration were:

Take a look -> Britton Stipetic

Take a look -> Phoenix The Creative Studio

However, I decided to take my own path by creating something new but still wanted to embed some of the innovation from my inspiration. So, I innovated the navbars from both my aspiration created a transparent navbar for my website.

Also, the color scheme I used were:

I used Coolors to make my color choices.

Now, to get everything aligned and even mobile responsive, I used Bootstrap!

Ohhh, Bootstrap was an amazing help for mobile responsiveness.

But, I did add some of my custom CSS. Adding some custom CSS wasn’t as difficult as I thought but, I did have some challenges.

However, those challenges made me better with CSS.

REFLECTION

Throughout the course, I became better with HTML&CSS. I am now more comfortable with designing website and, I can even see myself pursuing web design as a career. It would be an annoying career but it is probable for me. I now have a better of Bootstrap and my comfort level with HTML&CSS is pretty good.

I actually plan on continuing developing my web design skills during the winter break. I do want to become a pro at HTML&CSS and Bootstrap and plan on learning about libraries that will provide me help enhance my skills in web design.

Link: Final Project

Dead artist website 90% done (?)

Dead Artist Website

Inspiration:
Melanie Daveid’s Porftolio

It was not easy for me to get to the point I got, and, looking at it in desktop, I see the things I could do better. I can see the errors and tried fixing them, but I kept coming up short.

I had tried to make the 2 types of content sit side-by-side, but it just proved too hard to get right. So, I went for a simple parallax design. The little errors I noticed came from me not being able to see what was wrong with the code, and I’m not sure if I could have pinpointed it.

All-in-all, I can’t say that I’m excited to work on web designs. It’s fun, don’t get me wrong, but I can definitely see myself getting bored or frustrated more than enjoying it.

Final Project Artist Website

Link to site

Link to site inspiration I didn’t really use the same palette, mostly due to the nature of the person I used. Most of his works were in black and white. Color was used to emphasize the typography present. I believe I did the layout successfully, although the media breakpoints do not match the site. I could not do it no matter how much I tried.

Bootstrap was really confusing to understand. Even now I don’t know how everything works.

I used the grid system in bootstrap. It helped when I primarily used rows and columns for the site. I also used carousel for the works since I had different categories for each. I chose a photographer, so I was able to list more pieces.

When I first began to code my custom css, I focused on imitating the site design using rows since most of the design had rows to display its content. With bootstrap grid, I was able to make responsive images and typography. I had trouble putting text over images, but I used the Z-index tag along with position and transform to fix this issue. I also added a transition effect using the transition tag where a piece of content/ div would be blanketed by another color which would give me the ability to tint content different colors. After some research, I found a cool looking tint effect where hovering over a piece of content would remove a tint. Hovering off of that div will reapply the tint. I kept this transition constant in the website design.

I feel like this assignment alone made me understand a lot more about HTML/CSS. I understand the use of divs and I understand general css tags and their elements. Parent/Child divs are less confusing now. I feel that it is important to keep up with this since this is a useful skill to have. After learning about web design, I tend to look at websites in different ways. I can break them down based on the content displayed. Coding is a hassle, but I feel like I’ll enjoy it more when I know more about it and practice it.

Final Post

1. A link to the finished piece

2. A link to the inspiration.

Screenshot of the site:

I believe I mainly kept to the color scheme, but as the screenshot shows, some of the artistic pieces from the artist I chose (De Goya) simply did not match the color palettes. Although there was a wide range of colors to choose from the site, I failed to keep to it 100%.

I chose to make my colors based primarily on the pieces of art I chose to be on the site. I believe the central core of the site is the same. The sliding, one page site, the image and then brief text that accompanies it, powerful images that pop out to the user, etc.

For the color palettes, I used coolors.co because I knew that I would not have been able to choose a good set of colors to accompany the paintings. The colors given to me were, yellow, black, and a dark red.

3. I used many things from Bootstrap, most of the code came from Bootstrap actually. At first I was using carousels for the look, but most of that was discarded for a simpler div within div code. Although I left the last two pages as is, simply because (a) the contact code was better than anything I could’ve whipped up and (b) it still fit into the inspiration (At least with the reference page).

I used a lot of Typography as well and struggled with figuring out how to even start the site. It turns out “Inspect Element” and/or “Inpsect Page Source” is a web developers best friend. Alas, it couldn’t help me get my h1 to do what it was supposed to do. You win some and lose some I suppose.

4. There wasn’t too much changed in the CSS, everything was just so the aesthetic of the site would match and making the page responsive. Regarding Bootstrap however, I learned that basically carefully  sifting through that website would give me the answer I’m searching for sooner or later.

5. And finally, my comfort level with HTML/CSS. Honestly, I’m much more comfortable with HTML then CSS, but that’s not to say I’m not comfortable with CSS. By the end of this class, I’ve found that myself comfortable with both languages (although it does take me some time to code things as I don’t remember everything off the top of  my head). I feel like I’m most comfortable with text honestly, just relatively straightforward things. I’m also fine with linking, embedding, and to a lesser extent, divs. I’ve just practiced with them so much I feel assured in my (honestly rather amatuerish) capabilities with them.

I feel like what I’m most weak at, is most likely Flexbox (as I tend to overthink it) as well as the more advanced CSS. This is more to do how I’ve had less time to practice with them and just how much stuff there is to learn in this. It’s honestly kind of overwhelming and I had trouble keeping up during the lectures.

 

All in all, even when the class was stressful at times, I did find myself rather enjoying at the end. This was a rather welcome surprise as I didn’t expect to have this much fun with it.