Hello, Frontend Mentor community! This is my solution to the News homepage.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
For a portrait screen size mobile like 710 x 375, when you open the navigation menu, the links are not displayed properly. To fix that, just decrease the 'margin-top' in this rule:
.nav.active .menu {
gap: 1rem;
margin-top: 50%;
}
A better approach would be to statically position both the '.amburger' and the '.menu' elements.
Hey community members 👋
I've completed this challenge, built with MVC(Model, View, Controller) Architecture. I used component architecture to separate each function into its own module to make it readable, usable, & moreover, scale the app. A lot of extra animation & features have been added to this.
Any feedback & suggestions on how I can improve are welcome.
I was waiting eagerly for someone who completed this challenge using vanilla JavaScript.
The code looks very concise, readable and maintainable, so congratulations on this challenge. I also think you probably studied a JavaScript course by Jonas. I also studied the same course and it is fantastic.
I have only one thing. In the 'helpers.js' file, you add an extra promise to include a timeout to perform the request. That is a good solution.
However, there is no need to add an extra promise, because the 'fetch' call have an 'options' argument when you can include an 'abortion' object. Here is an example: https://stackoverflow.com/questions/46946380/fetch-api-request-timeout
I also implemented that technique in my challenge. It works like a charm!
Good job Omar! Just one thing. If you display your site on a smartphone in the landscape, and open the right popup, you will realize that the bottom buttons are not visible. To fix it, just set a scroll to the 'aside' element.
Very good job Tochi! Just one thing: If you display the site on a smartphone and on the landscape, you will realize that the site goes up too much and is not visible. Try adding this media query:
In order to make the hero image responsive, I had to include a media query by using picture and source in the HTML file.
However, I want all the media queries in the CSS. I tried CSS background images, but it was impossible because I had to set a specific height to the image.
Is there a way to achieve the same thing by only using CSS?
Good job man! I just saw one problem. If you use a view port width of 450px, you will realize that the logo and the links in the header are stick together.
One way to solve this problem is to set this style in the header for mobile screens:
flex-direction: column;
And then set back 'flex-direction:row' in the media query for desktops (min-width:768px)
I built another version of this challenge with React and wanted to try building one with plain JS, as the React version was more for practicing React again and I felt quite rusty, so the code wasn't as DRY as it could be. I also wanted to practice writing cleaner CSS since I have a bad habit of testing out a bunch of declarations and then seeing which one works. Plus there were other features I wanted to add but didn't get to (such as accessibility features and link simulation), and so I wanted to see if I can do that in just JS without React.
I started by building out a small version on CodePen to practice skills I used in the last project, and then I reworked the existing HTML and some of the Sass from the React project. It took me quite a while mainly due to trying to put in new code while cleaning up my old code at the same time; this ended up being quite a good exercise in seeing what to do when you need to work with existing code and how to add new things without breaking it. I also tried to use less of CUBE CSS and BEM (or rather, a modified simplified version of my limited understanding of both).
The biggest takeaway I had was, it's a good idea to use CodePen as a draft area to test things out first, and also to think seriously whether the CSS I wanted to write is really needed before writing it!
Please feel free to let me know if anything is not working as it should be. Thank you all! 🙂
Hello Elaine! You did a great work, so congratulations!
Now, there is a bug that happens with fixed positioned popups. I happened to have the same problem with this challenge.
Try to display your site in a smartphone in landscape, or just by using the responsive mode of Firefox or Chrome with a display of 830px X 330px. You will see that the 'Register' button is cut from the viewport, and you cannot scroll down to see the button. In real smartphones, the address bar takes some space of the view port.
That is because fixed popups do not push down the body when the content exceeds the height of the view port size. But absolute positioned popups do.
I tell about this bug because you are pretty advanced ;) The rest of your implementation is awesome!
Just a small remark. If you resize the browser to 375px wide (IPhone), you will realize that the links of the footer (databiz, audiophile...) are kind of too big. Much bigger compared to the design. I tell you this because I also ran into the same mistake with this challenge.
Also, as Elaine stated, the drop-down sub-menus do not open using a touch simulation.
hey guys ,
this is my solutions to the challenge , i didn't submit for a wail now so i find it very hard to get my skills back , this challenge took me alot of time and i did find it hard , so exuse my logic that i came up with , and also my code that look a bit messy if anyone can give me some tips to get back on track that will be very helpful , and also i did not know hwo to change the background when the menu expended . I realy need a feedback if that's ok . thanks guys making this place a very good community
The text of the "shorten it" button breaks into a new line.
One quick solution would be to set the property: 'white-space: nowrap'
After that, you would have to add a padding to the button to make it like the initial design.
A more elegant solution would be to refactor the parent of the button and the input field, and wrap the input field into another container. The management of input fields inside of a flex container can be painful.
I tried your solution using IPAD dimensions (810 x 1080) and the footer is cut at the bottom. Also, some texts are cut too.
Also, if I try the mobile popup using a screen width of 700px, the popup is not centered.
You can fix this last bug easily by setting these properties to the modal parent:
For the drop down transitions, you can use the trick of setting the container to 'min-height:0' and 'overflow:hidden'.
.secondary-menu-container {
display: none; /* This is not necessary, you can remove this.*/
max-height: 0;
overflow: hidden;
transition: max-height 0.4s;
}
If this sounds complicated, you can take a look at my solution: https://www.frontendmentor.io/solutions/intro-section-with-dropdown-navigation-N_cIRhRwsq
