Long story short: I need help for the portfolio challenge.
But that’s not really a lot of information right? Let me explain a little:
I’m NEW to web developing/web design, and I don’t know how to do a personal portfolio page. The code itself is not that big a hassle, it’s more about the concept and the visuals.
Let me explain even further.
I don’t know what to do, really. I don’t know how to arrange the page, I don’t know how to make it look clean and not a mess. I’m stuck. I don’t really know what to do.
The example they show is gorgeous, and I don’t know how to make something like that,
And English is not my first language, so I don’t really know how/what to search on google. I’m really lost.
Can someone help me? Maybe a little how-to basic guide, just to get started, so I could keep going? Maybe some useful links?
Any help, really, is appreciated.
Cheers, hope someone helps me and good learning ^^
You don’t need to make up your own concept. Try making the same page as in the example portfolio. For the visuals you simply can use placehold.it for now. If it’s the first page you’ve ever made, keep it simple.
You can search for tutorials in youtube like this https://www.youtube.com/results?search_query=basic+bootstrap+tutorial
What helped me when I got stuck with layout was to come and see on the forums what other people were doing. Not looking at their code so much (because it is important for me to figure it out myself) but to look at their presentation and to gather ideas about what I liked or didn’t like about the different pages I saw.
I’m not saying you should copy somebody else directly, but where it comes to design, the concept of a ‘visual library’ is very important. And the way to build a visual library is to look at as many different examples of things as you can. So the portfolio projects of the many different campers on the forum is a good place to start.
Another way to do it of course if you are beyond completely stuck, is to try and ‘reverse engineer’ the example page, like MrsColombo suggested.
Good keywords for your google searches could be ‘single scroll page’ ‘responsive webdesign’ ‘bootstrap tutorial’ ‘fixed navigation menu’ etc. I really hope that helps!
The thing is, the example portfolio is kinda advanced.
At least, that’s how it seems. In the lessons before the challenge they don’t teach you anything about it. You only know paddings, links etc…not single page navigation menus and that sort of stuff.
Like I said to Mrs.Colombo, the example page is really advanced (for what they teach you in the lessons before the challenge) and even looking at it’s code (yes, I shouldn’t have done it but I’m stuck) doesn’t help that much…because, like I’ve already said, it’s more advanced stuff that they didn’t teach you
Sorry for bad English
You should get familiar with the website of Bootstrap, section Components. http://getbootstrap.com/components/#navbar Bootstrap is just as Lego. You search the components you need, copy HTML and CSS and in some cases JS and paste it to your project.
I understand now. I misunderstood you at first - I thought that you didn’t have a problem with the code but only with ideas about styling. If it seems too advanced though, I definitely think you should spend some time to just get the foundations of basic HTML and CSS down and then move on to understanding the basics of bootstrap, before you even start with the page. In your case, I think that looking at the code is probably good. However, you need to make sure that you understand why the code is the way it is, instead of just copying it.
Here is a playlist about basic HTML and CSS foundations. I haven’t watched this myself but I think it will be helpful, because I have found other tutorials from this same content creator to be very helpful.
This website I have found very helpful as a reference for many of my beginner questions.
When you feel more confident with your HTML and CSS, these videos about the foundations of responsive design with Bootstrap will also be of great help to get you started on a good-looking portfolio. These helped me a great deal.
Before I started, I googled “how to create a single-scroll webpage” and found many results. This is the one I got my information from, although I encourage you to look at the other results as well.
Lastly, don’t be discouraged if the project seems impossible and there is too much information you need. It can be rough not even knowing what kind of information you need - but the best place is to start at the bottom. As you go along, create small things with what you know already, and start to think creatively about what you could change about those basics to achieve different results. Keep your projects simple, but do give yourself small challenges. Also google the meaning of English words if you are unsure about their meaning, that may help you too
With most of the challenges, I have to do lots of extra research and reading before I start.
By the way, Bootstrap is not the only responsive framework out there. However it is the one I have used and am familiar with, which is why I’m recommending it to you.
I had the same problem. What I did was, I took 2 days “off” to learn more about css/html and bootstrap. I searched for videos that convert a PSD to html/css. You can find free courses on udemy and there are a couple helpful videos on youtube as well.
After I became familiar with slicing in photoshop I went ahead and downloaded a portfolio PSD and tried to convert the PSD into working code.
I tried to make an exact copy of the PSD, this worked out well and I was able to make almost identical copies.
You can see the first 3 portfolio’s I created here: http://kervin.comli.com/ it took me good couple hours figuring out stuff but it was worth it. I learned A lot from this. Now a month later I’m able to create identical copies of psd’s.
and good learning ^^
