Layouts & portfolios that inspire me

So lately I’ve been venturing into building mock portfolios for maybe landing a job in the tech industry- although I’m also not in a hurry to do so. When I look at other peoples portfolio, a lot of  the time I see their picture, a brief description of what they can do, sometimes a link to a page that says why they should be hired and some examples of their work. I personally have been wanting to put more then just my qualifications into the portfolio, like some of my own photography, volunteer work, writing/poetry, people who’ve inspired me and why, but that’s how I’d rather present myself to the world. In this post I’m not going to show any of my own personal work, just work of other people that inspires me. 🙂

Puppyfat.net
Screen Shot 2017-05-21 at 1.07.22 PM.png

Puppyfat is just a portfolio of graphics, paintings and drawings. I really like just that it’s not specifically geared towards any objective except the simple enjoyment of art.

 

http://woodwork.nl/
Screen Shot 2017-05-21 at 1.13.02 PM

Woodwork is a collection of work produced by people who work on films and graphics and such, but the layout is also interactive and has a creative curve to it.

 

http://pixel-soup.tumblr.com/
Screen Shot 2017-05-21 at 1.18.47 PM.png

I do really like the way Tumblr’s website is set up, not just this site in particular, though I am a fan of anything that looks like it was created with MS Paint.

 

http://shop.diesel.com/
Screen Shot 2017-05-21 at 12.52.24 PM.png

I’m not familar with this clothing brand, although I really like how the background image is divided with different graphics. This is only a screenshot of an old layout they had previously, but I could see many ways to make each individual graphic interactive.

 

http://beardswipe.me/
Screen Shot 2017-05-21 at 1.38.34 PM.png

I do like simplistic layouts that can implement whole background images and I think nature photos do that really well. This website is actually a website for an application that allows people with beards to unlock their phone. I actually find this really humorous. On the website, as you scroll down, it features one user even saying “I already had a beard, so this was really convenient.”

-w ❤

Coding- how simple is it, really?

I feel as if it’s really important in today’s world to stay transparent about things you do and to make information free and accessible to everyone. So if your someone who is completely new to coding and have an interest to learn how to build your own web page because you’d like to have a website for your business, or a portfolio for your art, is it possible for a beginner to start with only a limited knowledge of programming?
The answer is yes- HTML is really easy to learn and understand, then CSS will start falling into place and so fourth.
So lets go over the basics of a web page. We’ll start with a basic HTML template

 

Screen Shot 2017-05-12 at 3.01.23 PM.png

Everything you see in between the <>’s are tags, so when you start a tag, likeyou must close the tag by replicating it, only with a slash, like this.
Now that we have a very simple web page together,  lets add some design and functionality with CSS.
CSS is easy to learn, but has a vast amount of things you can do with it. To write in CSS the format looks like this:

body {
font-size: 12px;
}

Everything property declaration you want to add goes in between the { } and is separated by the ; (semicolon). Lets say you want your website to have a background color, so because the body tag basically consists the whole web page we would go into the CSS of the body selector and in between the { } we would write:

