Spense Landing Page

Snipper Landing Page

{"ops":[{"insert":"Perfect to practice creating graphs, CSS grid, and much more.\n"}]}

Ideate Dashboard 

Workside Job Board

Love the work you've done and the fact that it's responsive. My only 2 comments is that the image technically isn't 'stuck' at the bottom and that the items in the footer change to a hamburger menu on mobile. Other than that, great job!


I can't believe how quickly you're finishing these challenges. They're all so well done! The slider is a nice touch, too.

Thanks for sharing your solution. I learned a lot from it.
There is one issue I found but could not overcome it. The section where there is "Secure your money with Escrow." heading, the hyperlink is not working in there.

These are just mockups (some with multiple pages, some not) so most of them have hrefs linking to nothing, that's why :) 

Well I am aware it is just mockups but even cursor is not changing when you hover the mouse on link.

Looking good, my only comment is to reduce the font-sizes for the headings. Can't really comment too much on the code since i'm not that good at coding myself so i'll leave that to someone else!

<b>I actually haven't noticed the hamburger menu on mobile - thanks for pointing it out!</b>

Hey Loctong! 

Looks like you've got this pretty good on 1920x1080 but it looks like it breaks at smaller breakpoints (<1080, you can check how it looks on other devices by using the developer tools on any browser), so that may worth looking at using Media Queries. 

Good start though!

Hi, moeminm!
 Thanks for your comments.
 I am on the way to update 
Thanks


btw, It is working well with Ipad (768) :D

Just checked, looks like the image is taking the width and height of the container and is a higher z-index than the container so you can't really click it. 

Fixed it by adding this to the (max-w-2xl xl:py-8) div

z-index: 99;
position: relative;

