That was a good challenge to test my skills as a beginner. The tricky thing was the background element because of RWD. I'm not sure of the chat part code. If you have another solution better than this, please let me know.
The background is quite simple if you’re just using two separate shapes. One to be positioned left top en the other one right bottom. Off course you have to play a bit with some negative margin or transforms. But by using to elements it makes it quite easy.
HTML wise I think this is a really good project to use the BEM writing method for classes. This will make everything easy to write and easier to write your css.
Keep up the good work and good luck with your next challenges!
Hello friends,
Just finished my challenge using tailwind for the first time. I would love to have some feedback on how to optimise my code. I'm pretty sure I can only use tailwind, but it was tough for me so I had to use some classic CSS.
Also I was unable to do the responsiveness into the mobile version...If anyone has some leads...Preferably using tailwind.
Thanks a lot!
Good start at using tailwind. With tailwind it’s just a bit getting used to. You would be surprised how easy and logic all classes are. What can help is using a tailwind afdoen for visual studio code. But only if you’re using that as you’re code editor.
I did this challenge with tailwind only so you can always take a peak 😉.
Keep it up and looking forward to your next project.
I found getting the height of the image in desktop view the most challenging.
I tried using '100vh', something I had never used before and couldn't figure out how other solutions used it correctly.
Everytime I set the height to the parent element instead of to the actual background element, it would enlongate the entire container and I would have a really long image and short text.
And when I tried to set min-height: 100vh I couldn't see the image at all.
So I just used image tags, gave each image its own seperate class, and set one to display: none and another to display: inline.
Even though it worked I still had to finesse the height and set it to 40% instead of 100% so the container wouldn't be too long.
The question is why can't the image be the same height as the text beside it, without adding a fixed height or guessing a percentage?
I used flex to center the container on the main and cross axis, but in desktop and other mobile screen sizes I have all of this extra space at the bottom.
Is there a way to get the card in the middle of the screen or will there always be extra space at the bottom?
Overall, this was a fun project and a great intro into coding. Can't wait to do more.
Hey Lisa,
Good try. Indeed you could set Html, body {height:100%} or body {height: 100vh:}. Furthermore, I would read a bit about the picture element. Here.
Another thing I would do is make the 'perfume' text uppercase and add some letter spacing to it. Next to that, I would check my overall widths a bit better.
But this is a good start to learning and working on your front-end skills, so keep it up.
Looks really awesome again! I like to look at your code I don't really work with angular. Maybe you can only extend your here intro a bit so it really looks pixel perfect ;)
Furthermore, what do you think about the HTML issues? I got them when I use something like alphine.js Are these really issues or should we ignore these in real projects?
Last thing. I noticed a z-index issue on your location map. Probably you need to increase the z-index on your navigation to keep it from sliding under your map.
Curious about your opinions and thanks for keeping me inspired!
Having a difficulty making the side bar full screen
What do you mean by Having a difficulty making the sidebar full screen? I don't think that's necessary. I should start by aligning your headline. This will free up some space on the right side.
If you are referring to the mobile nav. This can be made full screen by positioning it to fixed instead of absolute.
Hope this can help you a bit. Good luck with this and future challenges.
That's not the first time "I build a bazooka to kill a mosquito", but this solution needs an explanation: usually, I use frameworks to build simple projects because the development process is faster. I mean is much faster to implement a landing page with, e.g., vite + react + tailwind than with html + vanilla css.
However, in this solution, I used Nodejs + Express + Ejs template engine, and the process development was quite slow (the main reasons were netlify dev does not have live reloading and I lost time searching for a good extension for ejs files in vscode).
And as if that weren't enough I had a hard time trying to figure out how to deploy the landing page to Netlify (Express running serverless functions is something pretty well documented, but not with template engines).
But the reason I chose to use Nodejs for this project is precisely because I am studying the deployment process of nodejs applications in Netlify and in serverless functions, in general, and I would like to test with a project as simple as possible.
But despite that, feel free to leave any feedback. I will surely appreciate it.
Hee @vanderms,
Looks good. I'm a strong believer in tailwind and was peaking in your solution to make the skill boxes pixel-perfect. In my opinion, the design was just a bit off ;). But what do you think? Would you do this
<ul class="grid grid-cols-2 gap-6 grid-rows-[22.75rem_11.375rem_9.875rem_11.375rem_11.375rem]
md:grid-cols-4 md:grid-rows-[11.375rem_9.875rem_11.375rem]
xl:grid-cols-6 xl:grid-rows-[11.375rem_9.875rem]
[&>li]:rounded-lg [&_span]:headline-sm [&>li]:text-neutral
[&>li]:p-6 [&>li]:grid [&>li]:grid-cols-1 [&>li]:content-between [&_img]:justify-self-end
">
in a real-world project? Or would you just make them a logical size? I made them a logical size, but of course only if the designs are only off by a few pixels.
P.s. Love the way you make use of the new tailwind options for child items!
Hello guys, I would like to know some specific points and I hope you can help me.
Did I correctly implement the BEM methodology? Is there any way to improve or optimize my code? Thank you for your time and best wishes to you.
Look pretty good indeed. Some things i would change, besides the points of @DavidMorgade
First off all when i see your code on github. All html is above the opening body ;). Next to that i would try to turn the images in your card__header into a picture element with srcset and give then. both the same class.
I would probably also get rid of the card__body div in HTML and in CSS. There is no need to add flexbox to get the content inside this div stacked. This is standard behaviour.
But some thing are also just a personal preference ;) So keep up the good work and enjoy your projects!
This is my first attempt. I made sure to add rounded corners in correct spots when resizing. The mobile mode does look a bit warped, BUT it does respond to smaller screen sizes. I ended up using 'srcset', which was pretty cool.
The font sizes might be a little off. Let me know if there is anything odd about the CSS, I tried to condense it. Also, just let me know in general what can improve, I am still pretty new at this.
I think it looks quite good if you’re new to this. If I where you I would start by using some css variables for some of the basics like the fonts and colors.
Also take a look at mobile styles. Maybe you can remove the grid styles and set it to block. Now you’re using grid to set a default behaviour.
Keep up the good work 👍
