Maru

Posted on Mar 4, 2021

Working On My First Projects (would love some feedback)

#beginners #portfolio #webdev #codenewbie

Hello! Recently I completed the Responsive Web Design Certification on freeCodeCamp and on this post I want to show you the projects I built, as well as some of my thoughts and things I learned in the process.

Alert: Please bear with me, I'm sorry if at one point I don't use the proper terminology.

#1 Project: Tribute Page

For this one I chose Grace Hopper.

CodePen link

Thoughts:

I had a very vague idea of the design I wanted, so I had to play around with the fonts and colors for a while until I was happy with the result.
To accomplish the dark background I wanted for the "Early life" section I learned that I could add margin: 0 to the body, so the background color could cover the whole section.
Initially I had added width: 100vw to the Early Life section, thinking it would help me have the (full width) dark background I wanted, but instead, this added a horizontal scrollbar, which was so annoying! Of course this took me a hot minute to identify and several hours reading forums. Solution: just removing the width property, it wasn't necessary.

#2 Project: Survey Form

The topic I chose was "Work Burnout"

CodePen link

Toughts:

I think the most challenging part this time was to style the form controls. This was a whole new world for me.
I learned about box-sizing and its importance when styling block elements.
I learned that for vertical alignment (align-items) the parent container should have a defined height property and in order for the margin-auto technique to work it needs a defined width property, but it can't be 100% (duh).

#3 Project: Product Landing Page

For this one I did take the time to pick the colors and even design a very simple logo, this saved me A LOT of time.

CodePen link

Thoughts:

I learned that less is more. Sometimes I come up with some very complicated (and unnecessary) ways to display the layout I want, and then it turns out that with just a few lines of code I can still get the desired result.
I learned how to add CSS icons, specifically Font Awesome's icons.
I learned about grouping selectors and its importance.
The one issue I was not able to figure out was how to make the iframe responsive, but overall, I feel very happy with the final result.

#4 Project: Technical Documentation Page

I had a lot of fun with this one. The topic I chose was CSS Flexbox.

CodePen link

The first challenge I had was to create the stationary sidebar, I didn't want to use position: fixed so I learned more about position: sticky.
I also learned about overflow and how using the auto property helped me accomplish the layout I wanted.
I tried to use position: absolute to place the "Made by Maru" at the bottom of the sidebar, which worked at first. However, since this removes the element from the regular flow, it was overlapping with the menu when I resized the window vertically so I decided to leave it on its original position.

#5 Project: Personal Portfolio

CodePen link

Thoughts:

This one is actually the second version of the original project I submitted for freeCodeCamp.
For the progress bars I used some CSS I found online, it's not the best way to do it but for now it gets the job done.
I struggled a lot with media queries on this project, I wanted the mobile version to look good but I think I still have to do some research about this.
Overall, despite the things that I want to improve, I really liked it!
In the process of working with these projects I discovered Figma and I've been using it ever since.

If you made it this far, thank you so much for reading! I would love to receive some feedback too 🤓

Oldest comments (46)

cigwe416 • Mar 4 '21

this is great. Keep it up

Maru • Mar 4 '21

Thank you! 🤓

Lorenzo • Mar 4 '21

Cool! Sonos todos muy bien hacidos!
Se puedo permitirme pienso que deberia hacer sitios mas interactivos. Por ejemplo el portfolio podria tener mas :hover effect quando el user pasa su mouse sobre los elementos (como el logo - cambio de color, Maru - la linea que se mueve, los dos botones que ce animan, con una inversion de colores por ejemplo...)

Maru • Mar 4 '21

Estoy de acuerdo! Es algo que debo añadir para que sea más interactivo.

Gracias por su comentario :)

Lorenzo • Mar 4 '21

Así que te aconsejo que no lo pongas en codepen sino que lo hace "hostar" (no sabe come ce dice en espanol).

Marck • Mar 4 '21

La verdad es que cada uno tiene un buen diseño, Buen trabajo.

Maru • Mar 5 '21

Muchas gracias 🙌

Félix • Mar 5 '21

These are great! Honestly. But, since you want some feedback, here are some of my thoughts on each project:

#1 Tribute page

I like it!
I feel like it could use an accent color (It wouldn't have to be flashy) since only black and white looks a little bit too sober in my opinion.
I think the sections could use a bit more padding-bottom to equilibrate with the padding on top.

#2 Survey form

This one is very cute 😄
Nothing negative to say about it. It's simple, very responsive, colors are nice. Great job!

#3 Product landing page

I really enjoy the colors
Small detail: The button could change color when hovering with the mouse and the cursor could change to a pointer. Something like:

.button:hover {
    background-color: #EFA23C95;
    cursor: pointer;
}

#4 Technical Documentation Page

This is my favorite one. It looks very professional. I am impressed 😅

#5 Personal Portfolio

Again, this is very nice.
Simple, yet effective.
Great colors.

General thoughts
I like the fact that you took the time to reflect on what you've learned while making theses. I also like the fact that you went out of your way to make this post to ask for feedbacks. I think these are great ways to improve. Keep it up! 👍

Atulit Anand • Mar 5 '21

Color theme in the second project is just astounding.

Maru • Mar 5 '21

Wow, thank you so much for taking the time to write a comment about each one of the projects, I really appreciate it.

Also, thank you for the feedback, I definitely need to work on making them more interactive, that's why I'm very excited to learn JavaScript and be more creative.

PD: The documentation page is also my favorite one 😅

nthdat • Mar 5 '21

Wow! That's a lot of projects you've got there.
I really like the first one, the Tribute Page as Grace Hopper inspires me to code.
And I really enjoy your color combinations, they're just artistic.
Couldn't have done it better myself.
Good job!

Maru • Mar 5 '21

Thanks a lot! And yes, Grace Hopper is a big inspiration for me as well 💪

Cody Tilkins • Mar 5 '21

I feel you spent a proper amount of time deciding colors. I bring you a tip on choosing black - prepressure.com/design/basics/rich...

Cody Tilkins • Mar 5 '21 • Edited

Also brown isn't a real color - it's dark orange depending on the surrounding light intensity.

Maru • Mar 5 '21

Thank you for the tips!

tankerguy1917 • Mar 5 '21

I think it looks good. The colors and other aesthetics are very nice and inviting, if that makes any sense. Also, the layout of everything is pretty good, not distracting, and not boring at the same time. Lastly, its better than anything I can do.

Maru • Mar 5 '21

Thank you for taking a look at them! I'm sure you can do a good job too, just try it! At first, I was very scared but you learn a lot in the process.

Pawan Pawar • Mar 5 '21

Good content!!

Lorenzo • Mar 5 '21 • Edited

Another thing to notice reviewing the various links.
El segundo, "survey form", no te pone de ninguna parte quando selectiona el link. Pienso che serie mejor que simplemente pone un mensaje "Es un test, los datos no son registrados" o que hace una pequena animation y que anula el href con un prevent default. Si quiere he escrito un articolo sobre esto.

Error image

Maru • Mar 5 '21

Gracias por la observación, es cierto. No sabía cómo arreglar eso así que veré el artículo 🤓

Saludos!

Lorenzo • Mar 6 '21

No dudes en preguntar si tienes algunas preguntas.

Mudit Mishra • Mar 5 '21

Hi Maru, you have done some awesome work. Especially your projects 3 and 4 are really well designed. I am also doing FCC responsive web design course (currently on module 3) hoping to make cool projects like yours.