1 - SETUP
One of the most important things for every developer is their setup. How you have your computer environment set up will determine how fast and efficiently you can code. Spend some time here to make sure everything works well. If it doesn't, don't hesitate to.
Create a folder in your Desktop screen called
Develop(her) [or whetever else your heart desires].
Open. Once you do, a black screen should show up
Drag the folder you just created onto your. This should activate a new left panel with your folder inside.
Give your folder a right click and create a new document. This should be called
index.html. This is where a lot of the magic will happen. ✨
Once a new page opens to the right, write
index.html and hit
cmd + s or in the navbar on top you should see a tab called
File > Save as...
2 - HTML
Now we will build the structure of our site; the skeleton. You can see each
<tag> as the building block of your site, the layout of your house. Based on how you structure these, the rest of the design will follow. This means, be careful. Draw it first on a paper page with each tag so you know where everything goes.
We will start by writing
This should look something like this:
Once you finish coding your main structure, then you can start adding values to your tags.
Add in some funky emojis by tapping
cmd + ctrl + space in your Mac or
Win + ; on Windows. 🤪🥑🧠
Add in some cute icons to your webpage to make it more lively. You can search for nice freeor .
Add images to some more images about your hobbies to your page. In order to do that:
Create a new
images folder, the same way we created a file, except now we will select the Create a New folder button on our left hand navigator.
Then, store the images you want to use in your page in this
Once you have them, call them throughout the your page by using your
image tag like we did in the code below.
Add gifs to brighten someone's day. Everyone loves a moving image.
If you want to save some time, you could just grab some of mine.
Otherwise, head over toand get some.
Once you find the one you want, save it in your
images folder so you can use it throughout your page.
You can repeat the steps provided to add an image. Surprisingly, a gif is added the same way we add an image, through the
3 - CSS
First, link your
style.css file inside the
head tag of your
Then, use the CSS code below to give you a head start on adding some color and fun to your page.
Make it your own 🤪:
Get some cool fonts at
Need some inspo on font pairing?may help you on that department.
In terms of colors and color palettes, you may find some nice coloring schemes here:or
Also - here's ain case you were wondering all you can do with CSS!
PS - remember that in order for those fonts to work, you need to link them in your
index.html's head. To do this, you can just copy the embed link gives you.
4 - LAYOUT
The first thing we need to do is activate Flexbox on the
div where you want to use it. Remember the one receiving this are its flex items.
This is done by adding
display: flex to the element whrapping all items you want to be affected.
For example, in our website we'll add Flexbox to our hobbies so that they're right next to the other. In this case, we'll add
display: flex to the
ul since we want each
li to act as the flex items.
Once you have the container set and activated, the default behavior of Flexbox is to make your flex-items inlined, so you should already have them displayed horizontally. Nice work! 👏🏼
Next step now is to make sure this is not only inline, but also displayed with some nice space in between each image.
In order to do this, we're going to add
justify-content: space-between to our
.flex class. This will make sure that all flex-items are displayed with space between them based on the size of the element where it lives.
This is really nice because the space between them is calculated automatically, without us having to worry about the specifics.
Now, let's say we add in 3 more cards to our hobbies list.
What we shall see is that the cards are now falling outside of the
div which is of course not the behavior that we want.
We can solve this with
Flex-wrap will make sure your flex-items are wrapped inside the container
div so that they can't fall outside of the box.
The rest is up to you ✨. Have fun exploring different types of layouts to your page. Maybe a square? Maybe have them be different sizes with the flex-grow property? Find all the flexbox hacks here and even a few fun games to get started if all of this is too confusing still 😛🐸.
Game to get better using Flexbox by repositioning a frog within its pond.
Fun game where your job is to stop the incoming enemies from getting past your defenses using Flexbox to stop them.
Often times, you will sadly find out that the mobile behavior is not exactly what you want. Sadly this happens more often than we want to. 😔
However, there are some good tips to help improve this behavior:
Write your widths, heights, margins and paddings with percentages rather than fixed pixels when possible. This makes sure things are proportional depending on the device.
Use tools like Flexbox, CSS Grid or Bootstrap grid whenever possible to make sure this responsive behavior is handled for you.
Use media queries to make sure you're getting the behavior you want when your screen is a certain size.
Media queries make sure that whenever the screen of the user is 640px, for example, the design is displayed in a certain style, different than when it is displayed in a computer screen or a tablet.
In order to use them, the first thing you should do is google the screen size of the device you want to adapt your page for. The search can be something like media queries for (device you want)
's an easy resource to checkout if you don't know where to start.
Now that you know what the screen size, we can start adding the breakpoints and adapting your design as you wish.
Here's an example to get some ideas flowing, you know that you can change everything about your design and it will get added when the screen crosses that given breakpoint. Go wild 🤪
The best way to grasp programming concepts is by practicing and studying the default behavior of the language.
For this section, rather than building upon our own site, I will share some outside resources where you can practice what we learned today.
6 - WEB ANIMATIONS
Creating events in the DOM (Document Object Model) is how we animate our sites so that they feel interactive for our users.
Before we get to the animation section though, lets create another file in our folder called
index.html file in the first section of the course.
index.html file, somewhat similar to what we did with our
style.css.The difference is that rather than placing it at the
head of our file, we will place it as the last element before closing the
Select the element 🔤: This is the part where we select the specific element we want to animate.
This can be done by using the same CSS selectors we use for adding the style to our elements.
Hire the Event Listener 👂🏽: the Event Listener is the watchman we hire to look over our app. Its job is merely to be on the lookout in case the event it's looking out for actually gets triggered.
Now, be advised. At this point, your Event Listener still won't work. We just hired her, but we haven't given her a mission yet.
Define the mission 🧐: This is the section where we tell the Event Listener which event it should be looking out for.
Whenever we're defining the mission, we're always going to give it two parameters:
The, which can be a mouse event, a key event, a touch event, etc..
The animation or change that shall occur when the event happens.
This should still fail because we haven't defined what
animation is, so let's define it and actually create the animation!
Create the animation 💥: This is where we give life to element we have selected. When we're building our animations, this will always be in at least 2 steps:
Select the element we want to animate.
Now this is important: Be careful not to confuse the element for the event and the element for the animation.
The element for the event is the element the event will be happening on, aka the element (
paragraph in this case) the Event Listening is looking out for when the user clicks.
We also have the element the animation is happening to. Now, usuuuuually these two elements will be the same. "When the user clicks on paragraph, the paragraph should be the one to change its color, size, etc. BUT this is not always the case.
Sometimes, I want to make sure that when the paragraph is clicked, the image underneath changes height, or the background color of the document is changed.
Once you have the element selected, now we want to perform the animation on it.
The best way to understand this is by checking out the Inspector console on the browser and play with all the properties we can apply to an HTML object.
As you can see from the video, all the properties in blue are all the things we are able to do with our elements.
Of course, this might feel overwhelming at first with so many options. This is normal. My best recommendation is to just play with it and see what you can do.
Here are some examples:
We will be using several resources throughout the workshops. Here you shall find an updated list with the cool tools we used that day + some extra fun challenges for you to checkout at home.