Tribute page and survey-form feedback

Code Feedback
1

Hi all

This is my first serious attempt at freecodecamp. I was pretty disheartened initially at the teaching style but upon reaching the ‘Responsive Web Design Projects’ section it started to make a lot of sense and although I’ve had to keep referring back constantly and searching the web it’s certainly helped me understand a lot of the concepts.

Anyway I digress…

I’ve spent around 2 days trying to complete these first two projects.

Tribute Page
Tribute page points:
Upon starting this project I was totally lost, didn’t have a clue how to start and ended up having to do quite a bit of searching and referring back to through the previous sections to remind myself of everything I had forgotten.

  • I had difficulty understanding how padding and margins worked with the image.

  • I’m not sure if I approached the bold text of the dates correctly or I repeated the markup too much.

  • I got caught up on trying to left align my bullet points up with the h2 title above. Still didn’t figure it out but wanted to move on.

  • Felt totally lost on if I was writing the CSS in a particularly bad way or making poor decisions on the page’s construction.

Survey Form
Survey points
This was really hard but at least I managed to start the page quicker and without feeling so lost like in the first project. I wanted to replicate the example as closely as possible to make this as difficult as possible for myself to try and gain a better understanding of everything.

  • I totally messed up initially by diving straight into the form and fields but completely omitting the structure and behaviour of the page. Only after I completed the form and a very basic layout did I suddenly realise I had missed the page was responsive and ended up having to comment out 95% of my code to return back to the structure.

  • It took me ages to get my head around structuring the page and working with divs, css, media queries. I had to color in divs, give them numbers and order them out to understand what I was looking at.

  • I lost count of how many additional web pages I used to learn different things from this. It’s incredible the resources out there.

  • I kept noticing different behaviour every time I would return back to the page and made an effort to replicate all of it.

  • I had trouble understanding how to add padding / spacing to the bottom of the ‘checkbox’ items. I wanted to use line-height but it moved the whole section down and I didn’t want to manually push down the label next to it to line up horizontally as it felt wrong. How would I have best achieved this?

  • The same as above for the ‘radio’ buttons

  • I only learnt the meaning of the ‘for’ attribute for labels when doing this project.

  • I did take a very quick sneaky look for the font used in this project (made sure to ignore the code as I didn’t want to cheat myself) as all my attempts to find the same font failed and I really liked the look of it.

  • I would be very grateful if anyone would view my HTML + CSS and feedback if I’ve made any glaring mistakes or broken any best practices (this is what I’m most interested in) as I really have no idea about these things yet.

Thank you all for your time.

1 Like
2

Tribute page:

I see it as very nice and clean as a first project, considering you said you were lost.

I just look up example websites and ask questions, break it down, on how i can replicate something i like. CSS tricks, W3 schools, asking on the forums, etc.

(Your title is in the same div as your timeline, so the text align class will apply to both.) It looks nice currently.

Your survey page looks nice. Keep it simple and modern like it is.

Use a media query to check for the max-width of 750px; and change your .form-container width to like 80-5% or something.

You can do another one and at 400px; you can do 90-5%.

Media query --> https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query

(current state on smaller screens).

image
image1920×1040 187 KB

Notes:

Please hit the reply button or i do not get notified.

List of helpful websites for web design --> https://codepen.io/Mike-was-here123/post/check-out-these-sites

2 Likes
3

First off, all in all, I think it looks good, you did well.

Here are two ways to achieve this.

/* Just controle the left padding as needed */
ul {
  padding-left: 18px;
}

/* Remove the left padding and use list-style-position inside */
ul {
  padding-left: 0;
  list-style-position: inside;
}

Form looks good except for this grid-template-rows: repeat(20, 100%); on the 520px media query, that completely breaks the layout for me, remove it and your good.

@media (max-width: 520px)
.form-container {
    /* grid-template-rows: repeat(20, 100%); */
}

Do you mean vertical spacing? If so the problem is the labels are using display inline and they don’t respond to vertical margin/padding, nor the <br> elements. Set the label elements to display block to see what i mean.

label {
  display: block;
}

At a brief glance, the only thing I saw was the use of the same id on multiple elements, ids have to be unique. Other than that, you seem to be doing things correctly.

We all know the feeling of being overwhelmed in the beginning, it’s a lot to take in but I would say you are doing well. The struggle is part of the learning process if you don’t struggle you are not learning. Keep up the good work.