Portfolio Page project framework usage

Yeah, he’s using the same template that the last one was using. Again, I don’t see a problem with using templates, but I do think that there was a line in the instructions that seemed to discourage the use of them and to try doing a custom Bootstrap implementation. But it isn’t stated as part of the official “rules” section, which may be the cause of the confusion.

I’ve asked the team about it on Github. We’ll see what they think.

1 Like

Yep, I think from a learning perspective its not the best. But in real life I would totally use the template and adjust it. The confusing part is also for some campers that they might not find the difference between GetBootstrap and StartBootstrap :slight_smile: btw. its actually quite a great source for some boilerplates also for future projects!

Happy coding!

Yeah, while I love Bootstrap just as much as anyone else, I personally avoid using it unless I feel that I really need it. I think that some people tend to rush off to libraries/frameworks before they have a sufficient grounding in the underlying technologies that they are based on (HTML, CSS, and JS), which handicaps their knowledge later on.

This isn’t to talk down to Bootstrap users (I use it sometimes myself!). I just feel that it, as well as other tools, like jQuery, are sometimes overused. Just my thoughts.

1 Like

That’s a good plan. Rather than debating it here.

I’m in complete agreement with you, Ramon. However, I personally chose to take the Bootstrap / jQuery route for two reasons. First off, I’ve been writing HTML and CSS for over five years now. I know what CSS media queries are and how to add and remove a class from the DOM using vanilla JavaScript. The thing is, if I was to tackle this project in a traditional manner I’d constantly be agonizing over every little decision that I made. This I chalk up to a severe case of analysis paralysis that I seem to experience with every project I undertake.This is not a good problem to have, especially in the context of this program, where every delay I experience is quite frankly costing me money that I really cannot afford.

Secondly, according to the mission briefing, it was stated that the use of Bootstrap and jQuery were permissible. The purpose of the assignment was to reverse engineer the code example using whatever tools, libraries or API’s that you felt were necessary. The only restrictions were that you were not to look at the source code or use a preexisting template in your work. As a result, I wrote a lot of custom CSS. Most of it was used to give the project my own look and feel, but some of it was also used to override some of bootstrap’s default settings.

I agree with you that In a production environment, this sort of methodology is less than Ideal. Bootstrap and jQuery, even in their minimized states are bulky as heck and will slow page load times. Additionally, I would have minimized and concatenated all the page assets using Gulp or Webpack… I fully intend to implement these improvements once my portfolio site “goes live.” But for now, I’m all about learning development, making excellent portfolio pieces and landing a decent job in my field of choice.

This is what my final project looks like, btw: http://codepen.io/mKornblum/pen/YqbGNX

2 Likes

You’ll find no argument from me on that. My concerns mainly go towards new developers who don’t have a good foundation in the core technologies. An experienced developer knows when they need to use a library and when it’s not necessary. It’s up to the developer, of course. Thanks for your contribution to the discussion.

Hello, I asked about this on Gitter before. I thought I already had a good understanding of the do’s and don’ts for the challenges and projects now this forum has given me doubts again. So we CAN use frameworks correct? Just not templates? But what exactly constitutes the use of “templates?” I used bootstrap but I thought of giving my site a modern flavor so I studied material design lite straight from google’s link and used that for my portfolio page. I used some other modified codes from other tutorials but I always put the “source links” in the code with //comments and such to always give due credit to the source (be it google, or other tutorial sites). Was that enough or should I redo the code completely (I remember that the instructions said I could use any sources so I thought I could use more than just the bootstrap framework)? Just wondering. This is an amazing place to learn and I don’t want to short change anyone including myself when it comes to learning. But I was hoping not to “reinvent the wheel” either. I guess this is a grey area. Will be open to any advice from the forum members.

I think you are getting caught up in the definitions of a few things, Libraries, Frameworks, and templates. The Portfolio Page project allows you to use whatever you need as far as libraries and frameworks go, for example the jQuery library and the Bootstrap framework. Google “library vs framework” to get a flavor for the meaning of those two. Template, at least as the term is being used in the Portfolio Page description is talking more along the lines of not using someone elses layout and design template. I’ll just pick one at random for you to see what I mean. example

Oh oki I din’t use one of those… I went straight to the material design lite website and kinda did a crash course by learning from their examples to make my header and nav bars as well as the animations. So I guess that’s still okay then. THANKS!

Man I have stuck on this project for the longest time, anyways there are so much to learn from it and I would definitely do it from scratch. Maybe with bootstrap first time, and later without bootstrap.

Hi there,

Regarding to think this problem as “Do I have have to use a framework or not?”, It would be more helpful for you to think about the strategy that went into making that design.

You can create your portfolio by using the sample portfolio page or any other psd’s on the internet, but the end goal is that you should be able to create a layout similar to the sample given.

What you can try is:

  1. Create exactly same layout with bootstrap.

  2. Fork your existing pen and tweak the layout the way you want.

  3. Try to recreate above layouts again with vanilla css.

Again in Vanilla CSS, you have many options: Do not use floats to create layouts, instead use Flex-Box or CSS-Grid (Under-flag in chrome and firefox) instead.

What is expected from this challenge that you test your front end skills and try to recreate any given design on web.

I hope this answers your question.

Okay, the wording has been modified now. Once it gets added in, it should say something like:

There are many great portfolio templates out there already. However, you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.

The point is the make it clear that it’s okay to use Bootstrap, and even a template, but it also tries to encourage you to go without a template if you can.

2 Likes

This has been my understanding:
you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.

I have built several front pages of different bootstrap designs, so that I could come up with a design that fits me as a developer/designer. I always understood that we should be building our portfolios (using bootstrap or not) but it should be our work, our design our touch. Thus, you can walk away from FCC with the knowledge, ability, skill and most of all, confidence that you can replicate the same in the real world for a client or employer.

I found my way to this page because I just finished the project, and I had similar concerns/confusion to some of the above posters. Even with the wording fix implemented by Ramon-Carroll, it’s still a bit confusing to be steered away from using a template and then discover that the example used one.

Something awesome about the first assignment was that it was possible to get something elegant and quite close to the original just by using bootstrap–that kind of success is really encouraging so early on. It would be great if someone could either replace or supplement the existing example with a non-template one, with some clear indication that the new addition was not made with a template.

Thanks for creating/supporting a really great site.