(go to http://htmlcolorcodes.com/ to pick out a hex color code)

body {
background-color: #e571ff;
text-align: center;
}

This would result in a pink/purple background on our page. So lets add some flare to our paragraph. We would do so by writing a new declaration for our paragraph selector, which was in the

tag, so we just need the p without it’s <>.

p {
color: #fff;
background-color: #000;
border: #94ff40;      font-family: “Times New Roman”, Times, serif;
}

Here’s our result so far:

Screen Shot 2017-05-12 at 2.13.09 PM.png

Now that we have a simple website brewing, lets add the most important elements of our web page: Links and images!
In order for the browser to understand how to display an image or a link, we write it like this:
Image:
Screen Shot 2017-05-12 at 3.02.35 PM

Link:
Screen Shot 2017-05-12 at 3.02.45 PM.png

For the links, in our CSS lets add a navigation selector,  but we’ll call it nav for short:

nav {
letter-spacing: 5px;
}

All we did to the navigation was give it a little bit of letter spacing, but now it can be modified on its own. So our code should look like this when put together:

Screen Shot 2017-05-12 at 3.05.09 PM.png

This isn’t much different then our last result, but it’s the evolution of our web page:

Screen Shot 2017-05-12 at 2.28.18 PM.png

Now that we have our website developing into something that is visually appealing and clickable, lets add an image to make it really stand out. We’re going to use an image from my old web space that I’ve had since I was a kid. We can place this image anywhere, but I’m just going to place it above the links.
Our image code:
Screen Shot 2017-05-12 at 3.02.35 PM
If you place that in between the h1 and nav tags, you will result this:

Screen Shot 2017-05-12 at 2.37.18 PM.png

Looking snazzy so far, but there’s more! Can we modify the image with CSS? The answer is yes. We’re going to adjust the corners of our image:

img {
border-radius: 100px;
}

So now our code looks like this:

Screen Shot 2017-05-12 at 3.06.27 PM.png

And our new result looks like this:

Screen Shot 2017-05-12 at 2.46.55 PM.png

That is a small summary of how to build a basic website with just HTML & CSS. I might add a part two of this post, but for now this is a great building block on how to create your own website. Feel free to use all the code in this post, though the photo is my original, so if you happen to use it, don’t forget to give me credit! 😉

I’ll throw one more thing out there for those of you that are parents- if you have the desire to show your child about coding and technology, there are some books designed especially for babies and kids:
Screen Shot 2017-05-12 at 2.51.47 PM.png

Enjoy! ❤

Google Fonts

I know I’ve talked previously about Google Maps in a post, but the maps feature is only one of the many amazing free services they offer to web developers and designers. Google has another amazing resource called Google Fonts that is conveniently hosted by them and really easy to use and implement.
First you go to the url https://fonts.google.com/ and it will take you to a page that looks like this:

Screen Shot 2017-05-12 at 12.18.48 PM.png

As you can see there are many types of fonts you can choose from and you can even narrow your search by checking the boxes on the right hand side of the screen to specify what you do and don’t want.
As you go through the fonts and find one you like, there is a plus sign in a red circle that you click to add it to your selection. Lets see what happens when we find one we like:

Screen Shot 2017-05-12 at 12.23.31 PM.png

So I checked the monospace box because I really like typewriter fonts. At the bottom you’ll see it says “1 Family Selected” and when we open that up we get the code to to make the font accessible:

Screen Shot 2017-05-12 at 12.26.33 PM.png

As you can see when you click the selection bar at the bottom of the page it gives you two code snip-its; one to embed in the head of your document and one CSS reference. I’ll show you a HTML document example of how this would look if it were coded:

Using Google Fonts!

This is what our Google Font looks like!

This is the result of that code:

Screen Shot 2017-05-12 at 12.43.13 PM.png

And that is how you use Google fonts! :]

Design:// Placement of a menu on a layout

In order to be a wholesome, complete web developer, we need to be just as much, if not more of a designer then a coder. Without creativity, there would be no need to use things like CSS or jQuery. So when coming up with a whole new layout from scratch, one of the things you begin to ask yourself is where people will begin to navigate through your site and the accessibility of the navigation. A lot of time people seem to be able to go though a website more clearly with a fixed navigation that stays as a permanent part of the layout throughout the site, but some websites are also built around a scroll interface.
So usually when I’m building a website for someone else and they have no preference as to how the website should look, it begins as a process of elimination as to how the content, navigation, and media should be put together: Should I make a layout that has a fixed navigation at the top with a bar formulated with CSS? Should I have the navigation drop down on either side of the layout? And so begins the process of design, which really seems to take more thought then the coding.
The navigation is probably the most critical part of your content, in my opinion because it determines how people are going to be able to go back and fourth through your website. In this post I’ll show examples of layouts with navigation I really like.

The top navigation bar:
topNav
Source: http://codepen.io/maheshambure21/pen/YwwwVY

The left-hand side navigation:
leftHandNav
Source:
http://codepen.io/flizoid/pen/EnHed

Responsive navigation bar:
responsiveNav.png

Source: http://codepen.io/banunn/pen/oEcIx

Right hand vertical full page slide:
rightHandFullPageSlide.png

Source: http://codepen.io/suez/pen/LCHlA

Flat vertical navigation:
flatVerticalNav

Source: http://codepen.io/andytran/pen/eIgoJ

Google Maps

Something that has become available to everyone is Google Maps API via JavaScript. This has become a very dynamic feature for people who have addresses on their web site. It allows you to see the coordinates of your location on a map as well as add features like a text data box when hovered over.

