All comments

blackie11•100
@blackie11Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
I am proud to finally find some consistency, while I love developing and resolving bugs in my code I struggle with consistency. this project helps me with focus and commitment to finish it.
If there is anything different I would have done it maybe to add proper documentation to my code.
What challenges did you encounter, and how did you overcome them?
some of the problems I encountered were responsive, especially using a grid with a laptop-first design strategy.
What specific areas of your project would you like help with?
I would love this community to help me with javascript, so far that is where I see my struggles.
Tech-news_blog
1
Myk Escala•620
@MikoyzskiePosted 8 months ago
Hi @blackie11 you've done a great job here

I learned my JS fundamentals through freecodecamp, from basic to advance

Hope this helps!

Happy coding!
Marked as helpful
1
dcubic•330
@dcubicSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
Not really proud, but I learned how to use VSC
What challenges did you encounter, and how did you overcome them?
VSC git command line was a pain. Didn't realize I had to manually save files; I've been spoiled
What specific areas of your project would you like help with?
Don't know much about conventions
QR Code Component
1
Myk Escala•620
@MikoyzskiePosted 8 months ago
Hi @dcubic nice work here

If you want to understand more about best practices and all, this is a good read: BEM Methodology

Hope this helps!

Happy coding :D
0
jrgenweb•450
@jrgenwebSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I managed to do it without Googling. I would do more testing and try to write even better code.
What challenges did you encounter, and how did you overcome them?
It was difficult to limit the font sizes and the maximum size of the desktop. I started from the font size of the mobile view.
What specific areas of your project would you like help with?
It was difficult to limit the font sizes and the maximum size of the desktop.
CSS Grid, Flexbox
2
Myk Escala•620
@MikoyzskiePosted 8 months ago
Hey @jrgenweb nice work!

If you want to get proper size of elements/components from the given design images, try using figma or photoshop then use line tool to measure padding, margin and such

It works for me. Hope this helps!

Happy coding!
Marked as helpful
0
Rayza-18•60
@Rayza-18Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
construir e bem mudaria algumas coisas
What challenges did you encounter, and how did you overcome them?
colorir as lista
What specific areas of your project would you like help with?
.
html and css
1
Myk Escala•620
@MikoyzskiePosted 8 months ago
Nice Work here

Try to incorporate the right color blocking next time. It makes a better readability and it also makes sense that some elements are different from the others.

Hope this helps!

Happy Coding
0
Christian G•920
@cristianccggSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I made this one in just 40 minutes so I think I am learning and improving and that makes me proud.
What challenges did you encounter, and how did you overcome them?
There's always this issue that the images are not shown when deployed on GitHub pages and I have to change the extension file, the name, and the path to finally make it work.
Responsive Social Link Profile using html and CSS
1
Myk Escala•620
@MikoyzskiePosted 8 months ago
Nice work!

Importing images on github is a pain in the a** sometimes. Make sure to add "." before the asset links like "./images/image.jpg"

Hope this helps

Happy coding!
0
Gopihacks•30
@GopihacksSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I will try new web development tools and frameworks to complete the projects from frontend mentor.io.
What challenges did you encounter, and how did you overcome them?
I have some issues in css ans i have cleared it through myself with the help of google.
I have used the HTML5 and CSS3 to complete the project.
1
Myk Escala•620
@MikoyzskiePosted 8 months ago
Nice work

Currently not center though, make sure to add min-height of 100vh to the body element to adjust the height to window size
0
Khalifa Ltaief•80
@khalifa-ltaiefSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
i used flex for the first time
What challenges did you encounter, and how did you overcome them?
i didn't know how flex work exactly but i started to know it
What specific areas of your project would you like help with?
nothing
Mobile-first solution using CSS Flexbox
2
Myk Escala•620
@MikoyzskiePosted 8 months ago
Nice work!

Try using figma next time to analyze the design. It helps me try to process all the elements one by one

Maybe use libraries or frameworks to familiarize with modern techs out there

Hope this helps
1
phonkytoast•30
@phonkytoastSubmitted 9 months ago
What do I need to improve more? Can you give me tips about it?

