@EhmkayelSubmitted about 1 year ago
Responsive news homepage using css flex, grid and javascript
#accessibility#contentful#foundation#web-components#fresh
Thomas
@FixitoAll comments
- @AymaneOnlineSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
The whole challenge was a nice exercise to practice accessibility and JavaScript Validation.
I've used AI a lot during the creating of the mark-up (for improving accessibility) and for the JavaScript Validation, so next time it would be better if done the work without using AI.
What challenges did you encounter, and how did you overcome them?I've encountered many challenges.
For indicating that a field is required I used an approach from accessibility-developer-guide.com that was recommended in the learning path of Frontend Mentor which use an `` file instead of a simple "*" string.
What specific areas of your project would you like help with?I would like help on how to style that query box with
background-color: $green-200whenever the radio input is checked.I would appreciate any other help! 👍
P@FixitoPosted 5 months agoGood job! You could add a red border to invalid inputs and make the toast disappear after a few seconds.
Marked as helpful0 - @ClaudiaRamirezDSubmitted 5 months agoWhat specific areas of your project would you like help with?
I'm completely new to web accessibility. I tried to do my best, but if you see any way to improve it, please let me know!
- @Jenny-EikensSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of how I improved my understanding of React as I built this project, as it was my first React app. Next time, I think I would use React-Bootstrap rather than plain CSS and use Sass for my CSS as I found myself applying a lot of the same properties to different elements.
What challenges did you encounter, and how did you overcome them?As for the actual coding part, I struggled most with the proper use of state variables to make my components work together. I went back to the React documentation and read through the chapters on conditional rendering and the use of state variables, and I did some of their practice exercises to improve my understanding. It also took me a while to figure out the responsive design. I initially tried using width, min-width, height, and min-height to ensure proper proportions but the layout always ended up getting messed up on smaller screens. Applying an apsect-ratio eventually fixed that problem. Overall though, the deployment process was most difficult for me. I spent several afternoons/evenings fixing issues. The problem was that because I built the project with React, I encountered some React-specific issues during the process of building the app and pushing to Git. As I had no prior knowledge of Git, this was quite a challenge. I found myself looking up one error message after another that popped up in my terminal. In the end I managed to get it up and running though.
What specific areas of your project would you like help with?I think functionality-wise, my app should work just fine. Currently, the only slight issue I'm aware of is that when I open the live site on my cell phone and rotate the screen (so that it's wider than it is high), the top of the rating card gets cut off slightly. So I'm thinking I might need to add a media query to add a margin-top for this scenario. Also, I know I didn't get the colors right. The thing is, the style guide file only lists three colors other than white and orange, which doesn't work out because from the design pictures provided, it looks like there need to be at least four shades of black/blue/dark gray. This is also what color extraction tools that I put the pictures into told me. I would like to know how others approached this (did you stick to the colors provided by the style guide or did you extract the colors from the pictures and use those)?
- P@NikitaVologdinSubmitted 5 months ago
- P@DaysiredSubmitted over 1 year ago
- @ansarstellarSubmitted 6 months ago
- @aymenthedeveloperSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Hello my Frontend Mentor friends! I'm aymen and this is my solution for this challenge :)
The solution is built with:
HTML CSS JavaScript (to change the data)
- @codewithimranSubmitted over 1 year ago
- @asliddinamirSubmitted over 1 year ago
- @KhoiNgDSubmitted about 3 years ago
- @JD095githubSubmitted over 1 year ago
- P@JacobKnittleSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Getting the cards to layout correctly on the desktop version using grid. and centering content using grid
What challenges did you encounter, and how did you overcome them?centering content using grid and getting the cards to get to the layout.
What specific areas of your project would you like help with?I would like to know if using a div solely for centering content is the best method and any general advice about grid that you can see that I can improve on.
- P@bojanognjenSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
For the first time I used Responsive design technique and I learned how to adapt my design to various types of screens.
What challenges did you encounter, and how did you overcome them?I stumbled upon different bugs. It was interesting when something canceled my css definitions and produced something other. I wondered where is this from. Finnaly I figured out I have a Darkreader extension on my browser and it was constantly changing my colors.
What specific areas of your project would you like help with?Feel free to leave comments and feedback. It would be helpful.
- @elmirmed11Submitted about 1 year ago
- @ARUNKUMAR2906Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I did this challenge with in a 45mins using responsive design
What challenges did you encounter, and how did you overcome them?I didn't encounter any challenges.
What specific areas of your project would you like help with?nothing
- @R-cloutSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
i had to spend a lot of time finding a solution to not using media queries, is there a way to responsive website without using media queries...please i stand to be corrected to give becoming a better designer
P@FixitoPosted about 1 year agoGood job, @R-clout.
A few things to take note of:
-
Font Importation: Import your custom fonts stored locally using
@font-face. Define each font style and weight by pointing to the font files in your project directory, ensuring web compatibility and performance. This is crucial for using "Figtree" across your web project. -
CSS Variables: You're using CSS variables for colors effectively. Consider using variables for frequently used values like font sizes, margins, and border radii for better consistency and maintainability.
-
Media Query Consolidation: Group similar media queries to reduce redundancy and improve readability.
-
Typo Correction: Correct the typo in
@media (min-wdith: 425px)to@media (min-width: 425px). -
Unit Consistency: Aim for consistency in units (e.g., rem, %) for margins, font sizes, etc., to enhance readability and scalability.
-
Hover Effects Redundancy: If
h1:hovereffects are unchanged across breakpoints, no need to repeat them in each media query. -
Box Shadow Performance: Specify all box-shadow values, including color, to ensure performance and desired appearance.
-
Accessibility: Ensure color contrasts meet WCAG guidelines for accessibility.
This concise approach keeps the main suggestions while focusing on critical improvements for your CSS.
Marked as helpful0 -
- @DavidGonzalezveSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
Aprender a utilizar esta herramienta de frontend mentor
What challenges did you encounter, and how did you overcome them?no sabia por donde empezar cuando descargue el conjunto de archivos para el primer ejercicio, lo fui desarrollando siguiendo los pasos descritos y encontrandole mi propio metodo de solucion.
What specific areas of your project would you like help with?en las buenas practicas de css y utilizacion de variables
P@FixitoPosted about 1 year agoGood job. You should use the Figma design to get close to pixel-perfect.
Marked as helpful0