Using and coding the Google Maps has never been easier. Here we’ll go over how to create a simple Google map with a singular marker.

One key part of creating a Google Map is to have a little bit of an understanding of JavaScript- this does not have to be an extensive understanding of JavaScript, just enough to modify the code.

First and for most, you must get a Google Maps API key. You can do that here {https://developers.google.com/maps/documentation/javascript/get-api-key} Once you have a Google API key, you can go to this link to get a small code clip of a Google Map. It’s also a tutorial of how to use the Google Map code and where to input the map API. You can adjust the size of the map in the CSS, which is located in between the <style></style> tags.
Once you have your first Google Map, you can start adding more then just a marker variable to your map. My favorite thing to add to a Google map is a information box that activates when you click the marker.

Screen Shot 2017-04-30 at 4.14.45 PM
This is what the information box looks like.

To add a information box, go to this link. There’s really a plethora of things you can do with your newfound Google Map. Here’s a small list of interesting things you can also do:

Google has many, many more tutorials of interesting things you can do with your map and provide code samples along the way. Happy mapping!

Carousel Layouts

Lately in the past few years the carousel slider has become more popular among websites such as Hulu, Amazon, Wells Fargo to name a few. It’s nice because it can add more depth and interaction to whatever page its on and can be modified  in many different ways. With CSS, you can modify if it transitions by itself, in an infinite loop or if the front end user has to manually click to transition the media.
There are different ways to implement the carousel, but the two I mainly prefer would be either a whole page background that slides into each page, or having a header that doesn’t take up the whole page (pretty much like Hulu.com, only maybe a bit smaller)  and allows some minimal content below it or some sort clue to navigate down the page.
To see a plethora of carousel sliders and how many different ways it can transition and be modified go to http://www.jssor.com/, though I’m going to focus on the Bootstrap carousel in this post.
Bootstrap has a wonderful example of a really easy to use and modify carousel at https://getbootstrap.com/examples/carousel/ and here’s an example of what it would look like:

Screen Shot 2017-04-08 at 10.46.33 PM

All that is made with HTML, CSS and JavaScript, though it’s easy to modify through CSS. Bootstrap has pretty much a limitless amount of ways you can modify something while still keeping it responsive across multiple browsers, which is most importantly why I like it the most, seeing as that is a huge issue for web developers. The other way I really like the carousel would be the whole background transitioning into another slide, though not manually. I found a really simply coded example on Codepen.io that is worthy of this post. Here are the links with the example code:
http://codepen.io/crashy/full/JoKMgG/http://codepen.io/crashy/pen/JoKMgG

Obviously a screenshot of the example would be redundant due to the reason the screenshot wouldn’t show the sliding and I’m not going to create a gif of the slide, so going to the above links would be a better option. As for building layouts, the media will always be what grabs the users attention before the content, so make sure when you develop a layout that it draws the user in!

HTML/CSS Gradients

Lately I’ve been making layout designs and sometimes it’s frustrating to find the perfect background color for layouts, or there is just a few colors that I can’t decide between, or just the overall process of trying to make colors work with one another can be really time consuming. I’ve recently seen some layouts that have implemented CSS linear gradients and I’ve been pleasantly aesthetically surprised with how it looks. One of the cool things about gradients is that you can give something, like a button or a navigation bar almost a 3D-like effect with gradients. Achieving a metallic look can be easily done with gradients as well, making a chrome look with shades of grey and white.

Here’s some simple code to show you what a gradient would look like on the background of a div class, giving it a bar look:

HTML:

This is a gradient bar

CSS:
.bar {
background: linear-gradient(#ce83ff, #ff83ff);
border-radius: 5px;
padding: 15px 20px;
-webkit-font-smoothing: antialiased;
}

This is what it would look like:
gBar

Awesome, right? Well you can even make a gradient that fades out into transparency if you didn’t want the gradient to fade into another color as well by declaring one of the colors rgba(255,0,0,0). Here is an example:

HTML:

This is a gradient bar that fades out

<br>
</div>

CSS:
.bg {
background:#000;
}
.bar {

background: linear-gradient(#ce83ff, rgba(255,0,0,0));
border-radius: 5px;
padding: 15px 20px;
-webkit-font-smoothing: antialiased;
}

Here’s what it would look like:
gBar2

Thanks Codepen.io for all the quick & snazzy front end user results! 🙂