computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.6 KiB
84 lines
2.6 KiB
--- |
|
import { Swords } from 'lucide-react'; |
|
--- |
|
|
|
<div class='flex flex-col'> |
|
<div |
|
class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400' |
|
> |
|
<span class='h-3 w-3 rounded-full bg-black'></span> |
|
<span class='h-[1px] w-[15px] bg-black'></span> |
|
<h2 class='rounded-md border border-black bg-black px-3 py-2 text-white'> |
|
Step 1 — Learn the absolute basics i.e. HTML and CSS |
|
</h2> |
|
</div> |
|
|
|
<p class='mb-2 text-sm text-gray-500'> |
|
Purchase and watch one of the following <span class='font-medium text-black' |
|
>premium courses</span |
|
> |
|
</p> |
|
|
|
<div class='rounded-lg border p-3'> |
|
<ul class='flex flex-col gap-1 text-sm'> |
|
<li> |
|
<a href='#' class='group font-medium text-gray-800 hover:text-black'> |
|
<span |
|
class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline' |
|
> |
|
Course |
|
</span> |
|
|
|
<span class='underline underline-offset-1' |
|
>HTML and CSS with Mosh</span |
|
> |
|
</a> |
|
</li> |
|
<li> |
|
<a href='#' class='group font-medium text-gray-800 hover:text-black'> |
|
<span |
|
class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline' |
|
> |
|
Course |
|
</span> |
|
|
|
<span class='underline underline-offset-1' |
|
>Learn HTML with 50 Projects</span |
|
> |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<p class='mt-3 text-sm text-gray-500'> |
|
Once done, build the <span class='font-medium text-black' |
|
>following projects</span |
|
> to test and practice your skills |
|
</p> |
|
|
|
<div class='mt-3 flex flex-col gap-1'> |
|
<a |
|
href='/projects/task-tracker' |
|
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
|
> |
|
<Swords size='1.25em' className='text-gray-400' /> |
|
Build a login page for a website. |
|
</a> |
|
|
|
<a |
|
href='/projects/task-tracker' |
|
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
|
> |
|
<Swords size='1.25em' className='text-gray-400' /> |
|
Create a landing page for an e-commerce website. |
|
</a> |
|
|
|
<a |
|
href='/projects/task-tracker' |
|
class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300' |
|
> |
|
<Swords size='1.25em' className='text-gray-400' /> |
|
Create a responsive website for a restaurant. |
|
</a> |
|
</div> |
|
</div>
|
|
|