Spent about 1 week trying to fulfill all the user stories for the portfolio page. I was able to start and get something up using what we learned from the curriculum. I sent the example page to my friend who does web development and he said it does appear it is all done in bootstrap.
I went through the map half a dozen times and I have googled every step before posting so I apologize. But I just can’t find anywhere in the FCC curriculum or anywhere on google, how to style the page like the example one. The styling is very polished and clean, he has 3 what appears like columns along the entire page where all the text and photos are in the middle column, spacing is nicely done, nothing is hidden under the banner, spacing is proper, endless scroll, etc. These are the areas I just dont know how to fix.
This is my page https://codepen.io/bomaran/full/ZJoJZN/
Is there something I am missing or did we truly learn all of this up until this point? Where can I find how to make not only the styling look polished but proper spacing information and how-tos?
What did you guys use?
The examples are often done with more advanced techniques than what you’ve learned yet. Thats not to say these techniques are necessary to get the job done, it does make it easier though.
I personally did a very bare bones portfolio and decided to just skip it for a while until I learned more. I actually finished my portfolio as the last front end challenge.
In my experience Flex Box is the easiest most predictable least quirky way to position and space elements. You can get a grasp of it pretty quickly, its pretty simple. I don’t have enough experience for my opinion on the subject to hold much weight, but I’d recommend it to anyone.
Good Luck!
I am very new to coding but do I need to link anything to the page like with bootstrap or can I just type in these flex classes and it should work?
you dont need to link anything, its built into CSS3. When you add
display: flex;
to a div’s css its children become flex items.
Some of the rules you add to the flex items css, and some to the container’s.
that guide is split up so that rules for the parent element are on the left side and rules for the items themselves are on the right.
It might help to watch a youtube video on the subject just to see it in action (I dont know of any specifically though, I learned through a free trial to teamtreehouse)