Latest solutions
Social Links Profile
Submitted 4 months agoI would like help with learning more tools to measure sizes like margin or padding.
Blog Preview Card (Resizing Fonts without using Media Queries)
Submitted 4 months agoI would like help if I made the right call using calc()? What is/are the alternative without usng media queries? or is/are there any?
QR Code Component using CSS Custom Properties
Submitted 4 months agoWhat would be a better approach for centering the
card-body
?Contact Form with Form Validation and Toast Notification
Submitted 9 months agoMaking the code follow the DRY principle. Applicable for HTML, CSS, and Javascript code.
Latest comments
- @SPresidente
- @Ajibolade123@akri-dev
try using calc() to scale/resize fonts and width & height. It'll be smoother
calc(20px + (4 * ((100vw - 375px) / (1440 - 375))))
my min-width is 375px
my max-width is 1440px
for min-width, my target font would be 20px
for max-width, my target font would be 24px
Marked as helpful - P@ChrisFloresMWhat are you most proud of, and what would you do differently next time?
I was able to practice some HTML and CSS basics
What challenges did you encounter, and how did you overcome them?Defining a correct html structure for each component, taken into account the layout strategies to use to achive the design as close as possible.
What specific areas of your project would you like help with?Code organization and html structure, in case something can be improved.
@akri-devFor better html structure and code organization, learn Bootstrap
- @jbedvilleWhat are you most proud of, and what would you do differently next time?
I was pretty happy with how quickly I finished the HTML and CSS basics.
I would've studied the Figma file earlier on if I could do it again.
What challenges did you encounter, and how did you overcome them?Getting the sizing of the containers correct and entering/spacing the image. I looked deeper into the Figma file
What specific areas of your project would you like help with?What code to use at different times to centre images, text etc. I am not always sure when or how to use flex box as well.
@akri-devMake sure to rename your README-template.md to README.md in Github
You can remove all of this from your
index.html
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>