Hi guys,

 

 

http://www.flyfreddie.com/index.html

 

 

This is my first attempt at a fulli-sh website, and i'd love some feedback.

 

I have been learning web development in my spare time since December, with a view to a career change by the end of the year.

 

The idea here was to attempt to build a basic portfolio website. It is all html and css, no js or responsive as i'm still learning those skills. There are a still few things i need to fix like the contact form.

 

I'd love your feedback as this is the first full-ish website that i have built.

 

Thanks guys

Freddie

I like the site although admittedly I don't like the colour scheme much but I think that's more of a personal taste. Their is one thing that stood out to me though and pardon me if this comes across as a tad offensive but you list design as one of your services, yet the image you show under it is what looks like something drawn in paint in under 5 minutes?

your logo is the wrong size - unless it's a retina version and it has poor antialiasing

 

the slogan (?) with the pipes in between words look like navigation, but isn't

 

add a *slight* hue to the background grey to make it slighly yellow or someyhing? it's a bit cold

 

is your line height huge or is that you have each sentence as a paragraph?

 

agree on the paint brush icon

 

otherwise it's clean and i quite like the colour scheme

That's pretty impressive considering the short time you've been learning! It needs quite a lot of work to bring it upto a professional standard granted but you're doing very well so far.

 

I myself began learning around 18 months ago, it took me about 12 months to get employed as a front end developer, that was 12 months of spending about 6-8 hours a day learning the trade.

 

Keep doing what you're doing, improve your skills and it won't be long before you will have the skills that web agencies desire. Sign upto Code School and Treehouse, that's the best advice I can give you.

Hi guys,

 

Thanks very much for the feedback.

 

I definitely take your point about the paintbrush, I set myself a challenge to put this site together in a day, so the brush was one of the last things i did and was a bit rushed.

 

dap - Thanks, yeh i'll update the slogan so it looks a bit clearer as to what it is. And yeh i did use paragraph tags to space each line out.

 

rbtsmth - Thanks for the encouragement, its really good to hear other people's stories as its my goal to be reasonably good at this by the end of 2014. I've pretty much been doing what you did, spending as much time as i can learning after I get home from work.

 

This website isn't for use, just for me to practice with so ill be making lots of changes and improvements to it. Ill definitely be working on the things you have pointed out.

Thanks again for the feedback! If anyone else comes across this then feel free to leave your views

 

Freddie

Oh and yes I've been using Treehouse and Codeacademy so far to learn with. I'll be sure to check out Code school!

Hi Freddie. Your site looks good for a beginner's effort, much better than what I could churn out in your shoes. Here are my thoughts.

 

Firstly, your code. You've used mostly divs - a non-semantic attribute, to construct your sections as opposed to HTML5 tags. This is called 'vanilla coding' or 'vanilla HTML'. I'm not sure if your tutorials alerted you to modern HTML5 attributes, but I'd look into them - chiefly the <section>, <aside>, <article> and <footer> ones. Don't worry too much - I'm pretty sure my own site still uses a div instead of a footer and in other places, it's easy to lose track. I really need to change that, heh...

 

The '#999900' colour is a little off-putting and doesn't accurately reflect your creative design skills; it looks like the colour of a rotting pear if I'm honest, heh. If you've got Photoshop, crack it upon and just fiddle around with the colour palette, go for a more upbeat, conservative colour.

 

I'm guessing you haven't had time to look at JavaScript or jQuery just yet, which is absolutely fine, a site doesn't need it to work well. But when you do, it can transform your navigation function into something more fluid; right now, upon nav link click, it darts to the corresponding section further down, whereas with a very simple jQuery script (no more than 2-3 lines), it can be smoother, more interactive and pleasing.

 

Lastly, and I don't mean to push you in any directions while you're learning, but I would strongly look at responsive design. It may sound daunting, but incorporating it with your current learning would be highly beneficial, as opposed to going back to it. It's just about using percentage widths and CSS media queries (Google that!) to adjust page elements to look nicer on different screen sizes.

 

It's an excellent effort for only some weeks work, you're definitely heading in the right direction. Hope my tips helped a bit.

throzen "upbeat, conservative colour" ? you're sounding like a client now

throzen "upbeat, conservative colour" ? you're sounding like a client now

 

You know what - I kid you not, I've had so much of the, "uhh, yeaaahhh, it's nice... but can we have blue instead...?" treatment at work lately I think it's rubbing off on me. One client turned down a really slick coal-black and maroon red combo I mocked up, because they wanted to be totally corporate-like and have white and blue. Ugh.

Code school is every bit as good as Treehouse, they cover things like JavaScript at a more advanced level than Treehouse, however it doesn't compete with Treehouse on the sheer scale topics they cover. The two compliment each other quite well - It's an expensive outlay but you get what you pay for - which is the best material around.

 

