Forum Contest: Design with the Box-Sizing Property

i love it

Awesome!

Looks very crisp and clean!

Anneke!!

Your web seems great and appealing (Y) but I found a little bug or your code mistake on your web footer that you give twitter profile link with facebook logo and with facebook logo you gave twitter link so do correct it and once again you did a great job dear +1 :D

Thanks guys! :) Thanks Khurram I didn't see that!

Congrats on your website! Looked great!

nice hover effect with the transparent blue, looks awesome!

Congrats! It's a great looking web-design.

It look really nice! Congrats!

Very Nice hover effect! Future Web Developer in the Making :)

awesome

wow cooool

wow cooool

Do I see Dugtrio?

Hi Nicole, you are coming along very well. good to see that your work is evolving well. Did you make changes to favicon..it looks a lot more like a vest now. :) Great Job!

Also, your resume, very nice. Your Graphic skills are showing brightly. I even loved the format for the resume. I would like to use it. I will give you credit, if you are ok with it.

Thanks Errin! You sure can use my resume format.

Thanks Nicole, I will also let you know when i use it to add your logo and name as designer of the resume.

Love it!

This is already in the works. It may or may not be ready for this forum contest, but stay tuned. :)

A really nice design looks awesome!

you won

I really love this :')

Winning!

i think its the best so far the only problem i had was the font was sorta hard to read.

Yeah, you're right, I misread. It didn't make sense as it was, since what I configured, is in fact the default :P

Thanks for the notice, it's updated now!

I don't know if it's just me or if there's something wrong with your site, but I'm having trouble connecting to your site. Check it out and ask others to check as well.

I have no trouble connecting to the site. I'm currently using using a free web hosting service from a local company. Maybe that is the problem. Here is the copy which is hosted by a UK company (also a free hosting).

Great! The second link you posted links properly. Like I said, it might just be me, but ask others too to make sure its working on multiple devices.

I really like your header!

I really like your header!

Thanks!

Rodger,

Your website is lovely but I think for your portfolio you should just link to your own work and not to the Treehouse website. If you want to put a little note somewhere that you learn at Treehouse, that's cool. Or if you want to put a note in the footer of your project that you grabbed code from Treehouse, I think that's fine as well.

Ashlynn,

Completely agree. I just haven't added my own work to portfolio yet, the treehouse links were meant to just give credit to where i learned the various techniques. I will take your recommendations under consideration, thank you.

Nick says: Add your own customizations. Change the design and code of the project to make it your own. Be as creative as you'd like!

You can change it completely but you will have to use the box-sizing property on all elements.

This is correct. You can change it however you'd like, so I guess theoretically it could be a completely different project by the time you're done. :)

what setting the box-sizing to border-box does is it make the width and height properties includes content, padding and border, but not the margin

as the content-box only includes the content and does not include the padding, border and margin

So all we are doing is changing the look of the site and that's it? I understand what you mean about including the content padding and border. What I'm failing to understand is if it really changes the site at all. :/ (be nice if Nick would comment on this)

Hi Seth,

Great question. I wrote a blog post about box-sizing that might help explain.

Thanks!

Yes, that was a great question, I was wondering the same and today i read the post. Makes sense now. :) I was wondering if it would be good practice to add the box-sizing: border-box; to my grid.css if that would take the place of adding to elements that have the grid-content. Food for thought. I will give it a try.

Update: OMG it works...infact my code improved greatly. I removed all the border-box code from main css, since i was using the grid-container and just added the border -box to my grid-content class. Simple and easier to understand my own code and to make the changes I need. cool! Reading the blog post...help much with understanding border box. Well, time to research more before coding. :)

If you saw my website during the contest, the only change i made was to the main.css and grid.css with the border-boxing properties. I removed all border-box from the main.css and added only once to the grid.css..the difference was huge. Now, i can work with this and improve my site. Foundation is coming along. http://alchemymomentum.com/

My index file had a wardrobe malfunction last night. I hope no one saw that . . .

Please let me know if I need a loading icon. The images load fast for me so I don't have one.

Well that didn't work, that just leads you to the code. Can someone tell me how you are all uploading your pages?

Thanks,Stacy

Stacy, you're supposed to upload your pages to some hosting of your choice. Then you just link the address of your site. You can use this company's service (it's not an ad, I'm just willing to help). After clicking on a confirmation link in a mail you'll be redirected to the page where you can select a hosting plan. There's one free and two paid. Then you register a subdomain (I'm guessing you don't have your own). After that you'll get to a page with all your registered hosting accounts. Just click + to the left of the domain name you've just registered. Choose manage and you'll get another page. There you pick File Manager 2 if you want to get ftp access via web interface or FTP Access if you want data needed for your ftp client to access the server. Having accessed the server go to the public_html folder, delete default.php there and upload your project files there. After that just link the domain you've registered here using the Markdown Cheatsheet. I tried my best and hopefully I didn't confuse you.

If it's one page you can just use codepen and host your images at imageshack or a free image site.

If you already have a website you can create a folder in it (where you have your index.html, name the folder whatever you want) and in this folder add all the files of the project. Then type in your browser www.yoursite.com/the folder you created and you are good to go. When the project is finished you can delete the files. No additional charges.

Hey Stacy!!

Go to that link byethost.com/index.php/free-hosting

and you can host it right now just signup and they send you details about host address,username etc on email also (I received on my spam folder) and then you can upload files using filezilla to server and it is done, your web is accesible throughout world (particularly through this you can participate in contest now)

Everything has solution by the way ;) ;D

Hope you'll participate, maybe?

Oh yay! :D Thanks Nick and Treehouse. I really enjoyed this challenge! Good job to all the participants! See you all in the next round!