This is my second day on freeCodeCamp. I have created an imaginary company, named Lunar Express and create a product landing page for its next mission.
Like my Previous Project a.k.a Survey Form I have used Neumorphism to create a different look.
Here is my Neumorphic Product Landing Page
. Your feedback is highly appreciated.
P.S: I’m facing issues making the front landing page responsive. Can anyone please help me out?
Thanks in Advance.
Your page looks good @yoursamlan. Some things to revisit;
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for CSS is good. Use it and address the issue(s).
- (The one for HTML misses things which is why I recommend W3C)
- Make your page responsive. Remember, the R in RWD stands for Responsive
- There’s a horizontal scrollbar on large and small screens.
- To help you visualize how you have your elements set up you can temporarily add the following line to your universal selector
border: solid 1px red;
- The best method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.
Your site’s really good. Linking to the survey form was a great idea (was that the 'survey form, aka project 2?) I wish I have money now to book a trip.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.