Unfortunately I feel CodeAcademy is good for beginner level only, but out of the free resources it's one of the better ones. CSS-Tricks is a fantastic place to check out too.

 

Avoid W3Schools.

Edited February 5, 201412 yr by rbrtsmith

Let the elements of your design breathe a little. Some padding goes a long way into letting the human eye focus on whats important, and currently it seems your heirarchy of information (relative to size) is a little bit messed up.

 

Just add padding to divs (like in your header navigation) for your logo and footer. It'll go a long way.

The site for me looks like a mobile website just larger in size

Hi Freddie. Your site looks good for a beginner's effort, much better than what I could churn out in your shoes. Here are my thoughts.

 

Firstly, your code. You've used mostly divs - a non-semantic attribute, to construct your sections as opposed to HTML5 tags. This is called 'vanilla coding' or 'vanilla HTML'. I'm not sure if your tutorials alerted you to modern HTML5 attributes, but I'd look into them - chiefly the <section>, <aside>, <article> and <footer> ones. Don't worry too much - I'm pretty sure my own site still uses a div instead of a footer and in other places, it's easy to lose track. I really need to change that, heh...

 

The '#999900' colour is a little off-putting and doesn't accurately reflect your creative design skills; it looks like the colour of a rotting pear if I'm honest, heh. If you've got Photoshop, crack it upon and just fiddle around with the colour palette, go for a more upbeat, conservative colour.

 

I'm guessing you haven't had time to look at JavaScript or jQuery just yet, which is absolutely fine, a site doesn't need it to work well. But when you do, it can transform your navigation function into something more fluid; right now, upon nav link click, it darts to the corresponding section further down, whereas with a very simple jQuery script (no more than 2-3 lines), it can be smoother, more interactive and pleasing.

 

Lastly, and I don't mean to push you in any directions while you're learning, but I would strongly look at responsive design. It may sound daunting, but incorporating it with your current learning would be highly beneficial, as opposed to going back to it. It's just about using percentage widths and CSS media queries (Google that!) to adjust page elements to look nicer on different screen sizes.

 

It's an excellent effort for only some weeks work, you're definitely heading in the right direction. Hope my tips helped a bit.

 

Hi throzen, thanks a lot for the feedback!

 

Yes i hear what you're saying about the vanilla coding. I had just started on the updated elements for html5, so i'm trying to stick to them now. Also yes Javascript /Jquery and responsive design are the things im focusing on at the moment. I'm trying to pick 1 or 2 areas to work on each month and to keep building that way. I completely respect anyone who's good with javascript as its been tough to understand! Jquery has been a bit easier so far.

 

I have been playing with the site as I go along; right now I've gone for a simple home page and have been putting work into the blog. I've been able to edit elements of Wordpress themes which is cool, as it shows me I'm picking things up. I think there must be a million people in my position so i want to start sharing updates on my journey through learning to code!

 

Thanks again for the feedback.

Code school is every bit as good as Treehouse, they cover things like JavaScript at a more advanced level than Treehouse, however it doesn't compete with Treehouse on the sheer scale topics they cover. The two compliment each other quite well - It's an expensive outlay but you get what you pay for - which is the best material around.

 

Unfortunately I feel CodeAcademy is good for beginner level only, but out of the free resources it's one of the better ones. CSS-Tricks is a fantastic place to check out too.

 

Avoid W3Schools.

 

The first time i attempt to learn something I have used code academy as it's easy to use. Then as i look to progress in that subject have switched to Treehouse and recently Codeschool. This formula seems to be working well for me. I agree it's definately worth the investment!

 

Thanks

http://flyfreddie.com

 

Hi guys,

 

I wanted to share my progress in the world of web dev with you. Since my last post I have been non-stop learning and trying things out; I like to test out different aspects locally, and am using this portfolio site as my main online project.

 

