In my previous post, I installed Git, laid out all my essential files into a new Github repository, and then designed a flat image of how I wanted my portfolio to look.
I started out by designing my logo using Adobe Illustrator. It was pretty simple because I had already designed it in Sketch. I copied and pasted it into an artboard and exported the logo to an SVG file. The next step was to start coding the content. Most of the process was pretty simple because my design consisted mostly of text and links. I added some CSS to center things and it was already starting to look pretty nice!
Next, I changed the background color to match the gray that I picked out by using its color code. Everything was turning out as I had hoped so far except for the form. I wanted the name and email inputs to look more like the design I made so I kept messing around with the code.
I searched around online and found a way to make the form inputs look more like the design by making some adjustments to the CSS file. However, the layout of the form became centered vertically and each input was stacked on top of one another! In the midst of this, I also decided that the submit button would look better in red.
I tried to figure this out on my own and was getting close, but the form layout kept coming out crooked. I decided to take a break and decided to Tweet my progress. Some heroes came along and advised that I try using a table. Of course, I probably should have realized this myself, but hey I’m learning! I started placing the form inputs inside a table and struggled along the way. Eventually, I came up with a solution that worked!
I coded the form into a table by putting the name and email inputs into one cell and the message input to another on the same row. I adjusted the widths using percentages, and added an empty cell in the middle to create a gap. It now looked as nice as I wanted it to and with only minor differences from the flat design!
Moving forward, I still need to make the design responsive to different screen sizes, I need to make the form actually work and accept input, and then of course putting the portfolio online! As always, I’d love some critique and am curious to know if there may have been a better solution!
That’s the end of part 2. I hope you’re enjoying the progress!