Skip to content
OverviewSolutions
4
Comments
12

Joramir Jr.

@JoramirJrCuritiba, Paraná; Brazil250 points

Software Developer

Latest solutions

  • Responsive landing page using Svelte, TailwindCSS and JSDoc

    #svelte#tailwind-css#accessibility
    Joramir Jr.•250
    Submitted about 1 year ago

    I'd love tips on how to structure a smooth slider/carousel, using pure CSS; I struggled on this front. I'd also enjoy comments on the CSS units I ended up using; I may have chosen not the ideal units for different jobs.

    0 comments

  • Space Tourism Website using Svelte and TailwindCSS

    #svelte#tailwind-css
    Joramir Jr.•250
    Submitted over 1 year ago

    For people with experience using Svelte, I'd love for you to take a look at how I have used the framework; nothing fancy for now.

    I'd also enjoy feedback on my TailwindCSS usage; guess I could've gathered more cross-page styling in the tailwind.config file, in order for greater reuse.

    My use of pixels throughout the project; I'm still to really understand the use cases for other size units, so comments on that would also be helpful.

    0 comments

  • Responsive newsletter sign-up page, using HTML5, CSS3 and JS.

    Joramir Jr.•250
    Submitted over 1 year ago

    I used pixels as the main unit of measurement, for most of the sizing I did; not sure if using em, or rem, for example, are generally better approaches.

    I could've used more fitting methods, maybe, when validating the user input.

    0 comments

  • 1st challenge solution (QR code component), using CSS Grid and Flexbox

    Joramir Jr.•250
    Submitted over 1 year ago

    I used a tag for the bottom text, but I'm not sure if that was a good decision. Also, In order to align the QR code image, I used a wrapping for the job, but probably I could've centered the , in the top section, without using an extra .

    1 comment

Latest comments

  • Anthony Becarne•160
    @Abecarne
    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

    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
  • kepper104•90
    @kepper104
    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

    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
  • P
    Lukáš T.•190
    @LukasT1
    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

    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!

  • ana-lsm•80
    @ana-lsm
    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

    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
  • Sidharth Sreekumar•10
    @SidharthSreekumar
    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

    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
  • hilmi77•250
    @hilmi77
    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

    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!

View more comments