I had began working on this project since before winter break! The task was to design and code up from scratch an email template to market undergraduate research in the liberal arts department.
I started by creating a mockup of how I wanted my template to look. My goal was to emphasize the benefits of participating in research to first catch the students’ attention, then offering some examples of what they could be working on. All this, of course, would be in accordance of the “landing page rules” where I have sufficient action buttons where the students would want them.
(original mockup done in photoshop)
Then Andre suggested that I add a section with “testimonials” from previous students who have participated in research. Below is the resulting mockup:
It took me a few tries to create the right structure in CSS to create this template. It looks simple but creating this in code was a bit complex, with countless divs separating everything. It took some planning beforehand:
my planning looked like boxes within boxes to fit all the elements how I want them. This was an important and valuable learning experience, as this template was the most complex CSS I had worked with at this point
Some issues I ran into: working with tables, trying to align objects to the center, figuring out the best way to move objects while making the template remain responsive
But at the end (and with lots of help from Andre and Maxwell) I finally completed my first coding project 🙂
Here is a link to CodePen for the final product and code.