Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions4Comments12

All comments

  • Anthony Becarne• 160

    @Abecarne

    Submitted

    What are you most proud of, and what would you do differently next time?

    This project made me use the display grid for the first time. And I think I have done a good job. I also am starting to be used to handle responsive easier than before and I tackled this much more faster than expected.

    What challenges did you encounter, and how did you overcome them?

    As it was my first time using grid, i struggle at first to configure the space each card would take. The result with higher resolutions really looks bad i think. Maybe i should handle this in the next projects.

    What specific areas of your project would you like help with?

    Feel free to give any feedback or advice :)

    Responsive Testimonial Grid Sections

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hey, @Abecarne!

    Your solution looks great!

    I see that you made frequent use of pixels as your "go to" sizing unit; one tip I'd give you is to try using 'rem', in regards to "global" sizing, meaning, for every "project-wide" UI element; the advantage of this is that all of your fonts get the same base unit; this has a few advantages, like your fonts and spacing having a more consistent look, and project-wide changes becoming way easier, as changing the rem would affect all global styling that relies on it, making the need for individual changes throughtout the project less likely to happen.

    Hope my tips are helpful!

    Marked as helpful

    0
  • kepper104• 90

    @kepper104

    Submitted

    What are you most proud of, and what would you do differently next time?

    I've set up a cool home/landing page that will contain links to all my future projects and put my first project, the QR Code, on it. Nothing I would do differently, it was a pretty small project.

    What challenges did you encounter, and how did you overcome them?

    Hosting the solution online, as creating a separate repo for each micro-page would be really cumbersome. I made a pretty aesthetically pleasing landing page (really proud of it) and a mono-repo SvelteKit + Tailwind app that will have all the projects in it.

    What specific areas of your project would you like help with?

    As I am using Tailwind, usually my colors are just classes in the HTML. However because of the provided style guide with color codes I had to create separate CSS classes like so:

    .text-paragraph-color {
    color: hsl(220, 15%, 55%);
}
.background-color {
    background-color: hsl(212, 45%, 89%);
}

    Fortunately, because of Svelte CSS classes encapsulation and syntax, i just put style tags beside main HTML and used the custom color classes alongside Tailwind ones.

    QR Code Card

    #tailwind-css#svelte

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hey, @kepper104!

    Your solutions looks great!

    One tip I'd give you is to use the tailwind.config file for every style related to your overall project; meaning, styling that tend to be shared throughout the project; one recurrent example of that are font patterns, as is usually described on the style guide.

    For example, when it comes to fonts, I import them on my main.css file like so:

    @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400&family=Bellefair:wght@200;400&display=swap');

    Check out the file for the example above

    then, on my tailwind.config, I usually do something like the following, as a key/value pair of the 'theme' object:

      fontFamily: {
      'Bellefair-Regular': ["Bellefair", "serif"],
      'Barlow-Condensed-Regular': ["Barlow Condensed", "sans-serif"],
    },

    Check out the file for the example above

    By gathering/organizing all of the default/shared styling in the tailwind.config file, you will better utilize the capabilities that TailwindCSS has to offer.

    Btw, I have also used Svelte on recent projects; great tool!

    Hope my tips are helpful!

    Marked as helpful

    1
  • Lukáš T.• 20

    @LukasT1

    Submitted

    What are you most proud of, and what would you do differently next time?

    I wouldn't say proud but setting up github and uing git was a little challenge.

    What challenges did you encounter, and how did you overcome them?

    I am not comfortable working with git yet, I have to learn this tool to use it effectively. I really need to work on my CSS. Now it is more trial and error.

    What specific areas of your project would you like help with?

    I fell my CSS code could be way more effective and what I accomplished in 50 lines of code could be done I way less. But i guess this is the journey of learning.

    Simple QR Code Element

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hey, @LukasT1!

    One nice trick to center your card would be to first remove all of the added margin to the <main /> tag; then, for the <body /> you could set its height to '100vh', apply a display 'grid', and place-items 'center'; you'd then have a centralized card!

    Hope its helpful!

    0
  • ana-lsm• 80

    @ana-lsm

    Submitted

    What are you most proud of, and what would you do differently next time?

    Being able to tackle this challenge in less than an hour.

    What challenges did you encounter, and how did you overcome them?

    Centering all the elements

    What specific areas of your project would you like help with?

    Adding accessibility to the web page.

    QR code component with HTML5 and CSS

    2

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @ana-lsm!

    One easy step to center your card would be to first define its margin to 0, then the 'height' of the body to '100vh'; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful

    1
  • Sidharth Sreekumar• 10

    @SidharthSreekumar

    Submitted

    What are you most proud of, and what would you do differently next time?

    This is the first time I'm using Tailwind CSS after the crash course I took.

    What challenges did you encounter, and how did you overcome them?

    I was having trouble importing the Outfit font from Google Fonts in my source CSS file. I added it as a link in the head tag as an alternative.

    What specific areas of your project would you like help with?

    Any suggestions on how I can improve my use of TailwindCSS in this project are welcome. I would also like to know I we can import a font using a remote URL in the main CSS file.

    QR Code Component using Tailwind CSS

    #tailwind-css

    2

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @SidharthSreekumar!

    One easy step to center your container would be to first define its margin to 0, then the 'height' of the body to '100vh'; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful

    0
  • hilmi77• 250

    @hilmi77

    Submitted

    What are you most proud of, and what would you do differently next time?

    What are you most proud of, and what would you do differently next time?

    --->I did this project without much difficulty.

    --->I'm open to any advice you can give me.

    -->Is my code clean?

    --->Do I have any shortcomings?

    --->I'm looking forward to your feedback

    solution-results-summary-component

    #accessibility

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @hilmi77!

    Your solution looks great!

    It would have an even nicer structure, in my opinion, if you use ID selectors, instead of classes, for styling elements that only appear once; a class is more fitting to style N number of elements simultaneously.

    Defining an ID also conveys for other programmers that a given element will probably be modified by a single block of CSS styling.

    Hope its helpful!

    1
  • thezarababy• 40

    @thezarababy

    Submitted

    What are you most proud of, and what would you do differently next time?

    i am glad i was able to use my understanding of css layout well. although i learnt new things along the way.

    What challenges did you encounter, and how did you overcome them?

    i encountered some bugs along the way which is normal. i handled it as calmly as posssible and i took it one problem at a time.

    What specific areas of your project would you like help with?

    i will like to know more about position property in css as well as transform property

    responsiveness using meadia queries

    #angular-material#backbone#chart-js#contentful#bem

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @thezarababy!

    One easy step to center your card would be to define the 'height' and 'width' of the body to '100vh' and '100vw', respectively; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful

    0
  • Savvas Chrysostomidis• 230

    @savchrisostomidhs

    Submitted

    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

    What specific areas of your project would you like help with?

    .

    Blog preview card with HTML and CSS

    2

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @savchrisostomidhs!

    One easy step to center your card would be to define the 'height' and 'width' of the body to '100vh' and '100vw', respectively; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    1
  • Melissa Martins• 90

    @MellTins

    Submitted

    What are you most proud of, and what would you do differently next time?

    -I am proud of trying to use the json file.

    What challenges did you encounter, and how did you overcome them?

    -although i have sucess using the json.file(it was my first time), i have some trouble trying to customize the css with the background colors.

    • i dont know how to mak the code stopr after you click the button.

    What specific areas of your project would you like help with?

    • Any tips or explanatios on any aspect of the code will be apreciated.

    Results Summary using Json

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, @MellTins!

    One easy step to center your card would be to define the 'height' and 'width' of the body to '100vh' and '100vw', respectively; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful

    1
  • MANISH• 20

    @Manishbhai9350

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of that i used 2 html files for this , One index and one succes html files features -

    1 . When you are writing the email it will not check it when you stop writing email for 600ms it will authenticate the email , I used regex for email authentication , if the email is wrong it will give an error that is showes in the design if the email is write it will store it in the localStorage . then you will be redirected to the succes html file there you will see your email

    2 . If you will try to directly go to the succes html file without entering the email You will be redirected to the index.html file

     Thats it now you should check more features by check out the project

    What challenges did you encounter, and how did you overcome them?

    1 . Email Authentication 2 . Page redirection 3 . Error when email is wrong 4 . Can not directly go to succes page without entering the Email

    More you can check the project

    i have used 2 html files , One for signup page and on for the msg page

    2

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi @Manishbhai9350!

    Regarding the success message, you may find it interesting to use the replaceWith JS method to replace the initial card with the success card, instead of executing a page redirect.

    Here's the link to my solution's JS file; check out the bottom event listener, where I implemented the replace method.

    Hope its helpful!

    0
  • Teteu2005• 30

    @Teteu2005

    Submitted

    What are you most proud of, and what would you do differently next time?

    De ter concluído o desafio, e busco melhorar sempre habilidades técnicas.

    What challenges did you encounter, and how did you overcome them?

    Desafio de código. Busquei olhar melhor e revisar a base estrutural.

    What specific areas of your project would you like help with?

    Por enquanto sugestões de layout, pelo fato do projeto ser básico e não necessitar de programação.

    HTML, css, Bootstrap, git e github

    #bootstrap

    2

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi!

    One easy step to center your card would be to define the 'height' and 'width' of the body to '100vh' and '100vw', respectively; after that, by defining 'display: grid' and 'place-items: center' to the body, your card would be centered!

    Hope its helpful!

    Marked as helpful

    0
  • Darek• 140

    @DarekRepos

    Submitted

    What are you most proud of, and what would you do differently next time?

    It was a big challenge for me to glue everything together. I improved my use of grids and flexbox, but I'd like to work on more projects to become more confident with these layout methods. I learned how to set up an Eleventy project from scratch. Next time I set up a project differently, there are still some improvements to be made. I was very adventurous and excited to create a solution that saves and loads data from a JSON file. I also tried creating a basic component for the FAQ.

    What challenges did you encounter, and how did you overcome them?

    I learned about accessibility best practices for decorative elements. I also learned more about Sass variables and how to use basic components with JavaScript and Nunjucks. I encountered trouble with links and CSS url() for background images. I also had issues with permalinks when deploying my site, but documentation proved to be a valuable resource. I successfully learned how to import variables in the newest version of Sass. While I initially had problems with links and URLs on the production environment compared to the development server, I was able to troubleshoot and fix the issues. I've learned to think about solutions and check documentation first before getting overwhelmed. It's important to keep things simple and avoid overengineering solutions.

    What specific areas of your project would you like help with?

    I'm still confused about when to use rem and em. Have you found any resources with good explanations? I'm not entirely sure if my solution fully meets accessibility standards. Is it a good solution? If you find any mistakes or have suggestions for improvement, please let me know. I will be very grateful.

    faq accordion with eleventy

    #accessibility#sass/scss#eleventy

    1

    Joramir Jr.• 250

    @JoramirJr

    Posted

    Hi, Darek!

    Your solution looks great!

    Regarding em vs rem, from what I can tell, "rem" is very useful when it comes to keeping a consistent set of spacing on all elements; for example, when using such unit to define padding, all of the spacing will have one base unit, the font-size defined at the root/html element level.

    "em" is useful if we need localized behavior; for example, if we define a "font-size" using em to an element, let's say a button, its padding, or even margin, when set using the em unit, will be adjusted to the font-size mentioned above; the base font-size is no longer the root, in this base, but the "em" font-size defined in the element itself.

    Hope its helpful!

    Marked as helpful

    0