How do I size the components with better accuracy?
Blog Card Preview Component with vanilla HTML and CSS
1
Myk Escala•620
@MikoyzskiePosted 9 months ago
Hey phonkytoast,

Saw your solution, code looks clean and organized. Well done!

You can try implement this very old school methodology but this relevant up to this date.

https://getbem.com/introduction/

Hope this helps

Happy Coding!
Marked as helpful
1
Charles•110
@chleighton1Submitted 9 months ago
Built this with Nextjs. May be a bit overkill for how simple the application is but I wanted to get some practice with Nextjs.

Not sure the best way to do responsive design. I used state to determine the width of the screen and conditionally render based off of that. I might try making use of the tailwind breakpoint pre-fixes but I am worried it will get messy and not very readable. Also interested in trying Mobile first as I usually do desktop first.
Newsletter Signup using Nextjs
2
Myk Escala•620
@MikoyzskiePosted 9 months ago
Hey chleighton1!

Clean code! Impressive.

If you're trying to implement mobile responsive site, there's no need of using states for that.

Tailwind actually has its own viewport width device width classnames for that

For example, if you want your component to be row on desktop and column on smaller screens, you can use "flex-col md:flex-row" since tailwind is a mobile first css framework

Also sm: / md: / lg: / xl: are min-width not max-width

Hope this helps

Happy Coding!
Marked as helpful
0
John•410
@MiyaoCatSubmitted 9 months ago
I had a lot of trouble with the spacing of the <li>'s. If someone wouldn't mind looking at how I styled them and provide feedback, that would be great! I styled the <ul> and <ol> differently. I use meyer-reset to start of with zero styling.

As usual, please let me know how I can make it more accessible as well. I don't know anything about aria standards so any input there is helpful.
Recipe Page with Table, media query
1
Myk Escala•620
@MikoyzskiePosted 9 months ago
Hi John!

if you are trying to make spaces between them, try using display: flex, flex-direction: column, then add gaps between them

for spaces between texts and bullets which is very tricky, try to use other css pseudo classes like ::after or in this this case ::marker so you will have a more freedom on styling them

hope this helps, man

Happy Coding!
Marked as helpful
0
Karan Sharma•350
@karan819381Submitted 9 months ago
i don't understad. HOw to make this mobile responsive using tailwind. its my first project using tailwind. Any suggestion to improve. plz comment. Thank you
Product Preview card components using Tailwind
1
Myk Escala•620
@MikoyzskiePosted 9 months ago
Hey Karan!

First of, clean code. Very organized.

In Tailwindcss, we use the classnames sm,md,lg, and xl for viewport widths or device widths

For example, if you want your flex-direction to be row on larger screens and column on smaller screens, you use "flex-col md:flex-row"

Since sm: / md: / lg: and so on is min-width not max-width

Hope this helps

https://tailwindcss.com/docs/responsive-design#working-mobile-first
Marked as helpful
1
tintin•10
@tintinsnSubmitted over 1 year ago
- responsive it difficult for me when i shrink scrollbar appear.
- in body element i use position absolute in order to qr code component to center because when it use body height 100vh and flexbox when shrink it have scrollbar
body { margin: 0; padding: 0; box-sizing: border-box;
```
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    border: 1px solid red;

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qrcode-container {
    background-color: #fff;
    width: 300px;
    padding: 16px 16px 32px;
    border-radius: 11px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.09);
  }
```
Qr code component solution
1
Myk Escala•620
@MikoyzskiePosted over 1 year ago
Looks good on mobile. Try using Chrome DevTools Mobile view by pressing Ctrl + Shift + M.

Also, no need for position absolute. If you want to center elements inside the body just set the body to min-height: 100vh then display flex, align-items: center, justify-content: center

hope this helps!

happy coding!
0

Myk Escala

All comments

Tech-news_blog

QR Code Component

CSS Grid, Flexbox

html and css

Responsive Social Link Profile using html and CSS

I have used the HTML5 and CSS3 to complete the project.

Mobile-first solution using CSS Flexbox

Blog Card Preview Component with vanilla HTML and CSS

Newsletter Signup using Nextjs

Recipe Page with Table, media query

Product Preview card components using Tailwind

Qr code component solution