Profile Card, CSS Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, upon checking your link, the images on it didn't load properly I guess.

  So my suggestion, I think it will be better if you make a github repository something like that. So that it will be easier for you to deploy your works and load proper things on it. It is easier than using online text editor. You just need like vscode or any editor, then make a github account.

  It is very useful and it is absolute free, deploy your website and share the live site of your work. If you need help on that, just drop your query in here and i'll guide you to it. Okay?^^

  1

  ---

  

  nicolasdsa•125

  @nicolasdsaPosted over 3 years ago

  Oh, I would really appreciate the help, I'm a little lost about it. I tried another online editor but it didn't work either. I just started programming a short time ago.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @nicolasdsa Oh sure, well I personally used vscode in doing FEM challenges so I can help with vscode. But first you need to download it right vs code. Just choose your os and install it after you finish downloading.

  While you are donwload, go to github.com to create your github account. It is great to understand .git now, bet let's just focus on creating the acccount.

  So after you installed vs code, well open it of course. After you opened it, if you look on the left side, there are 5 icons right. Click the 5th icon and it will open a small tab next to it.

  There is a search extension which you can search different plugins. I personally use.

  1. Beautify
  2. HTML CSS Support
  3. IntelliSense for CSS class names
  4. Live sass compiler
  5. Live server

  Search for those and install them inside the vscode. After you installed them, close the vscode then open it again. the 4th one is for using sass, which is really helpful, it is like using css, as in.

  I can't show how things work up, but I can provide a link for you to watch, it is from Jesica, you know, coder coder in youtube. [This is the link for live sass] (https://www.youtube.com/watch?v=aydFCQiUW44). This helped me a lot before when I was starting. She is really good

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @pikamart If you need more help, especially in deplying in github, you can dm me in my twitter using my profile in here, or drop your query in here oay^

  0

  

  nicolasdsa•125

  @nicolasdsaPosted over 3 years ago

  @pikamart Hey, thank you very much for the tips, I found a temporary solution to fix it but I intend to search about everything you said, the channel is very interesting, I watched some videos. It was definitely not the same as the original design but I am pleased to be the first. If you can look and tell me what you think of the design and the code, I'll be grateful. Ah, sorry if my English is bad, it is not my native language.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @nicolasdsa Hey, glad to see that you deployed in a live site, now that will make things easier especially when you are submitting solutions.

  That is also fine for not pixel perfect right, I too had those problems but making the code, structure clear is what's important.

  For the layout, it is really good and it resizes well when going in mobile state.

  For the css, your code seems minimal which is great. But I saw some repetitions declaration like the text-align you used it 4 times. Instead of doing that, you can just declare it in the .card selector. Since text-align are like inheritable, those elements inside it, will be text-aligned.

  Overall, you did a good job on the revision. Now, it will be great if you pick up habits of creating selectors. I suggest BEM principles and if you want, you can do scss. Reading about them will be really great and it will help you, as a developer to create more reusable and extensible selectors.

  We want to focus on creating those extensible parts so that our code will be minified. So when we are creating things, make sure first to identify different sections of the layout that have the same structure. That way, we can create selectors that we can apply to multiple elements.

  Just keep doing these challenges, be consistent and code a little more^^

  0