Completed the Technical Documentation Project if anyone fancies having a look. Feedback is always welcome!

This is the first project that I will have completed on my first attempt, usually I have a few attempts at the projects until I’m satisfied. However, unless I have enough negative feedback on this one I will be happy with my first attempt.

When viewing on smaller devices I wanted the navbar to be at the top of the page and have a bit of a gap between the top of the screen to the navbar. Unfortunately this resulted in the main-doc appearing both below and above the navbar when viewed on small devices. I had a look online for fixes to this however most seem to use JS which I have yet to properly get my teeth into. So, I came up with a bit of a cheeky fix that I’m pretty chuffed with! (not very fancy, I just added a white block at the top of the page above the navbar)

codepen link: https://codepen.io/Ian3/pen/qMwLdN?editors=1100

Any feedback welcome!

Thank you

(I had already done the Personal Portfolio project earlier this year before the curriculum was updated, therefore going to move onto the JavaScript course. Bit worried because I had attempted it previously and it royally kicked my arse on the Record Collection task, I gave up because the Responsive Web Development curriculum was updated, I wanted to finish all the new Web Development tasks and also the Record Collection task was too difficult for me to get my head around. - wish me luck on my second stab at JavaScript!!!)

If you are unhappy, look up examples for inspiration. Break them down into sections and see what you can improve. lots of small, easy things can improve a web page by a lot.

1 Like

Overall I think it looks good. Very nice work!

In my opinion one thing that would make it better is to make the navigation into a dropdown menu on mobile screens. The large navbar kindof obstructs reading the actual content.

1 Like

never thought of that centawr, drop down menu would have opened gave a lot more space on the page for the rest of it. good point, thank you

1 Like

Here is some helpful links:

(hit reply button or i do not get notified)

2 Likes

Nice one, I’m liking Coolors: Generate a random color scheme, your portfolio is looking good as well! Thank you

1 Like

I love the Spanish flag letters!

At small screen your fixed header needs a little bit of work.
If I click on one of the internal links the top part of the content gets buried under your navigation.

Should look more like this.
image

Also at small screen the scrolling menu is a little cumbersome on a hand-held device. Probably some button-looking links or a drop-down menu would be more tablet / phone friendly

1 Like

Lovely! Good feedback thanks. Didn’t think to check on the positioning of the page after clicking a link. Not sure how I would go about fixing that. Whenever I tried adding margin-top to the main page it lowered the navbar as well. I might be mistaken but I think I might need JS or Jquery to maybe help with that?

I played with is some and had good results. This is a tricky subject first time through so you might want to seek out a short introductory tutorial / article on fixed headers.

All changes are inside your media query for smaller screen
I took margin-top off of #title_header
and then
I put the same padding-top on your main
that keeps your “Spanish Conjugation” visible on page load

Then the tricky part that gets your internal link targets to line up right…
I put the same distance as negative margin-top on each section
and same again as padding-top on each section
This tricks the browser into displaying your content below your fixed header

Somewhere in there I had to remove some other padding style on your main element too. It was overriding my changes. Not sure where exactly that was though.

@media all and (max-width: 890px){
  #title_header {
    font-size: 3vw;   
    /*margin-top: 25vh; */ /*removed this*/
  }
  main{
    padding-top: 25vh; /*replace with this*/
  }
  section{  /*:target might be better choice*/
    margin-top: -25vh;  /*link trick here*/
    padding-top: 25vh;
  }

I just used the elements as selectors - main, section.
You might do better to use id or classes instead since not all sections are necessarily link targets, etc.
There is also a selector :target that only styles the target of your internal links.

1 Like

these too --> https://coolors.co/browser/best/1

1 Like

Oh wow alhazen1 that works a treat!!! (I did it slightly different, removed the margin-top from #title-header, added it to main and section (using id’s).

regarding your thoughts on :target - I need to revisit pseudo class selectors, freecodecamp curriculum on psuedo selectors was rather short and I didn’t fully understand them. Will watch some youtube videos on them tonight.

Thanks again with the advice, really appreciate you taking the time to help me with this!

awesome, bookmarked that one as well. Thanks again Michael, will refer to that next time I start on a page !

1 Like