Hmm, weird, iPad looks broken on my screen (maybe cuz i'm using Safari 👀)

No comments design-wise, looks like you've done a good job of replicating the actual design! I'll leave the code to someone more experienced.

Looks good, the logos seem to be really stretched out though, i'm on Safari if that helps!

Initial thoughts, it's really good! My feedback would be to center the nav items in the navbar, perhaps reduce to container's width (it's currently too wide). As for the April Earnings box, you could set the image to position relative, and position the box absolute to it. It shouldn't take too much time to implement.

Good job nonetheless! :D

Thank you @moeminm,
I’ve changed the navigation.
For the Earnings box, you’re right that’s exactly what I should do but I don’t have a separated Hero image without the April Earnings box.
Thank you for your time.


Navigation is looking much better! 

You're right, i've just added the hero image without the box in the Assets folder, make sure to re-download the files if you want access to it, and thanks for bringing this to everyone's attention! 

Thank you.
Downloaded and updated my assets as well as the implementation Earnings box.
Keep safe.

Looks awesome, love the little animation you've put for the logos, makes it pop up even more! :D

Looks like you've done a wonderful job, my only comment is to remove the underlines under the buttons! Can you let me know which image was missing from the asset file so I can update it? Thank you!

This is simply awesome! I love you mimicked the challenges pages in Codewell to present your projects. The animation on the TimeNow template is also really creative, one thing worth practicing is changing the data inside the pricing table when the toggle is used in the TimeNow template.

I have no suggestions to give but again, this is awesome! 🔥

Is there any way we can view the project live? :D

ahh yes I forgot the underline thank you! and the hero images for the tablet and mobile I only had the desktop image.

unless the figma design is a little off shows different assets for desktop tablet and mobile.

Thanks for reporting this, will look into it and update the Figma files! 

My only comment is to have the logos as a slider on mobile, currently it's taking too much space up, other than that, looks awesome!

I'm afraid there isn't. You need Xcode to view the project :(

I think you've done a wonderful job! I also like that in the hero you used an actual component for the 'withdraw' part in the image, a lot of people just use an image. Good job!

Great job, my only comment is to have the hamburger menu switch to an 'X' icon when active!

For only 5 days you're doing pretty well, keep at it! :)

Codewell must provide images for mobile and tablet versions also.

Hi Pritam, please re-download the files. I've just added the different sizes in the Assets folder, although, it's better if you just work with one image and have it responsive instead of loading 3 different sizes.

You've done a great job on desktop! Remove the underlines and you should be fine... But the mobile view is similar is similar to desktop and just looks as if it has been shrunken down. Take a bit more time to make it like the original.

Hi Candra, I would like to say you've done well on this design. However, I noticed that your font was montserrat whereas this is one used the "Cabin" font as stated in the README file. Also in the text editor part of the promotion section, you should try the font-awesome arrow right icons as what you have doesn't meet the UI design. All in all I would say you have done a good job. I have learned a thing or two from checking your source code. Thanks for that. Keep working at it. And i would love to see the responsive version soon. cheers

👋Hi Moemin!

👍Good job on this one! I have some suggestions to improve this solution:
* For the company logos section, I recommend to make it one column on mobile, since right now they are too small on my mobile device.
* I recommend to always use double quotes instead of single quote for all HTML attribute, like this. It is just common practice.

<div class="container"></div>

* For all img tags, you need to have alt (alternative text) attribute. You can leave the `alt=""` empty if the images are decorative only.
* For the "Get Started" button, you should have `type="submit"` since that will be submit an email if this is a real website.
* I recommend to use `ul` and `li` tags for the list of links and the list of company logos. 
* Heading tags must go in order, which means you need to use h1, then h2, then h3, and so on.
* I recommend to use `rem` or sometimes `em` instead of `px`. Using `rem` or `em` will allow the user to control the size of your page based on their browser setting.
* I recommend to wrap all your content except the footer with `main` tag.
* For the `footer`, I recommend to use `footer` element instead of a `section` tag.

Tips for validating your code:
* Always validate your HTML first before you upload to the internet. You can use this official HTML validator from W3C
Link:
https://validator.w3.org
* Also for the CSS:
Link:
https://jigsaw.w3.org/css-validator/

That's it! And keep learning!

Quality feedback, thank you vanzasetia for taking the time to jot all this down. Can't say I disagree with anything, appreciate the support!

Hi brother, I believe you didn't push up all your changes. Your repo is pretty empty.

This is my first time partaking in a challenge recreating a simple landing page with HTML and CSS. Critics are very much welcome and appreciated. I hope you can also give me some advice like in what aspects should improve and practice more. Thank you.

Well done Jaspal, your solutions are always so well done! 🚀

Was this made for mobile only? Looks broken on Desktop for me.

hm looks good on my end! tested in both chrome and firefox. what were you testing on?

Thank you so much brother, means alot 😁

This is amazing, i'll feature this in the next community highlight on Twitter and the newsletter! 🔥

You should try to add object-fit: contain in the brand section to avoid warping the images

I did just the website on desktop to start. I haven't done the rest yet, but I think it looks nice!

- raster image of diagram should be made vector, maybe using the svg path from the figma file, and adding a color linear gradient.
- colors are grey for all the cards, but should be white.
- scroll behaviour is non-existent. There is going to be lots of rows on the tables.
- margins/paddings are all different to the figma file.
- font sizes and font weights are all different to the figma file.
- horizontal scrolling is needed to see the referral image, and then the top-nav logos don't stay in place.
- everything overfows its containers with a small window. Would recommend fixed sizing for the graph / referral vertically to prevent overflow (e.g. 400px).

Yeah It is amazing thanks for the help in the footer part I didn't know how to do it so I had a look at your code thanks I do really appreciate your help

Had to post twice because this f****** platform dosent have options to edit your submits...

In general, I was just changed name on Github so i had to change name on my github pages.

I checked your source code and I have had similar issues.
You can try changing the way you added the images where you do something like this
<img src="Assets/Checkmark.svg" alt="checkmark"> instead of
<img src="../Assets/Checkmark.svg" alt="checkmark">
The first one will work locally and on deployment. 
If it works, you might try writing it down so it's easier to get next time.
I am looking forward to seeing the site once the images show. Cheers.


Hi Tomiwalex! This project looks great! The only thing I noticed was your min-height on your body was set at 200vh. I changed it to 100vh and the footer stayed at the bottom of the page. You really did a great job!

Bro, a major part of making fronted is to make it as responsive as possible. 
eg : http://magabee.rf.gd/100daysofcode-2/53-snipper-landing-page/

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

Spense Challenge

{"ops":[{"insert":"Spense desktop website version using React js\n"}]}

Spense desktop website version using React js

{"ops":[{"insert":"I used vite with vue + windiCSS\n"}]}

Landing page

HTML and CSS with JS (for collapse navbar)

{"ops":[{"insert":"Spense landing page challenge with minimum dependencies\n"}]}

Spense landing page

Spense Landing Page With Improved Accessibility & Image Compression

Please review my source code

Snippet Template Solution

{"ops":[{"insert":"Tailwind CSS + HTML\n"}]}

Spense Code Well Challenge

Snipper Landing Page.

{"ops":[{"insert":"Hi! I tried building Spense app with UIKit on Xcode. Hope you enjoy my app!\n"}]}

Spense app built with UIKit

{"ops":[{"insert":"Built with HTML, CSS/SASS, JavaScript\n"}]}

Using pure html and css

Spense Landing Page Solution

Spense solution

{"ops":[{"insert":"Completed this challenge, nice design. I had a lot of fun doing it.\n"}]}

React with styled components solution

Fun, love this platform

Spense using bootstrap

Snipper Template complete 

{"ops":[{"insert":"Challenge performed using html, css, css and javascript\n"}]}

Spense

{"ops":[{"insert":"I learned css and html in 5 days so i'm looking forward practicing\n\n"}]}

Solution

{"ops":[{"insert":"Simple landing page built with Sass\n"}]}

{"ops":[{"insert":"Build with React framework, using styled components with tailwind css\n"}]}

React Tailwind css

{"ops":[{"insert":"i swear this is the last one\n"}]}

MajeedAlray - Spense Landing Page

{"ops":[{"insert":"This is a good design to work with flex and grid.  \n"}]}

HTML, CSS, SASS, FLEXBOX

{"ops":[{"insert":"This website is done with html and css.\n"}]}

responsive layouts with css 

{"ops":[{"insert":"This prototype was made with HTML, SASS and JS.\n"}]}

Spense with HTML and SASS

spense landing page made with html and css

Spense Landing Page  - Ayden Ashcroft

Spense Landing Page 

Spense starter store website

Spense starter

Fantastic Practice!

spense. web slicing challenge

Spense w/Youtube solution!

Snipper Landing Page Challenge

{"ops":[{"insert":"This is my first attempt at creating a responsive  website. \n"}]}

First Challenge 

Created using CSS flexbox

React Spense Landing Page

{"ops":[{"insert":"I hope your feedback\n"}]}

Spense.Landing page

{"ops":[{"insert":"I did this project using React JS and Framer Motion \n"}]}

Snipper landing page with HTML And Tailwind CSS

{"ops":[{"insert":"gulp-sass browser-sync \n"}]}

Snippet Template challenge codewell

{"ops":[{"insert":"Spense landing page clone only using HTML and CSS\n"}]}

{"ops":[{"insert":"Spence Landing page with flexbox and css grid\n"}]}

Spence Landing page with flexbox and css grid

Spense Landing page

spense_landing_page HTML,CSS, and Javascript

Finished Using Tailwind CSS and Semantic Tags

{"ops":[{"insert":"I have used Bootstrap 5.1 for this project. Any feedback is appreciated.\n"}]}

Spense Landing Page solution using Bootstrap 5.1

First timer

Spense Landing Page Submission

Spence Landing Page

Snippet_Template_Starter_Files

Landing Page

{"ops":[{"insert":"I tried to only use CSS in the hamburger menu, it looks good.\n"}]}

Slysux Spense-landing-page

{"ops":[{"insert":"Responsive landing page design\n"}]}

Spense-landing-page-by-anlo

{"ops":[{"insert":"Snipper Landing Page made using HTML, CSS, JavaScript.\n"}]}

Snipper-Landing-Page

Snipper - Gorgeous Code Snippets solution by psplawski

Spense Landing Page Using SCSS & BEM 

{"ops":[{"insert":"Any suggestions would be great.\n"}]}

{"ops":[{"insert":"Snipper Landing Page\nMade with pure HTML&CSS\n"}]}

Snipper-landing-page

{"ops":[{"insert":"Thanks for the real life projects.\n"}]}

spense solution by Mr. Ravi

{"ops":[{"insert":"Feel free to ask for any questions, it was a fun challenge!\n"}]}

Katalina G / CW-Snippet-Template

Spense Landing Page Solution by Hayden.

Workside template

Solution to sidebar in tablet mode

Spense Starter Files

{"ops":[{"insert":"Responsive landing page built with Svelte Kit and Tailwind CSS.\n"}]}

Snipper (Svelte Kit + Tailwind CSS)

spense landing page

Developer-Portfolio

Spense Page

Snipper Landing page solution. Pure css

Personal solution for the "Snipper Landing Page" challenge

Snipper Template Starter

{"ops":[{"insert":"My version of Spense landing Page\n"}]}

{"ops":[{"insert":"I used vanilla CSS and HTML to complete the challenge. Used Flexbox. \n"}]}

Challenge Completed using HTML and CSS 

{"ops":[{"insert":"a simple HTML & CSS Solution\n"}]}

Spense Starter

Snippet Template

Snipper Template

{"ops":[{"insert":"Made with React.js\n"}]}

Snipper Landing Page by Fran Mella

{"ops":[{"insert":"I was a nice project.\n"}]}

Snipper Snippet Landing Page

Demo Spence

{"ops":[{"insert":"Without Figma file.\n"}]}

{"ops":[{"insert":"Amazing Project.\n"}]}

{"ops":[{"insert":"Great for learn html and css, using javascript for hamburger menu only.\n"}]}

My Spense Solution

Mobile-first Spense Landing Page

{"ops":[{"insert":"This is my second project using Tailwind CSS. I am absolutely loving it.\n"}]}

Built with Tailwind & React

{"ops":[{"insert":"Created with  HTML and CSS\n"}]}

First Try Not So Responsive Spense

{"ops":[{"insert":"Responsive Spense landing page coded using HTML, CSS, and JavaScript.\n"}]}

Workside job

Ideate-Dashboard

Snipper Solution - HTML, CSS, Vanilla JS

{"ops":[{"insert":"Snipper Landing Page (HTML, CSS, JS)\n"}]}

{"ops":[{"insert":"it was all needed flexbox & Bootstrap for Navbar.\n"}]}

Spense-Landing-Page

Spense Web page

HTML, CSS, Vanilla JS Solution

My solution 9/10

Spense submission

{"ops":[{"insert":"Another fun challenge completed\n"}]}

{"ops":[{"insert":"Another challenge from codewell, \nHappy coding guys!\n"}]}

Snoppet-landing-page with html and css

{"ops":[{"insert":"One challenge to get free challenges here all done,\nHappy coding guys\n"}]}

Spense landing page built with HTML and CSS

Spence landing page with HTML, CSS and JS for burger.

Spanse Landing Page

{"ops":[{"insert":"it was a little bit difficult adjusting the view for different screen size.\n"}]}

spense 

{"ops":[{"insert":"html css vanilla js \nmobile first \ngrid and flexbox\n"}]}

{"ops":[{"insert":"Built with ReactJS, Tailwind and React-icons. Really a fun challenge!\n"}]}

Spense landing page

codewell spence landing-page

Landing Page