@0drad3kkSubmitted over 1 year ago
this is not responsive and my code isn't clean nor dry any advice would help thanks :)
P
Mikhail Lorenzo Aniel
@lorenzoanielAll comments
- @lorenzoanielPosted over 1 year ago
Hey meursualt88 its okay as long as you are learning, a few pointers:
for DRY code, and I am basing this off of your tech stack of html and css:
- take a look at importing in css, this way you can have one 'main' css file and have several other smaller css files that you import into the main file (you can then just have this main file in your header element), this could also help if you have commonly used styling like center-ing an element.
- you can also have a seperate css file for css variables
For responsive css you already have a basic grasp of grid and flexbox, a good way to go about developing designs is to start with the mobile version first, this will be your base css style then work your way up the bigger resolutions, as you go up in resolution you will be using media-queries (I urge you to look into container-queries) and you can add the styling for that specific resolution (keep in mind this will be easier to do if you have seperate css files for each component/section), this way it is easy to keep track of different break point styling.
Good luck with your front-end journey
0 - @ahmetwithatSubmitted over 1 year ago
A couple of questions:
- The way I tried to make the
font-sizeof the display cards seemed really off. Are there any better ways to do that? - Was my solution accessible enough?
- Are there any "best practices" you would suggest?
- Is my js code clean and readable?
- Is it optimal to handle events with a for loop?
@lorenzoanielPosted over 1 year agoGj on the styling Ahmet,
-
Great effort on the validation, noticed there is an issue with date validations where i can put 99 99 999 and it would still accept the credit card. If you need help with this refer to my solution for age calculator check under: age_calculator_app/src/lib/isValidDate.ts result returns booleans(true/false) for day/mm/year in object form
-
easier way to do form validations would be to include a validation library here are some: Yup/Zod, these libraries work by having the required attributes (card number, email password etc.) and describing how they should be validated in a json object or commonly referred to in this case as a 'schema'.
Good luck on your development journey
1 - The way I tried to make the
- @p4bloxxSubmitted over 1 year ago
In this challenge I found myself a bit difficult to manage the Javascript side of the code, especially in managing the form data well in order to get to display the correct result, both of the BMI index and of the recommended weight range.
I had to figure out how to best style the two input types, both the radio button and the numeric input, but overall and with no small amount of difficulty I got as close as possible with the provided design.
Do you have any advice/suggestions/constructive criticism to make regarding the design or even better, the code? I'm here and we can talk about it, I'd be very happy.
cheers
@lorenzoanielPosted over 1 year agoGood job Pablo,
-
A little issue with the BMI Limitations section where it is not getting the desired pyramid/ brick effect in full desktop screen, noticed that there is a translate effect and depending on which resolution you developed at (currently looking at the site in 1920 x 1080) the static value of transform: translateX(-11.4rem); will not dynamically adjust which is why I am seeing it differently (also tried it on my main 2k resolution monitor and although it is better the layout is not as expected). Possible fix is to increase number of columns as it will be easier to create a tiled effect without having the need to translate anything.
-
regarding your issues with JS eventually you will come upon front end frameworks like react/vue/angular/svelte which are essential for modern front end development and will manipulate DOM (html elements) easier, but you can practice JS logic and syntax using leetcode or hackerrank as JS will still very much be an integral part of your front end journey. If you are interested in testing your hand at these frameworks easiest ones to jump into would be react or svelte; react is industry standard and has a bigger community but svelte has a very good tutorial built into their website (online terminal) and has alot of the features needed for near full stack web development built into it (sveltekit).
Good luck on your journey
Marked as helpful2 -
- @kurtbusetSubmitted over 1 year ago
Can someone help me how to add border on top-left, top-right, bottom-left and bottom-right because I don't know how to add in right section icons. Feedbacks are welcome always :D
@lorenzoanielPosted over 1 year agoGreat job, regarding your question about adding borders: border: [border-width] [border-style] [border-color]; you can find more info using MDN docs or this handy css reference: https://cssreference.io/ (although MDN docs is better as it is the most up to date).
A few pointers:
- To get into the habit of modularity in your code try to separate your css into bite sized files for each section/part/component in your project ex: score section should have its own css file. You can then import every modular css file into a main css file and have that file into your html headers.
as you progress with your front end journey you will come upon front-end frameworks or libraries that will strongly abide by this 'modular' model of development, but for now focus on developing your code modularly.
Good luck on your journey.
Marked as helpful1 - @nitroadam1233Submitted over 1 year ago
It was difficult trying to add a global font to the page using material-UI with ThemeProvider on App.js. I was also trying to add some custom breakpoints to my theme but whenever I did that it would mess up the div containers. I would like to know the best practices for custom breakpoints and adding global fonts in material-UI. I also want to learn about the best way to use Grid component in material-UI.
@lorenzoanielPosted over 1 year agoHi Adam thanks for reaching out,
Looks like you have a bit more experience in terms of using component libraries and react to complete this project and so I will have to be a little more detailed with my analysis for your solution.
-
When making components in react try to make things as modular as possible, I noticed you decided to summarize the skills section all under 'skill', if we look at the design file notice how the skills are separated into noticeable components: icon, skill name, skill score as well as the corresponding color scheme for that particular skill. Instead of combining the individual skills with its parent grid container it is best to separate it as its own sub component, this way incase there are new design changes it will be easy to isolate or say client wants new functionality that is drastically different from original design you can simply remove that sub component and plug in a different one into your
{mainSkillItems.map((item, index) => (providing the same data but different look or possible different data coming from hypothetical API into new component, either way makes for easier development for you and other developers looking to add to your code. -
kudos for using theme provider. If you have not experimented on this, for your next project try multiple theme providers, one main one for general styles and maybe one for a subcomponent, for this solution an example would be if you turned skill items into its own subcomponent and passed a theme provider which applies the proper color scheme to a particular skill, advantages to this is that incase client wants to change color scheme of subcomponent ex: purple, pink, gradient cyan, gradient <insert color here> it will be as simple as adding or removing additional stying in your theme object, which leads me to another point please separate your theme object into its own style folder, more of a minor thing but a good habit. In fact separate similar components into their own folders instead of just under one umbrella folder ex: 'RightContainer','LeftContainer','ParentContainer' could all be under components/containers, this will also get you into the habit of refactoring your code and making button/header/logo/etc. components with their own folders instead of packing all components within containers. I had the same habit but now as annoying as it is I try to break down components as much as I can so that my app is truly modular.
-
Seems like you are well on your way so I will suggest you practice with one component ui library at a time (looks like materialUI in your case), and then try and learn other tech like css-in-js or css preprocessors like SASS/Stylus. The reason being is that while component UI libraries are great for fast deployment and prototyping, when you have to tackle more complex or custom styling/animations the opinionated nature of these libraries will be a drawback. Arm yourself with atleast one way to make highly complex/custom styling.
Good luck fellow student.
Marked as helpful1 -
- @Wali1209Submitted over 1 year ago
My question is that when I build my REACT project using "npm run build". the "dist" directory is created at the root folder, so when I go to that dir using "cd dist" then few things happen that I don't understand:
- when I start the "dev server" images of web page are not able to load.
- when I run the "Live server" of VSCode Screen is completely blank not showing anything.
I fixed the issues with images by importing them on top of the React component "import imgSrc 'path' " instead of giving the path to the src attribute of <img> directly.
@lorenzoanielPosted over 1 year agoGood job on the project:
-
The images not loading when you statically insert the source to your img element is because of the different out put folder called 'dist' as you pointed out. The reason why now your imgs show up if you use import is because vite will consolidate all imports and change the path according to the new output build folder, in this case 'dist' (this will be different depending on which tooling you use: create-react-app, nextjs, etc.). You can tweak this by adding configurations to your vite config, i personally just put all my static assets in the public folder using this structure: /public/assets/imgs, but to each their own.
-
Can't comment on the live server but vite already has a built in live preview, simply type 'npm run dev' (in my case i use yarn so 'yarn dev') and it will run the NON BUILT version of your project, if you would like to see the PRDOUCTION version(dist) it is 'npm run preview' after the build. Double check the 'scripts' section on your package.json. It is recommended to use these as vite already has HMR feature (Hot module replacement) which lets you update your app without a full refresh or restart of the development server, no need for third party, just copy paste or click the localhost url link provided by vite.
Goodluck on your journey fellow student.
Marked as helpful1 - @sdmatiasSubmitted over 1 year ago@lorenzoanielPosted over 1 year ago
Good job on the general layout and look.
a few things I noticed for improvement:
-
The component seems to break a little bit during transition from desktop to mobile. I noticed that the dimensions for
mainis not statically set which seems to be 'squeezing' all of the child elements within it and distorting some (imgis a big one) during the breakpoint transition. One recommended fix is giving themaina fixed width and height dimension so it does not rely on thebody-- percentages are convenient but using them everywhere for the quick fix idea of responsiveness might produce unwanted results when testing your component. -
This one is more of a weird almost edge case scenario but when I was testing the component and reducing browser sizes I noticed that it would start to overflow. Make sure to consider
overflow: scrollespecially for the y-axis (overflow-y: scroll), the figma designs are usually pretty good with mobile sizes (width starts at 375px which is normally the smallest mobile device with the exception of galaxy fold at 280px~), this will insure that even if users were to shrink browser window to a height smaller than your component that, if you set static dimensions for each break point and include the overflow, users can still scroll to see all of your component and there will be no overflow. Depending on which framework or no framework you will have to check developer console for proper implementation of these techniques.
Other Tips:
-
check figma design for breakpoints: usually dimensions are as follows (width): desktop(1440px), tablet(768px), and anything smaller is mobile. One good tip is to start with mobile size and work your way up. This way you can add new styles for the next breakpoint and it will not break your initial base styles for anything below the next breakpoint.
-
I noticed that you are still starting out and a good way to think about development is by making things modular including your code. Start with making a 'styles' folder and different folders for your components. For example you are styling a button, make a separate folder under 'styles' folder called 'button' and from there you can make separate css files for different variations for that button (cartbutton, loginbutton etc..) and simply import into your main css file, make sure to follow BEM naming conventions so you dont run into class naming conflicts. As you improve there will be other ways to organize and keep things modular depending on which route you want to go (react components, Sass/Less, TailwindCss, MaterialUI, etc.).
Good luck on your front end journey fellow student.
Marked as helpful1 -
