landing-page | Personal landing page template

I working on ngx-translate. I bring that to work in app.component.html as almost tutorials describe. But how to do this in the components of my modules? Do I have all the steps for every module, or is there an easier way? If I bring all the steps from app.module.ts to my.module.ts I got an error message on running ng serve.

I am learning CSS grid. While practicing I got an issue. justify-content: center is not centering section-3-nav div.

Here is my code:

When I apply background-color to a section, it leaves white spaces on the right and left side of the element.

I want to remove them so that the background-color fills out the whole width of the section. I think I could solve it with extra padding, but is that the right thing to do?

Maybe I am blind, but I also did not find any CSS from the parent elements, which mess up the CSS from the section. I attached the CSS and HTML down below. I believe the error is caused by the CSS.

HTML:

I want to create a basic Navbar, which stays always on top of the page, even when you scroll. In Addition, the Navbar should be as wide as the width of the screen it is displayed on.

My current attempt is this:

CSS:

Recently I have started learning CSS Grid. I am currently working on a landing-page section that consists of 6 rows and 9 columns. I have two elements that should fill out this section.

What have I tried to fix the issue:

I googled the issue and read about functionality such as "3 / span 2" to choose a starting position. I tried the grid-column-start method, starting from Auto, 0 and 1.

My HTML

I have a Project in Flutter Web for which I'd like to create a landing page in pure HTML for SEO purposes. My intention is to create a Server that serves the static files with higher priority and if the static HTML files would return an error on the request, the built flutter web project should be used as fallback.

I created this server in Golang:

I am creating this mobile nav-bar that fades in and fades out when I click the menu button(this button appears when I reach out to about 800px). By default the menu has a transform: translateX(100%); and when I click the button it applies the class and styles .nav-active{ transform: translateX(0); } , the menu is supposed to appear on the screen, but the style is just not being recognized.

Here is my code so far.

I currently set up a simple React JS application with 2 pages - A landing page and a 'Room' page. I am using the useHistory hook from react-router.

Expected behavior

When user clicks refresh in the 'Room' page, the application shall go back to the 'Landing' page.

Projected behavior

User hits refresh, pathname did change to the pathname of the Landing page for a split second. And the 'Room' page mounted itself again, replacing the 'Landing' page.

Here are the code snippets of my application:

App.js

We have a css file with grid defined and it was working fine previously. Recently we are trying to use CSS module and changed the file name from sonar-landing-page.css to sonar-landing-page.module.css and import it in the js file like the code sample below then it stopped working, the css module itself seems to be working fine as we added a simple .error style like the one below and the red color is showing correctly but it is just the grid not working, can anyone shed some lights? thanks!

sonar-landing-page.module.css