- Today, we're talking code, and I want to walk you
through my first professional coding project.
(bright music)
This year, I have been learning to code.
I've been learning to code the designs that I build.
I previously did have some basic understanding
of HTML and CSS.
Like, I was able to code my own website, charlimarie.com,
just by hacking away mostly and Googling a lot of things.
But recently, I've been coding professionally at my job.
I've been learning to use Git and GitHub
and the Sass system that we have set up.
And today, I want to walk you
through my first proper coding project
that I really undertook at ConvertKit.
It's the site for our conference that happened a couple
of weekends ago at the end of June.
The conference was called Craft + Commerce,
and it was part of my job as the marketing designer
to create the site for the conference,
to create a place for attendees and potential attendees
to go and find out all the information
that they need to know about the event.
I am gonna do a whole separate video about learning to code
and how I've been doing that, what services I've been using
or whatever, but today I thought it'd be fun just
to walk through this first professional coding project
that I've created, show you how it's set up, how I did it
and tell you about some things that I learned along the way.
So this is our conference site, and the first thing
that I'll note with this is that on convertkit.com,
we use WordPress, and I didn't create a whole new theme
for this conference site.
It's not a separate site,
but rather it's just a page template within WordPress.
I did it this way, because I wanted to make use
of things like the existing type styles and spacing
and the Bootstrap grid that we use
so that I didn't have to repeat all those things.
So rather than create a whole new theme
for this conference section,
instead it's just a page template,
and I used a separate Sass file with all
of my specific conference styling in it.
I'm gonna leave a link in the description
where you can go learn more about Sass actually,
because I don't think I'm qualified enough to explain it,
but basically it's when your CSS is separated into parts,
and it makes the whole system much easier to work with.
So if we look over here at the coding side,
I've got this fancy split-screen setup, so I can show you.
This is technically the conference page template
that I select in WordPress, and it's got the navigation
in it, and it's got the footer in it.
And in the middle here, you can see this bit
that says get the template part, conference-content.
And conference-content is where I have it
fetching all the various individual pages that I had set up,
because most of the site is static.
There's only a few pieces in it that needed to be dynamic.
For the most part,
it seemed like it was just gonna be easier
to code everything as static HTML.
So what this piece here does is it says
when it's the speakers page,
you're gonna fetch the speakers content, et cetera.
The speakers page was one of the most challenging.
This was one of the places where I did use dynamic content.
So as you can see at the top here,
we've got all our speakers, and this works as navigation
to directly drop down to their bio as well.
And then, yeah, each speaker has a bio
with some social media links
and the time that they're gonna be speaking.
Now I also used the bios on the overview page.
If you click on the speakers here,
then you also get their bio popping up in modal window.
And I did the same on the gender.
So because I was using this bio in three different sections,
I obviously didn't want the speakers information
to be static, because that would have meant
that if I needed to make a change,
it would have had to updated in all three places,
and it would have really bloated my code,
and there was no need for that.
So this is one thing that I did use dynamic content for.
What I did for speakers was create a custom post type
in WordPress, so that means that it appears
at the side here, and I could add a new speaker.
And within each speaker,
I set up a few different custom fields
using the Custom Fields plugin, just for their bio photo,
the time they're gonna be speaking on the stage
and then their talk as well.
This meant that I set up every speaker in WordPress,
and it meant there was just one place to come and update
if I needed to make a change to their talk title
or their bio or their photo or whatever.
And when the speakers were added or updated in WordPress,
they automatically fed into various places on my site.
And let me show you the code for this.
So on our speakers page, I have set up here
that it's calling that specific post type,
and then the code obviously tells it what to do
with that post type, once it fetches it.
That's a real professional code explanation there, isn't it?
I don't know how much detail you want to see in this,
but, you know, I used pieces of PHP
to fetch the speaker name and put underscores
within it so that I could use it as a anchor tag.
For the bios, I've used yet another template part.
So let's jump into that.
So even though this is on the page, like what, 14 times,
however many speakers we had,
I just had to code this one block,
and then it would repeat itself automatically.
And then for when the bio appears in the modal,
so on the overview and the agenda,
I had a different template part,
just because even though layout is pretty much the same,
it needed something slightly different to be able to have
that cross at the top and appear as a modal.
So that was fun.
That was my first experience learning how
to use custom post types and to use PHP
to put content in different places.
I actually really enjoyed it.
There was a lot of struggles with getting my head around it
and figuring it out.
A lot of mistakes were made, but got there in the end,
and it all worked, which is good.
Another place where I used custom post types
is the attendee page.
So we wanted to have a page that featured all of the people
who were gonna be attending the conference,
because at a conference,
especially a really good quality conference,
the attendees are just as valuable to speak to
as the speakers themselves.
It's handy to know who's gonna be attending
and who you can make connections with,
'cause networking is a huge part
of any conference that you go to.
And so we wanted to build this directory.
This page features all several hundred people who attended.
I can't remember the exact number.
In the end, I think it was close to 300.
And how these people got on this page was
by filling out this form here.
This is a Gravity Form.
We used the Gravity Forms plugin for this.
Using the Gravity Forms and Custom Fields plugin,
it would then feed the information from this
into a post type in WordPress, and it would appear here.
I made them all appear as pending
so that I could go in and check
that the person was actually attending the conference
before I approved them to put on the page.
But I am looking at ways to automate that for next year.
Then in the code for the attendees page,
pretty much just like the speakers,
I was using the PHP to fetch all the relevant content
and put it into the right places.
And again, the code works in a loop
where it just keeps fetching until it reaches the end
of post in that post type.
This is where I started to see the true power
of using custom post types and dynamic content like this,
because imagine how long it would have taken
to individually put in all these people's names
and links and photos into some static HTML.
That would just be way too much work.
So I'm glad that I struggled through
and figured this out with a lot of help from Dylan,
who's the other designer-developer at ConvertKit.
One of the main problems I ran into with this part
of the site in particular was photos,
because even though I put in directions
to upload a square photo that was below a certain file size,
people often didn't listen to that.
It's just a thing that happens, you know.
And if the photo wasn't exactly square,
then these nice circles
that you see here would actually turn to ovals,
because these circles are made just
by putting a border radius on the image.
And so to handle this, we had to write a piece of code
that would take the photo when the form was submitted
and automatically crop it before it was then put
into the page, which was very far above my head.
I had to do a lot of Googling for this
and get a lot of help from Dylan on it as well,
but still, it was a good learning experience.
So it's basically this part in our functions file
that it only happens on this specific form, form 21,
that you see here, and it resizes the image.
That was definitely, for me, the hardest part
of this whole site coding process.
The rest of it was mostly about getting my head
around our code base, figuring out how we do things
with this SSAS system that's in place, and yeah,
learning what styles we already had that I could make use of
so that I wasn't duplicating things
and just remembering how to work
with Bootstrap again as well,
because it had been a long time since I did that,
and like I said, I'd never done it
in a professional setting before.
Another little quirk that I learned
while doing this was how to get these alternating white
and gray backgrounds here, because,
like I said before, I wasn't coding these statically,
so I couldn't individually apply a different class
to each section that I was working with.
Instead, I learned how to do this nth-child thing.
So I had it set that every odd number of it
with the profile class attached
to it would get his gray background color,
and everything that's not would obviously just stay white.
So that was pretty cool to learn.
That's really kind of handy
in a lot of other places as well.
Another thing that I learned was how to work with flexbox,
although it still trips me up a lot of the time.
But things like these points here,
if I wasn't using flex, then this line wouldn't continue
throughout all of them.
They would sort of, like, be jumbled around,
so that was really good to learn about as well,
same with these boxes, that flex just helps them
be the same height.
This ticket box was another one that was really tricky,
and I had to get help from Dylan on.
You wouldn't expect a line to cause so many issues, right?
But it did, but again got there in the end.
That reminds me, another thing on the speakers page
that I learned was about order.
See how these alternate with having the picture
on the left and the right?
But when you resize it, I wanted the picture
to always be at the top.
So I had to use the order property to apply
to every odd number as well so that when it was
at this specific break point,
the picture would be order one and go at the top.
Does that make sense?
I hope that makes sense.
Overall, building the site
was a really great learning experience.
I'm glad that I designed it before I started coding
and before I realized how tricky some pieces would be
to code, you know, because I think
that I don't ever want my coding abilities
to limit my design abilities.
I think it was a really great project to just dive
in headfirst, to coding in a professional environment with,
because it was a lot of things that I had to get used to,
like shipping at various points,
we had to put the overview page up first and then later add
to it with the agenda and everything else.
It got me in a really good habit of using Git
and committing and et cetera and things like that,
that I didn't understand before.
And if you don't understand that either,
watching this video, don't worry.
I think I'll mention it in my video
about learning to code, when I do that.
But yeah, I'll leave some resources down below,
in the description, as well.
Thanks for watching this video.
I hope you enjoyed hearing about this project
and the things I learned along the way.
If you've got any questions about it,
then I would love to hear them.
Leave them down below in the comments,
and I will answer them as best I can.
You can also check out the site for yourself,
and that will be linked in the description.
Give this video a thumbs up if you did enjoy it.
And if you're learning to code as well
and running into difficulties, like I am still,
then I just want to say keep pushing and keep going for it,
ask a lot of questions, Google a lot of things
and just keep trying, because it's a lot of fun
when it all works out in the end.
All right, thanks for watching, have a good day,
and I will see you next time, bye.