Hi guys!
I see all the incredible things everybody has done and I can’t help to think that there’s no way I’ll be able to do anything remotely like this. And I don’t know where to start, where to get the information for the bar and the scroll. I feel like I’ve just been taught the alphabet and I’m expected to deliver French Literature, if that makes sense.
If you could help me with where to start, what to look for etc.
Thank guys!
You can get navbars on http://getbootstrap.com/components/#navbar if you use bootstrap but I honestly use this website for templates. http://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm
About the content on the page; I like keeping it simple, having too much doesn’t mean it sucks but it’s all about how you organize it. You don’t have to make it look original and beautiful on the first try. You can always make it better later. This is my portfolio and tribute, I’m not really satisfied with the portfolio, I might do a re-design of it, for the third time. This, however is one of the best ones I’ve seen. http://catico.xyz/
Usually people put first section “about” where you say something about yourself, then portfolio section where you present your work (websites/apps you’ve made) and then skills and contact.
You should also get used to googling and using docs. There is devdocs.io and MDN that I know of for using docs. You can also use stackoverflow’s docs, they are good because they include examples always but I don’t know how good are examples. http://stackoverflow.com/documentation
My suggestion is also to use a desktop code editor like brackets or atom and use github to host them. You will have much more space and feel more comfortable that way (or at least I do).
Some more links for nice free pictures, flat ui colors etc…
http://ionicons.com/
http://icon-works.com/index.html
http://iconmonstr.com/
http://fontawesome.io/icons/
If you need anything else PM me.
I can’t even fathom the seer awesomeness that I just witnessed when I went to http://catico.xyz/ and yours definitely weren’t bad either. I too have the same problem when it comes to this topic. I know that the instructions said not to look at any other projects, but I couldn’t resist. I am currently 30% into my portfolio and most of it has been pulled from an instructional video on YouTube(coding tutorials360) I am getting better at distinguishing html from css(sad, i know) and slowly but surely remembering basic code procedures and methods(fonts, color, text alignment,etc) but I feel that I have the lack of innovations at the moment to come up with something as amazing as (http://catico.xyz/) let along yours. But, I digress thanks for the information, and I will continue to get better at coding. If you have any advice for me other than the one mention previously that would be greatly appreciated!
Differ HTML from CSS? How is that a problem? (Sorry but I giggled a bit)
Remember always. The visual presentation (effects, colors etc.) is CSS. The actual content (tables, paragraphs, headings images etc.) is HTML.
I think it’s dumb that you can’t look at someone’s website. I looked a lot of them before I made mine and I still don’t like mine. I will probably re-design the entire thing in the next few days or even re-do everything. You can’t be expected to design something legendary and unique when you barely can make a section of a website.
What I forgot to mention, more sources for great CSS stuff is https://css-tricks.com/ and http://csszengarden.com/ and devtips (devtips on youtube).
One thing to learn would also be shortcuts if you do all this on a coding app (not codepen or jsfiddle). Jade is a good addition, makes code look neater and less stuff to type.
One important thing to learn is keeping it clean. Clean code is good.
Thanks for the clarifications, on a side note could you help me out with a problem in my code? I am trying to create a block in my first portion of my portfolio page and I wanted to space it from my nav bar, but the margins threw it all the way to the bottom of the page. I have tried to make a margin for it but to no avail.Thanks in advance.
I’m gonna need to take a look at the code. I don’t understand much like this so I can’t really help.
I like your portfolio. It’s a nice start.
So you want to pull the image down a bit or the section after the image?
EDIT: wait, is this what you wanted? http://codepen.io/skullscream-1471533661/full/QKWRRP/
I added an animation on the navbar (if you don’t like it remove it) and I see you tried using ems for opacity.
You needed to add position: absolute to the section where the image is. That way those after one’s position is independent of the image section.