Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Abhijeet Das
Courses Plus Student 3,158 PointsHello any idea how to achieve the main section of this resume in web design?
Hello frnds I recently came across Chicago based graphic designer Kelli Marie's "http://www.kellimarie.me/ wonderful portfolio and her resume http://instagram.com/p/sikCE1EYvR/?modal=true . I am thinking as a web designer how could i code main section of her resume. Any suggestions of CSS layout techniques to achieve this design.
3 Answers
James Barnett
39,199 PointsUse simple CSS grid (like http://simplegrid.info), size the height of your divs so they line up well and selective use of borders are you should be all set.
The tricky part is thinking in rows and columns if you are new to using grids in CSS.
You can do something like this: http://codepen.io/jamesbarnett/pen/BmHje
Wayne Priestley
19,579 PointsHi,
In you question you were asking how you would code the resume, that's the second link you gave.
The first link which is the home page of her portfolio is very easy to code, and something it wouldn't take long to learn.
I was referring to the second link you gave, the link that shows her resume, which is what your question appears to ask, which isn't done with a simple CSS grid.
Abhijeet Das
Courses Plus Student 3,158 PointsHello Wayne, thanks again for your reply you are right the main section where she describes about her experiences, educations, skills etc that's not easy to make by simple css layout. Therefore I was wondering is there any technique we have to achieve that design.
However James Barnett attach a codepen link http://codepen.io/jamesbarnett/pen/BmHje which is pretty much close to the original design layout. I am a newbie and that's why i was curious about CSS powerful layout techniques and want to see its possibilities to overcome any kind of design challenge.
Well I am happy to see its possibilities and determined to learn it's techniques.
Wayne Priestley
19,579 PointsHi,
It looks to me like this may have been designed in Photoshop or illustrator, especially considering her background in design.
Hope this helps.
Abhijeet Das
Courses Plus Student 3,158 PointsThanks for your reply. However I am wondering how to crack that design by using css layout? I am new on web design therefore i want to know it.
Abhijeet Das
Courses Plus Student 3,158 PointsAbhijeet Das
Courses Plus Student 3,158 PointsThank you James, I just want to see that design is possible through CSS or not and you show me here, "yes it is". Though I am still a newbie in web design ,therefore nothing know about CSS grid but i assume after your example yes we can achieve that design. Thanks.