Build a Website from Scratch with Kotlin and Jetpack Compose

Download the cobweb binary from the GitHub repository, install Java 11, and update your path and Java home to run the cobweb server from IntelliJ; verify by checking cobweb version.

Create your first main section in Kotlin with Jetpack Compose, add a full-size background image, and layer a header, text, and controls using a box composable.

Create a header component in Kotlin with Jetpack Compose, featuring a left logo and mobile menu, plus a right navigation row for six sections defined by a section enum.

Create a responsive social bar as a Kotlin Jetpack Compose component. Include four icons (Facebook, Twitter, Instagram, LinkedIn) with hover color transitions and open links in a new tab.

Create a static skill bar component in Kotlin Jetpack Compose for the about me section, showing a skill name and a percentage progress bar with gray base and green overlay.

Add hover animations to the service card with base and hover styles, border and background transitions (200 ms), and CSS rules targeting child elements for synchronized color changes.

Learn to create a portfolio section and cards in a Kotlin and Jetpack Compose project, featuring a scrollable row of image-driven cards, hover interactions, and links with responsive widths.

Implement portfolio navigation in a Kotlin Jetpack Compose project with left and right arrows that scroll portfolio row by 325 pixels, featuring hover color transitions and a shared arrow style.

Create an achievement card component in a Kotlin and Jetpack Compose section, modeling achievements with icon, number, and description, then display them in a responsive grid over a colored background.

Trigger animated numbers in the achievements section when the section enters the viewport, updating four numbers via a coroutine-based animation and passing the animated values to each achievement card.

Create a Kotlin and Jetpack Compose testimonial section with a custom rating bar and card, showing six testimonials with two visible by default and navigation dots.

Implement a testimonial navigation in a Jetpack Compose project by stacking six testimonials into three pages, toggling visibility and opacity with a responsive grid and smooth transitions.

Move the rating bar to the bottom of the text block to ensure consistent widths across screen sizes and set a max width of 500.

Design a reusable work experience card component in Kotlin and Jetpack Compose, building an experience section with description, details, and an active current position in a responsive grid.

Animate the work experience cards with a viewport-triggered margin change on the ExperienceCard component, using a 500ms CSS transition, staggered delays, and responsive alignment and line height for mobile.

Create a responsive contact me form with name, email, and message fields, styled with Bootstrap classes and custom styles, including placeholders and required validation.

Learn to build a contact form that sends emails with Formspree, connect labels to inputs using for attributes, and configure form action, post method, and name attributes to capture submissions.