How I made this responsive web page and what I learned doing it

One of the hardest things of learning to code as a self-taught developer is the near constant doubt of the curriculum you have to build for yourself. This is unavoidable despite the various articles that detail someone else’s personal curriculum and that’s because being a self-taught developer is highly personalized to how you learn. So if you’re like me, you’ve probably spent a good chunk of your time researching learning methods and plotting then re-plotting your curriculum. Finally, when I was looking for fun projects to do to practice my skills, I stumbled across this article with five projects for junior front end developers. Eager stop wasting time planning, I got started with the first one. This blog is about that. I’ll walk you through what I did to bring to life a one-page responsive template and what I learned.

The Project

The objective is to “recreate a pixel perfect design, and solve responsive design problems”. I stuck to Garrett Levine’s advice and used this template. You can see my code here and see the live site here.

This is the template I used to make my one page responsive site. (This is a screenshot of the template).

I know I could’ve used Bootstrap and libraries but I believe that doing everything from scratch is a great way to learn. Once you know the foundations, picking up libraries and frameworks will be easier.

The HTML

I recently started taking an accessibility course through Udacity so I was focused on making this page semantic so screen readers could easily identify what was what on the page. I’m really interested in accessibility because it’s important to me that anyone has access to information regardless of their abilities. I’d like to become an expert in this field, so I’m starting to brush up on this right now. (Side note: you’ll notice I alt-text my captions, this is because Medium doesn’t have a mechanism for that) This site isn’t fully accessible, it’s a bit hard to navigate with keyboard only (tabbing through you’ll notice that the menu tabs through even when it’s not active) but overall, since it doesn’t have a lot of interactivity, it’s okay. I picked up a few new elements, including the <hgroup> tag, which is more semantic than creating a <div> to group headings that belong together (usually a header and a subheader).

This is the first project that I’ve commented generously and I ran it through a linter afterwards which picked up a couple formatting differences and made it very pretty to look at.

The CSS

I’ve learned that the best way to make sites and apps responsive is to start from mobile first and then use media queries to handle bigger and bigger screen sizes. I had recently read this great article about the best breakpoints to use so I used their suggestions and had a much easier time with my media queries. TD;LR of the article: use mobile, 600px, 900px, and 1200px for your breakpoints because it more accurately reflects the devices that people are using.

I used to use classes sparingly and opted to style using element tags instead but was recently enlightened by Shay Howe’s course that classes are a much better way to style and can be used generously, so I did. Classes for everything! I also learned a few techniques from Shay’s course on how to organize CSS and chose to do so following a Base, Components, Modules model. For my next project, I’d like to use BEM for my styling.

Raise your hand if you feel like this when you write CSS:

(This is a gif of Peter from Family Guy having a hard time trying to adjust window blinds using strings. It’s captioned “CSS”)

To ease this feeling and make it enjoyable, I use Chrome DevTools. However, I learned that you have to be careful with the heights because when you change the height of the viewport your styles will look different if you’ve been using percentages. It’s much better to use pixels for heights so it doesn’t mess up. Widths can take percentages (and it’s best if they do).

When creating the form in the contact section, I wondered why my CSS wasn’t sticking to the placeholder text. I learned that you have to inherit the font-family and use input-placeholder to change the color of the text.

For the menu on mobile, there’s a transition so it slides down when you open it and slides up when you close it. I previously had the menu with display: none but learned that for this transition I had to use display: block, fix the position and hide the overflow. The transition is on the height property, using 0 when it’s closed and 204px when it’s open. I was so happy when this worked, I spent like 3 minutes clicking the menu open and closed and smiling like a weirdo.

It was kind of like this, but casual. (This is a gif of Carlton from Fresh Prince of Belair kind of freaking out in front of a computer)

I thoroughly enjoyed styling this page. My CSS skills have gotten to a point where they’re good enough that I can pop in a playlist (bachata or cumbia are very enjoyable to me right now) and just whittle away at it.

(I’d add that gif of the cat typing on a computer that I LOVE but I’m going overboard with the gifs in this section)

The Javascript

I admit that I didn’t think I’d have to do any Javascript for this project but I did end up doing a few things with JS. The scroll function was a monster but I’m so happy I tackled it instead of using a library. I basically did this hand-in-hand with my mentor and I learned a ton doing it. We started with this StackOverflow article. I had more than one element that I wanted to fire an event though so I created an array and then used a for loop to pass the elements to a function that used higher-order functions to check if the page boundaries and the element boundaries were intersecting. When they are, the function “showfn” is responsible for changing the backgrounds of all the menu options to the dark grey and changing the current button to light grey. I learned template literals so I could easily pass the section classes to the navigation link classes and I got much more comfortable with the DOM. It felt rewarding to grab the function from the StackOverflow article and make it my own. This function isn’t perfect, perhaps you’ll find a glitch in the menu change between home and about and that’s because both sections can be seen at the same time. I haven’t been able to find what would fix this exactly but hopefully, it’s something I’ll be able to fix when I have more experience.

I chose this gif because it incorporates building strength and scrolling, which I’ve just talked about. (In this gif, a finger scrolls up and down on a mobile screen and moves a barbell up and down changing the color on a gradient)

The next challenge was writing a parallax function so the background images of the header, the services banner, and the contact section had a parallax effect. In the past, I’ve done this with CSS but I learned on this project that using CSS won’t work if the image isn’t taking the entire viewport. As such, you have to use JS to change the image position so it creates that effect. This article helped me get started. The author used a helper function to create an array of the images to apply the effect to their styled class but my images were all different so I created my own array as a global variable and used an event listener on the window for a scroll event. My function parallaxScroll changes the background-position-y of the images which creates that parallax effect. There’s a problem with this function and it’s that it only begins the effect when the top of the image touches the top of the page. I would fix this by finding the bottom of the page and making the effect start when the top of the element touches the bottom of the page. I’m just not entirely sure how to do that because there’s no such thing as pageOffsetBottom (I tried, haha). Again, this is something I hope to be able to fix when I have more experience.

I was able to improve one functionality of the template and it’s a feature that allows the user to click anywhere to close the menu on smaller screens. I did this by adding an event listener to the window that listened for clicks then if the click was outside of the hamburger menu icon, the menu would close. The original menu function handles closing the menu only by clicking directly on the hamburger icon.

Conclusion

This project took me about a work week to do, working on it daily. The HTML and CSS were knocked out in the first two days and the rest was spent working on the JS. The scroll function took me a long time and as I mentioned I worked heavily with my mentor for that. Another wonderful thing that my mentor helped me with was a code review. They suggested that I add a function that allows the user to close the navigation menu by clicking anywhere and they pointed me to CSS best-practice like alphabetizing properties for improved legibility. They’re also the one who recommended that I use online linters to make my code easier on the eyes. My next project is making a multi-page responsive site and I’m sure that what I’ve learned here will help me become a better developer. Big thanks to Sergio NS for your help with this, as well as everyone who wrote the articles, courses and tweets that have helped me create this and my knowledge base on this adventure of mine to become a software engineer.

And thanks to you for reading! If you have any comments or suggestions, I’d love to hear them. You can tweet me at @gmzjuliana.