Since the great feedback above, I have worked on making sure my code is semantic, gone deeper into CSS and am getting quite comfortable with Sass (pretty nuts as i had heard of it but didn't really know what it did 2 months ago!). I've also been working on responsive delevlopment and have tried to implement elements of all of this into the site.

 

Once again any feedback is welcome, it's good to hear from more experienced designers / developers.

 

I have been full on since the end of December with learning web development, and I'm getting more confident with it all. I have also been studying Javascript which has been the biggest challenge so far, JQuery has been a slightly easier to pick up but still quite tough. Next on my to-do list is php and more advanced Wordpress development.

 

I have a long long way to go, but its nice to see some progress being made. I just wanted to share this as I'm sure there are a ton of people in the same boat as me, so just want to say its a long road but a fun one. I aim to keep the blog updated with my progress, and any useful tips for beginners etc.

 

Thanks guys

Freddie

i like the menu design, I think the rest looks too plain though.. when you go to contact me, you have the apple in the background and the social networking icons.. they don't blend together well

While your still at the beginning of your learning curve I suggest learning Test Driven Development. It is a method of coding that will bring you forward in leaps and bounds once you understand how to use it to your advantage. Trying to learn TDD later will be hard work! Learning TDD now will improve your coding standards, and your planning abilities rapidly, it will also enable you to see which items you will need to study next to achieve your current project goals. Getting into the habit of using TDD now will put you in good stead for a career.

 

It is also a good idea to get into the habit of commenting your code fully as if you are writing it for somebody else to try and understand what you have done. That will help you a lot when you look back at what you did in a couple of months reviewing your own work looking for solutions.

 

For you design work you need to do some research on design theory, start with the basics for web design such as the rule of thirds, contrast, UI/UX/UIX, and colour theory. They should lead you on to more involving theories that you will need to know and practice. I am saying this because your page layout in not in balance and the contrast is not quite right from a UX point of view on your blog and contact pages.

 

A good place to start is with blogs and online magazines such as Smashing Magazine as it discusses many design theories and latest design fashions. You can also use it for information on coding as well.

While your still at the beginning of your learning curve I suggest learning Test Driven Development. It is a method of coding that will bring you forward in leaps and bounds once you understand how to use it to your advantage. Trying to learn TDD later will be hard work! Learning TDD now will improve your coding standards, and your planning abilities rapidly, it will also enable you to see which items you will need to study next to achieve your current project goals. Getting into the habit of using TDD now will put you in good stead for a career.

 

It is also a good idea to get into the habit of commenting your code fully as if you are writing it for somebody else to try and understand what you have done. That will help you a lot when you look back at what you did in a couple of months reviewing your own work looking for solutions.

 

For you design work you need to do some research on design theory, start with the basics for web design such as the rule of thirds, contrast, UI/UX/UIX, and colour theory. They should lead you on to more involving theories that you will need to know and practice. I am saying this because your page layout in not in balance and the contrast is not quite right from a UX point of view on your blog and contact pages.

 

A good place to start is with blogs and online magazines such as Smashing Magazine as it discusses many design theories and latest design fashions. You can also use it for information on coding as well.

 

Thank you Weedy101, Ill definately take a look at TDD. Colour theory and UI/UX are on my to do list once I have gotten to grips with the areas I'm currently going over.

 

There's a lot more to this than learning a few languages!

 

Thanks

Freddie

I like the font and the white text, I hate the color of the background you've chosen (I see an Apple logo). That single element makes your site ugly to me, without it it would be nice enough.

 

I see in your code:

 

p { color: #ffffff; }
h1 { color: #ffffff; }
h2 { color: #ffffff; }
h3 { color: #ffffff; }
h4 { color: #ffffff; }
h5 { color: #ffffff; }
h6 { color: #ffffff; }
a { color: #ffffff; }

 

So much easier to do:

 

p, h1,h2,h3,h4,h5,h6,a{color:#fff;}

 

Or just

 

*

{color:#fff;}

 

Or

 

html {.....}

body {.....}

 

Someone said something about making your site responsive. That is ridiculously easy if you have a simple site. Say you only want to make the font smaller, you'd just put this at the bottom of your css:

@media (max-width: 1000px) { body { font-size: 80%; }}

 

If you had before said body{font-size:100%;}

 

I've been making a site this last week too. I google tidbits I don't know and then try to apply them. This site comes up a lot for me: http://css-tricks.com/almanac/

 

I see you use a css template. If you're learning I think it's best not to do that. Otherwise you might become convinced that CSS is complicated, while it's not.

Edited April 23, 201412 yr by Αλεξανδρος

I like the font and the white text, I hate the color of the background you've chosen (I see an Apple logo). That single element makes your site ugly to me, without it it would be nice enough.

 

I see in your code:

 

p { color: #ffffff; }

h1 { color: #ffffff; }

h2 { color: #ffffff; }

h3 { color: #ffffff; }

h4 { color: #ffffff; }

h5 { color: #ffffff; }

h6 { color: #ffffff; }

a { color: #ffffff; }

 

So much easier to do:

 

p, h1,h2,h3,h4,h5,h6,a{color:#fff;}

 

Or just

 

*

{color:#fff;}

 

Or

 

html {.....}

body {.....}

 

Someone said something about making your site responsive. That is ridiculously easy if you have a simple site. Say you only want to make the font smaller, you'd just put this at the bottom of your css:

@media (max-width: 1000px) { body { font-size: 80%; }}

 

If you had before said body{font-size:100%;}

 

I've been making a site this last week too. I google tidbits I don't know and then try to apply them. This site comes up a lot for me: http://css-tricks.com/almanac/

 

I see you use a css template. If you're learning I think it's best not to do that. Otherwise you might become convinced that CSS is complicated, while it's not.

 

Thank you. Im still playing around with the design so it will change a lot in the future. The only css template I'm using is normalize. I'm playing around with both normalise and css reset; I'm not using a fully built framework and the css elements were all hand coded.

 

Thanks for the feedback, will bear it all in mind!