I'm proud to have finished this project and made it look like this just from a photo
What challenges did you encounter, and how did you overcome them?Make the image and words in one line I use flexbox to overcome the problem
What specific areas of your project would you like help with?Anything that needs repair
Hi salahdine,
Awesome work on this design. Looks exactly like the design. The next step will probably be making this responsive on mobile.
The theme switcher when browser is refreshed should remain the same until it is clicked
Hi Alli,
Great work in completing this project. If you want to keep the dark mode set when user refreshes the browser, is to store this dark mode variable in the local storage. When a page is refreshed, the page is rerun and all states are refreshed to the original declaration, so the browser won't know the page state before. Every time the dark mode button is clicked, you can push the state to local storage and also grab it from there when the page loads.
Hope this helps!
I am proud that i design this layout within small interval of time
What challenges did you encounter, and how did you overcome them?responsiveness has always been my issue, but now using flex and grid my life has become way more simple.
What specific areas of your project would you like help with?I wanted to maintain my code with more reuseablility.
Hi Bigyan, Great work in completing this project. Regarding your question about code re-usability, using plain HTML and CSS isn't the best way to do that, unfortunately. A javascript framework will allow for much easier component-based design so something like React or VueJS. However, this might be a bit further in your studies before you get to this point. There is something called Web components recently introduced for plain HTML, might be worthwhile checking it out.
I noticed that you tried making reusable CSS classes in your reuse.css. This is a great idea and luckily there is a CSS framework that does exactly this called Tailwind.css. It is a utility-based framework that turns styling into a simple class that you can use inside the class attribute like you did in this project. Once you get normal CSS down, you should definitely look into this as well.
Hope this helps!
Getting familiar and able to apply flexbox in a project. Projects that I have worked on uses the old ways of structuring a div. In my upcoming projects will incorporate flexbox instead as it is easy to use.
What challenges did you encounter, and how did you overcome them?Applying the correct margins and sizes. Also had slight roadblocks in centering items in the body. It would be easier if I were to have a figma access for this project. But was able to solve my problems using the dev tools in chrome.
What specific areas of your project would you like help with?I would like to have suggestions on how do I enhance my html and css structure in the project. I have been a backend developer mostly in my career and I want to refresh my knowledge with my frontend development.
Hi Mariele, First of all, great work on your project!
To give feedback for your question, I would personally not use the header tag in this situation because, in the context of a real-life website, this is a reusable card that is not used to define the headings or navigation of a page. However, in this context, it is OKAY as your card is the only element on the page.
Also in a header, you will need to have child elements such as heading tags within it so I will add a h1 tag to the name. And I would put any user-defining elements inside it like the image, name and job title.
<header class="title">
<img src="/assets/images/avatar-jessica.jpeg" class="profile-pic">
<h1>
Jessica Randall
</h1>
<span class="description">
London, United Kingdom
</span>
</header>
I hope my feedback will be useful. Again awesome work!
Hi! This is my 11th Frontend Mentor challenge, and It's really hard for me but It's fun.
I have several question: Does It look good on desktop view. Does It look good on mobile or tablet view.
thank you in advance. Suggestion and Feedback I really appreciate it.
Hi Benjo,
Impressive work!
I think you can get rid of the max-width: 90rem; in the footer as the div did not go all the way to the edge of the page when I viewed your website on a screen bigger than 1440px.
Other than that good job!
Im not sure how to set up my browser width correctly to 1440px, can someone help?
Hi Evelyn,
To answer your question, I'm assuming that you want your browser to LOOK like it has those dimensions to fit the desktop design given, as your default full screen window will depend on the size of your monitor you have.
Personally, when I'm designing the projects I like to have Google devtools open. You can get this by right-clicking on the website and select "inspect". This should bring up a console. Then, click on the mobile phone-looking icon at the top left of the console and it should bring up a bar on top of the webpage. You should see the dimensions of your current browser. Finally, you can set the dimensions to 1440px which is also Laptop Size L. This will simulate the browser to those measurements.
Hope this helps!
